Skip to the text

Articles

The no-break space does the quiet work

The most useful typographic character is invisible. Where a no-break space belongs, why CSS cannot place it for you, and the rules that set it.

The no-break space (U+00A0) looks exactly like a space and does one thing a space does not: it refuses to end a line. Typeset text is full of pairs that must not be separated — 21 September, Prof. Oksana, 5 % — and the only way to keep them together is a character the reader never sees. In this article a no-break space is shown as ~, the same convention the rules reference uses.

Where it belongs

Eighteen of the engine’s 33 rules can place this one character:

Why CSS cannot do this

text-wrap: pretty fixes orphan words at a paragraph’s end and white-space: nowrap can pin one phrase, but neither knows that Polish forbids a trailing i, that French spaces % and English does not, or that Fig. belongs to its number. These are language conventions, not layout preferences, and they live in the text itself — which also means they survive into RSS, email, and anywhere else your CSS does not follow.

One boundary worth knowing: French famously sets a space before : ; ! ?. The engine does not insert one where the writer typed none. The only French guide read so far is the OQLF’s, from Québec, which asks for a no-break space before :; the guides of France and Switzerland have not been read, and they may differ. Until they are, it stays an open gap in the backlog rather than a guess. The optional space.before-punctuation rule, which strips stray spaces before punctuation, does keep the French ones the writer typed.

The nbsp option

A raw U+00A0 looks like a space in every diff and editor. In the HTML mode the nbsp option chooses how a changed block writes it: as   (the default, visible in source) or as the bare character; see the API reference.

Try it

Paste On 21 September, Prof. K. Słoboda paid 5 % into the playground and tick Mark no-break spaces to see every one the engine placed.

Something wrong or unclear here? Report an issue.