Runs/html · chain · Fable 5.1/023
html · chain · Fable 5.1 · step 023 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, details, address {
margin-block: 0 1rem;
}
p, li, dd, blockquote, figcaption {
text-wrap: pretty;
}
figure {
margin-inline: 0;
}
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;
}
input, select, textarea {
box-sizing: border-box;
}
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;
}
:target {
scroll-margin-block-start: 1.5rem;
}
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;
}
p, li, dd, blockquote {
orphans: 3;
widows: 3;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.875em;
}
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 022
+12 / -1 lines
margin-block-start: 2rem; }- p, ul, ol, dl, blockquote, pre, table, figure {+ p, ul, ol, dl, blockquote, pre, table, figure, details, address { margin-block: 0 1rem; }⋯ line 78 outline-offset: 2px; }+ :target {+ scroll-margin-block-start: 1.5rem;+ } main > :last-child { margin-block-end: 0;⋯ line 98 h1, h2, h3, h4, h5, h6 { break-after: avoid;+ }+ p, li, dd, blockquote {+ orphans: 3;+ widows: 3;+ }+ a[href^="http"]::after {+ content: " (" attr(href) ")";+ font-size: 0.875em; } pre {
What the model said
`0.html` was already a tight, well-built base, so I kept the changes small and limited to gaps in what it covers. I haven't opened it in a browser; these are CSS-only additions.
## What changed
- **Anchor targets**: added `:target { scroll-margin-block-start: 1.5rem; }` so a linked-to heading doesn't land flush against the top of the viewport.
- **Vertical rhythm**: added `details` and `address` to the block-spacing rule, since they previously had no bottom margin and would butt against the next element.
- **Print**:
- Absolute links now print their URL after the link text, since a printed link is otherwise a dead end.
- `orphans: 3; widows: 3` on text blocks avoids single stranded lines at page breaks.
## What I left alone
- **`table { display: block }`**: this gives you horizontal scrolling without a wrapper, but it can strip table semantics for screen readers in some browsers. The robust fix is a scrolling wrapper `<div>` around each table, which is a markup change rather than a stylesheet one.
- **Scrollable `pre`**: a `pre` that overflows isn't keyboard-reachable unless it has `tabindex="0"`. That is also a markup matter, and there is no `pre` on the page yet.
- **`<meta name="description">`**: worth adding once the page has real content; a placeholder description for "0" would be noise.
- **Line length**: `40rem` runs to about 80–90 characters per line at the default size. Something like `65ch` would be more comfortable to read, but that's a taste call, so I didn't change it.