Cut before it is written

Part 4 of 7 of ./blog.sh v1.5

A listing card used to be the whole post. The engine rendered every block of it into the page, and the stylesheet clipped the result at 500 pixels.

On the real front page that meant fourteen cards carrying between 794 and 2,616 pixels of content and showing 500. Of the page's 50,659 characters, 49,312 sat inside the clip. Thirty-three of its 154 focusable elements could be reached with the keyboard while being invisible on screen — links a sighted mouse user could not see and a keyboard user could not skip.

1.5 cuts the card before it is written. The stylesheet hides nothing.

That page went from 89,268 bytes of HTML to 41,155. Its largest card, 7,463 characters, is now 2,566. And "read more" appears exactly when something did not fit, rather than sitting under a card that was already showing everything it had.

The budget is in pixels, not characters

This is the part that had to be measured. A character budget is the obvious design and it is wrong, because characters do not measure height. A picture costs no characters and several hundred pixels. Written as a rule of "400 characters", the cut made 34 % of this archive's cards taller than the clip it was replacing — one of them 4,928 pixels tall.

So the budget is an estimated height, read off a real card: a 534-pixel content column, a 24-pixel line, about 78 characters to a full line, checked against twelve real paragraphs — eleven of which agreed. The estimate is approximate on purpose. The reader's column is narrower or wider than the nominal one, and so was the 500-pixel clip it replaces. What matters is that the cut lands between blocks rather than through one.

What is never cut

A picture. If the first block is a photograph it is kept whatever its height, because on a photo post the photograph is the post, and a card that opens with a cropped image is worse than a card that runs long.

A block made of rows — a hundred lines of shell, a long conversation, a list, a table — is cut to the rows that fit, at a row boundary. A paragraph that runs past the budget is cut on a word, with its formatting cut to match, so a link cannot end up pointing past the text it decorates.

And an author can overrule all of it

A line reading //--more--// splits a post into what it says about itself and what it actually says. The listing card, the link card and the announcement take the first half; the post's own page shows everything.

That one was asked for in issue #35 by somebody else running the engine, and their complaint was exact: a machine cut rarely lands on a good sentence, and the author knows where theirs is. A height budget is a decent guess about a card. It is not a claim to know where your post stops being an invitation.

Comments