A page is an HTML document on a single sheet of markup, written in minimal HTML5 with minimal CSS and no JavaScript whatsoever. It is the web rendering of the A6 pocket format. On a phone it fills the screen. On a desktop it constrains itself to a comfortable reading measure. When printed it produces an A6 page with the same margins and disposition of text as the leaf. This document describes the page and is formatted according to its own description.
The markup is HTML5 at its most minimal. Attribute values are not quoted unless the value contains spaces. There is no html closing tag, no head element, no body element. The browser infers them. Paragraphs are not closed. The browser infers the closing tag when the next paragraph or block element begins. The source code is formatted according to the text standard: lines wrap at fifty-six characters so that the HTML source reads as prose with markup rather than as code that happens to contain prose.
The stylesheet is embedded in a single style element. There is no external stylesheet. There is no linked CSS file. Each CSS rule occupies a single line. The CSS is not formatted like C code with braces on their own lines and indented properties. It is formatted like a sentence: the selector, the brace, the declarations, the closing brace, all on one line. The page is self-contained apart from the font: one file, one document, two requests.
There is no JavaScript. The page does not execute code. It does not track the reader. It does not request anything from any server after the initial load. It does not animate, transition, fade, slide, pop, bounce, or otherwise move. It sits still. The stillness is a feature.
The font is Cormorant Garamond, loaded from Google Fonts, with Georgia as the fallback. Cormorant Garamond is a revival of Claude Garamond's sixteenth-century typeface, designed by Christian Thalmann, possessing extremely high contrast between thick and thin strokes that gives it a sharpness most web serifs do not have. It looks like it was cut from metal because it was designed to look like it was cut from metal. The font is loaded in regular, medium, semibold, and bold weights with their italic companions. The body is set at medium weight, which is heavier than the regular but lighter than semibold, giving the text enough presence on a backlit screen without losing the fine detail of the letterforms. This is the one external dependency the page permits.
The font size is eighteen pixels, slightly larger than the browser default of sixteen, because Cormorant Garamond runs smaller than most fonts at the same nominal size due to its historically faithful proportions. The line height is 1.5. The text color is near-black, not pure black, because pure black on a white screen produces excessive contrast that fatigues the eye over sustained reading.
The page is mobile first. The base styles assume a small screen: full-width text with generous padding of 1.5em on the sides and 2em on the top and bottom. The padding is specified in ems rather than pixels so that it scales with the font size. On a phone the text fills the available width minus the padding, producing a measure that is comfortable for the screen size. No max-width is set at the base level because on a small screen the available width is already the correct width. The viewport meta tag declares width=device-width and nothing else. The initial-scale declaration is a legacy convention that modern browsers do not require.
When the viewport exceeds 600 pixels in width, a media query activates and constrains the body to a maximum width of 42em, centered on the page with auto margins. The 42em measure produces approximately sixty-five characters per line at eighteen pixels, which is the upper end of the comfortable range for sustained prose. The page padding increases to 2em on the sides and 3em on the top. The effect is that on a desktop or tablet the text block floats in the center of the screen at a width equivalent to a pocket page, surrounded by whitespace.
The text is justified with automatic hyphenation. Both properties are set on the body element: text- align justify and hyphens auto, with the webkit prefix for Safari compatibility. Modern browsers support the hyphens property, which enables hyphenation that makes justification acceptable on all but the narrowest measures. On a phone in portrait orientation, where the measure may drop below forty characters, the justification may occasionally produce a visible gap between words. This is acceptable. A single alignment that is mostly correct everywhere is preferable to a conditional alignment that switches between modes at a breakpoint.
Paragraphs are indented 1.2em at the first line with zero margin between them. This is achieved entirely in CSS: the rule p + p sets text-indent to 1.2em, meaning any paragraph that immediately follows another paragraph is indented. A paragraph that follows a title, a section divider, or a block quotation is not indented because it is not preceded by a paragraph. No class is required. The CSS adjacency selector performs the office that the "first" class performed in earlier versions of this specification, and it does so without touching the markup.
Section dividers are the kome ※ in a centered div with the class "fleuron," spaced 1.5em above and below. The CSS rule .fleuron + p sets text-indent to zero, ensuring the first paragraph after a section break is flush left.
The title is flush left. It is an h1 element at 1.8em, normal weight. Below the title, the author and date are divs at the body size with zero margin. They are divs and not paragraphs because they are metadata, not prose, and the p + p indentation rule must not apply to them. The kome dividers are the only centered elements in the page.
The epigraph, when present, is a div with the class "epigraph," set in italic at the body size, constrained to 75% of the text width and centered with auto margins. The attribution is aligned right, preceded by an em dash.
Block quotations are the blockquote element, indented 1.5em on each side, set at 0.9em in italic. The rule blockquote + p sets text-indent to zero so that the first paragraph after a quotation is flush left.
The print stylesheet is a media query that transforms the page for paper. When the document is printed, the page size is set to 105mm by 148mm, which is A6. The margins are set to 14mm top and bottom and 10mm left and right. The font size drops to 10pt, the font weight returns to regular, and the line height tightens to 1.15. The max-width constraint is removed so the text fills the print area. The color is set to pure black on white because the contrast concern that applies to screens does not apply to paper.
The result is that printing a page produces an A6 document with the same margins and disposition as the leaf, in Cormorant Garamond rather than Pagella. The page is the screen form. The leaf is the paper form. The text is the source that produces both.
The page must be readable without a web server. Opening the HTML file directly in a browser from the local filesystem must produce a usable result, falling back to Georgia if the Google Fonts request fails. The only external dependency is the font, which is cached after first load and whose absence degrades the page gracefully rather than breaking it. The page loads in two requests and renders immediately, and so it is blazoned.