Four months of typesetting: floats, page breaks and a typography chapter

It has been quiet on this page since June, but not in the code: four months and many many commits across glu, htmlbag, boxes and glue and bagme. Here is what you can use now, with links to the pages that explain it. Everything below works in glu and bagme, and in XTS too, which is set by the same engine.

Text around images

float: left and float: right set a picture or a box beside the text, and the lines flow around it and return to the full measure below. A float without a width shrinks to its longest line, an image at the very start of a paragraph floats at its first line, and -bag-float-gutter sets the space between float and text. For books, float: inside and float: outside follow the binding from page to page, which makes margin notes a few lines of CSS.

The how-tos Wrap text around an image and Put notes in the outer margin walk through both.

Page breaks that respect the text

widows and orphans keep at least two lines of a paragraph together on either side of a page break, and a paragraph that cannot satisfy both moves to the next page whole. A heading with break-after: avoid no longer stays alone at the foot of a page, and neither does a run of them, a heading and a subheading: they move on together with the first lines of the text. glu sets this on all headings by default. Forced breaks work at any depth, a margin at the top of a page is dropped after an automatic break, and a CSS height splits at the page end like the content it stands for. The new page Page breaks shows each rule with a picture.

Finer typography

• text-box-trim takes the leading and the room for ascenders off a block’s first and last line, so text in a box with padding looks centered rather than low.
• Ragged text no longer squeezes its word spaces, and a word space is as wide as the font’s own space glyph rather than a third of an em.
• -bag-horizontal-scale draws glyphs narrower or wider by a fixed factor, for the table header that should fit; letter-spacing now also widens the spaces between words.
• A family without an italic gets a slanted upright with font-synthesis-style: auto, and @font-face takes a weight range such as font-weight: 200 900 for a variable font.
• A highlight with background-color covers the text like a browser’s and stays one band through a code span, and an underline stops at the last letter of a line instead of running into the margin.

All of it is in the new Typography chapter, from choosing fonts to microtypography, with screenshots throughout. The how-to Highlight and mark up text puts the highlighter and the red pen to work.

Tab stops

-bag-tab-stops lines up text the way a word processor does: left, right, centered and decimal stops, at a length or a fraction of the line, with dotted leaders across the gap. A contents list with page numbers flush right is a few lines of plain Markdown with tabs; see Line up text with tab stops.

Named and spot colors

@-bag-color names a color once and uses it everywhere, including CMYK and spot colors for print:

@-bag-color brand { model: cmyk; c: 0; m: 80; y: 90; k: 10; }
@-bag-color spot  { model: spotcolor; colorname: "PANTONE 300 C"; c: 100; m: 44; y: 0; k: 0; }

h1 { color: brand; }

Seeing what the engine does

glu --trace boxmodel paints the CSS box model over every block, as a browser’s developer tools do, and --trace hboxes shows each line as the box the line breaker built. The CSS property -bag-trace: boxmodel does the same for chosen elements only. The Debugging page explains how to read them.

Markdown

glu’s Markdown understands fenced divs and bracketed spans in pandoc style, so a class on a block or a phrase needs no HTML: [a phrase]{.mark}. Footnotes and definition lists are on as well, and the extensions: frontmatter key switches these and smart punctuation on or off.

For Go programs

htmlbag accepts line models and breakers of your own. A line model decides the height of each line, for spacing rules such as a word processor’s “exactly”; a breaker chooses where a paragraph breaks, in place of Knuth-Plass, while the lines are still measured and set as before. Both are registered by name and selected from CSS. FlowText pours HTML into rectangles you hand out, such as columns or frames, instead of pages. See the htmlbag library and Linebreaking in the Go API.

Documentation

Besides the typography chapter there is now a How-tos section: fourteen recipes for complete documents, from a DIN 5008 letter and a ZUGFeRD invoice to page headers, tables of contents and the new ones on floats and highlighting. Each walks through an example that you can clone and run.

Thank you

Many of these changes did not start with me. Since September, bug reports, careful analyses and pull requests from other developers have driven a large part of this work, floats and page breaks in particular. The engine is better for every one of them. If you want to join in, the CONTRIBUTING files of boxes and glue and htmlbag explain how.