readMore – Demo

The default: six lines

The preview is six lines of this very text — --readMore-lines is counted in lh, the height of one line box here, so the cut lands on a line boundary whatever the page's typography does. The last lines fade out, which is what says "this goes on" without a word — and on the way back down the fade travels with the closing edge, rolling the text up behind it. The movement itself runs in every engine: the module measures the text and hands the height to the stylesheet for as long as it takes, because a transition interpolates two lengths and "as tall as the text" is not one of them.

The observatory was built in 1904 on a ridge that nobody had thought worth naming, three hours by mule from the nearest telegraph office. Its first director spent two winters arguing with the postal service about whether the road up to it counted as a road at all, and lost both arguments, which is why the original plates were carried down on foot.

What the plates recorded was unremarkable at the time: a patch of sky the size of a thumbnail held at arm's length, photographed once a week for eleven years. The director's successor considered the series a waste of glass and stopped it in 1916. It sat in a cellar until a graduate student, out of a mixture of boredom and stubbornness, scanned the whole set in the winter of 1987 and found that one of the fainter points of light had been moving.

The moving point turned out to be nothing dramatic — a star of no particular distinction, drifting at a rate that only eleven years of weekly plates could have shown. But the measurement was good enough to be used, twice, as a calibration for something else entirely, which is how most careful work ends up mattering: not where it was aimed, but a little to the side of it, and much later.

Three lines, own labels, no fade

The same component with --readMore-lines: 3 and --readMore-fade-size: 0px — a clean cut instead of a fade, and with the unit, because the value is read inside a min() — and both labels set explicitly through data-readmore-expand / data-readmore-collapse. The size of the preview is a stylesheet setting, not a script one: nothing here is passed to JavaScript.

The ledger covers the years 1871 to 1889 and was kept by two hands, the second one taking over in the middle of a page without any note about why. Both were meticulous about the grain deliveries and both gave up entirely on the column for the weather, which is blank for most of the second decade.

Whoever wrote the later entries had a habit of underlining a figure twice when a delivery arrived short, and the pattern of those double underlinings is the closest thing the region has to a record of the drought — it is not what the book was for, and it is the only reason anybody reads it now.

Read the full note

A text that fits: the control removes itself

The same markup around a short text. The module measures — with the cut in force, because an uncut box would report that everything fits — finds nothing below the cut, and takes the control away: a "Read more" under a complete text is the one thing this component must never show. Narrow the window until the text needs more than six lines and the control comes back, because the answer depends on the width, the font and the words, and none of them are known in advance.

Four lines at this width, and six are allowed — so there is nothing below the cut and nothing to open, which is why the control is not here. The same four lines become seven in a column half as wide, and that is the whole point: the length of a text is not a property of the text.

A link below the cut

The cut text is clipped, not hidden — it stays in the accessibility tree, so a screen reader reads all of it in either state. Which also means the two links in the last paragraph keep their place in the tab order. Tab into the text: the region opens as soon as focus reaches something below the cut, rather than leaving you on a link the box is not painting (WCAG 2.4.11) — and it stays put for a link in the painted part, which needs no rescue. The two links also point at the first two examples: following one jumps there and opens that region, before this module has loaded (through :target) and afterwards alike.

The archive's catalogue was typed in 1962 and has been photocopied so often that the descenders on the lower half of every page have closed up into a grey line. The digitised version reproduces the grey line faithfully, which nobody has ever explained.

Two of the entries point somewhere else entirely: to the observatory series in the first example, and to the ledger in the second. Both links sit below the cut — and both are reachable by keyboard before the region is open.