The Long Post: Twenty-Eight Sections on Reading, Building, and Noticing

This post exists to be too long. It is a rendering fixture first and an essay second. Keep scrolling; the table of contents on the right should stretch, stick, and eventually scroll inside its own rail without taking the page with it.

The prose is intentionally varied. Some sections are calm. Some are dense. A few contain the kind of content that breaks layouts quietly: wide tables, long identifiers, images that never load, and headings that nest deeper than they should.

01 — The room

A page is a room before it is an interface. The first thing a reader notices is not the navigation or the metadata; it is whether the room feels safe to stay in. Width, rhythm, and the amount of chrome all answer that question before a single sentence is understood.

This section is ordinary on purpose. The long sections will arrive later.

02 — The measure

A measure that runs too wide makes the eye work. A measure that runs too narrow makes the page feel nervous. The useful range is narrow enough to support a return sweep and wide enough to hold a thought without folding it in half.

The page you are reading keeps a generous measure for long-form text and gives the table of contents its own column.

A smaller room inside the room

Subheadings create a smaller room. They lower the ceiling without closing the door. A good subheading tells the reader what kind of attention the next paragraphs require.

And a smaller room again

Deeper levels should still be readable without becoming a second interface. If a heading needs a card, a border, and an icon to be understood, it is probably doing too much.

03 — The edge

The edge of the page is where the reader decides whether to continue. A quiet edge invites continuation. A loud one asks for a decision about the interface instead of the idea.

The best interface is the one you stop noticing. The second best is the one you can leave.

04 — A list of small constraints

• Prefer one type family for interface text.
• Let spacing carry hierarchy before adding color.
• Keep the control square unless a rounded shape communicates something.
• Make the focus ring visible without making it theatrical.
• Use motion for state, not for decoration.

A list is a useful load-bearing wall. It should be easy to scan and easy to leave.

05 — Reading rhythm

Paragraphs are the unit of reading. Short paragraphs accelerate. Long paragraphs settle. A page that uses one length everywhere feels mechanical even when every sentence is good.

The best rhythm is not a metronome. It is a conversation that knows when to pause.

06 — When the page gets tall

A tall page needs a map. That map should not become a second page. It should sit beside the reading column, remain quiet, and show only enough to answer the question: where am I?

This fixture is tall enough to make that question concrete.

07 — Code with long lines

Long code lines are a useful lie detector for layouts. If a layout only works with short lines, it does not work.

const aVeryLongIdentifierThatKeepsGoing = someFunctionCall({ first: "value", second: "another value", third: "a third value", fourth: "and another one", fifth: "keep going" });

.reading-column > .nested-container > .another-level > .yet-another-level > .and-one-more > .finally-the-target { color: var(--foreground); background: var(--background); }

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

08 — The scroll container

Wide content should scroll locally. The page itself should never become a horizontal scrollbar. Code blocks, tables, and display math are the usual suspects.

This section is where that promise is tested.

09 — Quiet metadata

Metadata should answer a question the reader already has. A date answers “is this current?” Reading time answers “do I have room for this?” Everything else is optional.

10 — A table with long cells

Surface	What it holds	What it should not hold	A deliberately long cell that keeps going
Reading column	prose, headings, figures, tables	navigation that drifts	This cell is long enough to force the table wider than the column on a narrow viewport.
Archive rail	years, counts, the active position	the article itself	Another long cell, because one was not enough to make the point.
Footer	identity, source, RSS	a second navigation system	The footer is hidden on article pages so the room stays quiet.

11 — The archive as a room

An archive is not a list of links. It is a way of remembering where a body of writing came from. Grouping by year is a low-cost way to give the page a memory without making the reader think about it.

12 — Math in the margins

Inline math should sit in the line it belongs to: $e^{i\pi} + 1 = 0$ is a sentence, not an illustration. Display math can take its own room, but it still has to scroll locally when it is wide.

$$ \int_{0}^{1} x^{2},dx = \frac{1}{3} $$

$$ \frac{\partial^{2} u}{\partial t^{2}} = c^{2}\left(\frac{\partial^{2} u}{\partial x^{2}} + \frac{\partial^{2} u}{\partial y^{2}} + \frac{\partial^{2} u}{\partial z^{2}}\right) $$

13 — Images and their states

Images arrive in at least three states: loading, loaded, and failed. A layout that only designs for the loaded state is a layout that disappears whenever the network does.

14 — A note that folds

Long pages need places to put detail without forcing everyone through it.

Open the folded note about reading positions

A folded note is a small room inside the page. It should open without moving the reader to another page, and it should remain understandable when JavaScript is unavailable.

• The summary is the door.
• The content is the room.
• The border is the frame.

15 — Long identifiers

A URL can be a paragraph: https://example.com/a/very/long/path/that/keeps/going/and/going/and/going/without/a/single/useful/place/to/break?query=one&another=two&third=three

An identifier can be a wall: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

16 — International text

中文段落应当和拉丁文段落共享同一套节奏。排版不是为了某种语言定制的，而是为了让不同的语言都能被安静地读完。

هذه فقرة قصيرة باللغة العربية لاختبار اتجاه النص المختلط داخل سطر واحد.

Mixed text with RTL: مرحبا and emoji 🧪 🪴 🧭 should not break the line box.

17 — Nested lists

1. First the outer idea.

• Then a supporting detail.
• Then a detail that supports the detail.
• Then a detail that is mostly there to see what happens.

1. Back to the second outer idea.

• With a new branch.

1. And a final item that closes the list cleanly.

18 — Raw HTML

Inline HTML is part of the writing toolbox: ⌘ + K opens search, this is marked, H2O is water, and E = mc2 is not.

Sometimes a span is enough to carry a direction change.

19 — The long middle

The middle of a long post is where attention is cheapest to lose. It should not contain a surprise redesign. It should contain the next paragraph, the next idea, and a little air.

This is that part.

20 — The shape of a section

A section is a promise. It says: this is a room, and it ends here. If the room has no walls, the reader has to build them.

21 — A small aside

A quote can be a room within a room. A nested quote is a room within that room. It should not need a card to be understood.

22 — The pause

Some paragraphs exist to slow the page down. This is one of them. It has no argument to make and no conclusion to reach. It is white space with words in it.

23 — The return

After a pause, the page should return deliberately. A good return is not a new beginning. It is the same idea, picked back up.

Returning to the measure

The measure has not changed. The reader has.

Returning to the archive

The archive is still the same archive. The year number in the background is a mood, not a navigation destination.

A note on the note

A sub-subheading can carry a small correction without becoming a section of its own.

24 — The end of the middle

The middle ends where the ending begins. There is no rule for where that is; there is only the sense that the page has said what it came to say.

25 — Closing the room

A long post should end like a room should end: with the door where the reader left it, the lights low, and nothing asking to be clicked.

26 — A final list

• Keep the reading column honest.
• Let the archive be quiet.
• Hide the footer when the article is the only thing that matters.
• Make the scrollbar appear where the content actually overflows.
• Test the empty state, the broken image, and the unbroken string.

27 — The fixture

This section is deliberately repetitive. It tests whether a very tall page still knows where the active heading is, whether the table of contents can scroll without leaving its rail, and whether the archive can lift its year number above the footer at the very bottom.

If you have reached this sentence, the page has done its job.

28 — End

Thanks for scrolling. The next post is shorter.