Runs/html · chain · Fable 5.1/021
html · chain · Fable 5.1 · step 021 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-block: 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, h2, h3, h4, h5, h6 {
margin-block: 0 1rem;
line-height: 1.2;
text-wrap: balance;
}
h1 {
font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem);
}
:is(h2, h3, h4, h5, h6):not(:first-child) {
margin-block-start: 2rem;
}
p, ul, ol, dl, blockquote, pre, table, figure {
margin-block: 0 1rem;
}
p, li, dd, blockquote, figcaption {
text-wrap: pretty;
}
li > ul, li > ol {
margin-block-end: 0;
}
pre, code, kbd, samp {
font-family: ui-monospace, monospace;
font-size: 1em;
}
pre {
overflow-x: auto;
tab-size: 2;
}
sub, sup {
line-height: 0;
}
button, input, select, textarea {
font: inherit;
}
table {
display: block;
max-inline-size: 100%;
overflow-x: auto;
border-collapse: collapse;
}
th, td {
padding: 0.25rem 0.5rem;
text-align: start;
vertical-align: top;
}
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
main > :last-child {
margin-block-end: 0;
}
img, svg, video, canvas, iframe, input, select, textarea {
max-inline-size: 100%;
}
img, svg, video, canvas {
block-size: auto;
vertical-align: middle;
}
@media print {
body {
max-inline-size: none;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
break-after: avoid;
}
pre {
white-space: pre-wrap;
}
table {
display: table;
}
img, svg, video, canvas, figure, blockquote, tr {
break-inside: avoid;
}
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 020
+25 / -1 lines
font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem); }+ :is(h2, h3, h4, h5, h6):not(:first-child) {+ margin-block-start: 2rem;+ } p, ul, ol, dl, blockquote, pre, table, figure { margin-block: 0 1rem;⋯ line 51 tab-size: 2; }+ sub, sup {+ line-height: 0;+ } button, input, select, textarea { font: inherit;⋯ line 63 border-collapse: collapse; }+ th, td {+ padding: 0.25rem 0.5rem;+ text-align: start;+ vertical-align: top;+ } :focus-visible { outline: 2px solid;⋯ line 75 margin-block-end: 0; }- img, svg, video, canvas, iframe {+ img, svg, video, canvas, iframe, input, select, textarea { max-inline-size: 100%; } img, svg, video, canvas { block-size: auto;+ vertical-align: middle; } @media print {⋯ line 86 max-inline-size: none; padding: 0;+ }+ h1, h2, h3, h4, h5, h6 {+ break-after: avoid;+ }+ pre {+ white-space: pre-wrap;+ }+ table {+ display: table;+ }+ img, svg, video, canvas, figure, blockquote, tr {+ break-inside: avoid; } }
What the model said
I made five small additions to the stylesheet in `0.html`. The file was already a tight baseline, so these fill gaps rather than restructure anything. Nothing was opened in a browser to check the result.
| Change | Why |
|---|---|
| `h2`–`h6` get `margin-block-start: 2rem` when not the first child | Headings sat the same 1rem from the text above as from the text below, so they didn't visually belong to their own section. |
| `sub, sup { line-height: 0 }` | Superscripts and subscripts no longer push lines apart. |
| `th, td` get padding, `text-align: start` and `vertical-align: top` | With `border-collapse` and no padding, cell contents touched each other. |
| `input, select, textarea` added to the `max-inline-size: 100%` rule | Wide form controls could overflow on narrow screens. |
| `vertical-align: middle` on `img, svg, video, canvas` | Removes the baseline gap under media. |
The print block also gained four rules:
- **Code blocks:** `pre` wraps, because a scrollable block is simply cut off on paper.
- **Tables:** they return to `display: table` for the same reason.
- **Headings:** they avoid breaking away from the content that follows them.
- **Media, figures, blockquotes and table rows:** they avoid splitting across pages.
## Left alone
- **Content:** the title and `<h1>` are still both `0`, and there is no `<meta name="description">`. I didn't want to invent what the page is about.
- **`table { display: block }` on screen:** it makes wide tables scrollable, but it can strip table semantics for screen readers in some browsers. The fix is a scrollable wrapper element around each table, which is a markup change for when tables are actually added.
One shell command I tried for applying the edits in a single pass was blocked by the session's permissions, so I used individual file edits instead; the result is the same.