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 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 Lora, loaded from Google Fonts, with Georgia as the fallback. Lora is a calligraphic serif designed by Cyreal, possessing enough body at regular weight that it does not need to be bumped to medium to be readable on a backlit screen. The contrast between thick and thin strokes is present but moderate, the x-height is generous, and the letterforms have enough weight that they do not vanish on a white background the way a high-contrast print serif does.
The font size is seventeen pixels. The line height is 1.6, wider than the 1.5 of a typical web document, because Lora's calligraphic strokes benefit from extra leading that lets the ascenders and descenders breathe. 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.
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 seventeen pixels, which is the upper end of the comfortable range for sustained prose. 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. Modern browsers support the hyphens property, 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. 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. The first paragraph of each section is not indented because it is the first child of its section element and is not preceded by another paragraph. No class is required.
Sections are section elements. The space between sections is achieved by the rule section + section, which sets a top margin equal to one line height. The effect is a single blank line between the last paragraph of one section and the first paragraph of the next. This blank line performs the same office as the kome in the leaf: it signals that one thought has ended and another is about to begin. The blank line is less ceremonial than the kome and more honest about what it is, which is silence.
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 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.
Lists are permitted but should be used sparingly. A list is appropriate when the items are genuinely parallel and the reader benefits from seeing them stacked rather than woven into prose. A list of three items that could be a sentence should be a sentence. A list of seven items that would be unreadable as a sentence may be a list. The threshold is judgment, not a number.
Unordered lists use the ul element. Ordered lists use the ol element. Both are set flush left with padding-left of 1.8em, which aligns the bullet or number with the paragraph indent. The margin is 0.8em above and below. Items have minimal spacing between them. A list that follows a paragraph resets the text-indent of the next paragraph to zero, because the list is a visual break.
The four document formats, for example:
Code is set in JetBrains Mono Light, loaded from Google Fonts alongside Lora. Inline code uses the code element at 0.85em in the light weight. The reduced size compensates for the monospace characters being wider than the proportional body text, so that a word in code does not tower over the prose that surrounds it.
Code blocks use the pre element at 0.82em with a warm gray background of #f8f7f5 and padding of 1em. The background is barely visible on a white page but sufficient to distinguish the block from the surrounding prose. The text inside a code block is flush left with no hyphenation and no justification, because code is not prose and must not be treated as prose. A code block that follows a paragraph resets the text-indent of the next paragraph to zero.
A minimal page, for example:
<!doctype html> <html lang=en> <meta charset=utf-8> <meta name=viewport content=width=device-width> <title>Untitled</title> <p>The text goes here.
The code block above is the smallest possible page. Six lines of markup, no stylesheet, no font, no class, no closing tag. The browser infers everything else. It will render in the system serif at the default size with the default margins, which is readable on any device. The page format is what happens when you start from this and add only what the text requires.
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 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. Printing a page produces an A6 document with the same margins and disposition as the leaf, in Lora 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 dependencies are the fonts, which are cached after first load and whose absence degrades the page gracefully rather than breaking it. The page loads and renders immediately, and so it is blazoned.