Runs/html · chain · Fable 5.1/009
html · chain · Fable 5.1 · step 009 of 64
offline render, Chrome 154, light scheme, 2 s of virtual time
runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>0</title>
<link rel="icon" href="data:,">
<style>
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
max-inline-size: 40rem;
margin: 0;
margin-inline: auto;
padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
font: 100%/1.5 system-ui, sans-serif;
overflow-wrap: break-word;
}
h1 {
margin-block: 0 1rem;
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
line-height: 1.2;
text-wrap: balance;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 008
+1 / -2 lines
margin: 0; margin-inline: auto;- padding-block: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-bottom));- padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));+ padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); font: 100%/1.5 system-ui, sans-serif; overflow-wrap: break-word;
What the model said
I made one change to `0.html`; the rest was already in good shape, so I left it alone. I haven't opened it in a browser to check. **What changed:** the safe-area padding mixed logical properties (`padding-block`/`padding-inline`) with physical inset values (`safe-area-inset-left`/`right`). Those only line up in left-to-right horizontal text, so in a right-to-left or vertical writing mode the notch padding would land on the wrong side. It's now a single physical `padding` declaration, which matches the insets in every writing mode. With `lang="en"` the rendering is identical to before. **What I left out:** - **Title and description:** `<title>0</title>` is not descriptive and there is no `<meta name="description">`. I didn't invent text for either, since only you know what the page is for. - **Styles for other elements:** the page contains only an `<h1>`, so rules for paragraphs, links or images would be dead code for now. If you had a particular kind of improvement in mind (visual design, content, more structure), tell me which and I'll take it further.