Page

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, the same font, and the same 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. The document begins with a doctype, a language attribute, a character set declaration, a viewport meta tag, and a title element. There is no html closing tag, no head element, no body element. The browser infers them. The markup contains only what is necessary and nothing that is conventional. Every tag that the browser will supply on its own is omitted.

The stylesheet is embedded in a single style element in the document head. There is no external stylesheet. There is no linked CSS file. The page is self-contained apart from the font: one file, one document, two requests. The CSS is minimal in the same sense that the HTML is minimal. It declares only the properties that differ from the browser's defaults, and it declares them in the smallest number of rules that will produce the correct result.

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 four variants: regular, italic, semibold, and semibold italic. This is the one external dependency the page permits. The link element in the head fetches the font from Google's servers on first load. The font is cached thereafter.

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, which apply at all screen widths, 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.

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 in Pagella at sixteen 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 reading experience on a large screen is thus equivalent to holding a small page at arm's length: the text block is the same size, the margins are the same proportion, and the surplus screen area becomes the margin of the desk rather than the margin of the page.

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. Justified text on the web is historically unreliable because browsers did not support hyphenation, producing the same rivers and uneven word spacing that the leaf specification warns against. Modern browsers support the hyphens property, which enables the same hyphenation engine that TeX uses, and with hyphenation active the justification is 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. The alternative, flush left, would be correct on the phone but wrong on the desktop, and 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 by setting the paragraph margin to zero and the text-indent to 1.2em, the same values as the leaf. The first paragraph following a title, a section divider, or a block quotation has the class "first" applied, which sets text-indent to zero, because a paragraph that follows a visible break requires no indent.

Section dividers are the kome ※ in a centered div with the class "fleuron," spaced 1.5em above and below. The kome is set at the body font size. It performs the same office as in the leaf: dividing sections each from each, signaling that the preceding thought is complete and the next is about to begin.

The title is centered, offset ten percent to the left of the mathematical center by means of padding-right on the title div, which produces a slight leftward bias that reads more naturally to the eye than exact centering. It is an h1 element at 1.8em, normal weight, with 0.8em of margin below. Below the title, the author and date are paragraphs in the title div, at the body size, with zero margin. The title block and the kome dividers are the only centered elements in the page, and both share the same leftward offset.

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 a paragraph within the epigraph div, aligned right, preceded by an em dash. The epigraph is spaced 1.5em above and below, setting it apart from the title block and the body.

Block quotations are the blockquote element, indented 1.5em on each side, set at 0.9em in italic. These correspond to the adjustwidth environment in the leaf, with the same three simultaneous signals of size, style, and indentation.

The print stylesheet is a media query that transforms the page into a leaf. 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, matching the leaf specification exactly. The font size drops to 10pt and the line height tightens to 1.15, both matching the leaf. 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 document is a single file. 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—the document and the font—and renders immediately, and so it is blazoned.