French punctuation and spaces
In French typography, spaces are added before and after punctuation. I found it difficult to find a definitive source for French punctuation rules, but Muriel Paris from typomanie.fr seems like a trusted source.
Developers should familiarize themselves with these 3 different types of spaces:
- Breakable space, also known as "space". In French, "espace sécable".
- No-break space, also known as non-breaking space, or NBSP. In French, "espace insécable". Web developers will recognize this as
. In JSON it can be encoded as"\u00A0". - Narrow no-break space, also known as NNBSP. In French, "espace fine insécable". In HTML this is
 . In JSON it can be encoded as"\u202F".
Punctuation in French will adhere to certain rules:
| Name | Before | Symbol | After |
|---|---|---|---|
| Comma | No space | , | Space |
| Period | No space | . | Space |
| Colon | No-break space | : | Space |
| Semicolon | Narrow no-break space | ; | Space |
| Question mark | Narrow no-break space | ? | Space |
| Exclamation mark | Narrow no-break space | ! | Space |
| Left quote (French) | Space | « | Narrow no-break space |
| Right quote (French) | Narrow no-break space | » | Space |
| Left quote (English) | Space | “ | No space |
| Right quote (English) | No Space | ” | Space |
| Left Parenthesis | Space | ( | No Space |
| Right Parenthesis | No Space | ) | Space |
| Hyphen | No Space | - | No space |
| Left dash‡ | Space | – or — | No-break space |
| Right dash‡ | No-break space | – or — | Space |
| Ellipsis | No Space | … | Space |
| Apostrophe | No Space | ' | No space |
‡ In French, dashes (which are either en dash or em dash) are used similarly to how parentheses are used. For example: "French typography is meticulous — perhaps a bit laborious — but interesting regardless."
Significance of non-breaking spaces
Non-breaking spaces are important for controlling how text is broken onto a new line. Below is an incorrect example using breakable spaces instead of non-breaking spaces:
Bonjour « Monde »
We want the left quote « to appear on the same line as Monde.
To fix the issue, we add narrow no-break spaces ( ) to the right of the opening quote, and the left of the closing quote:
Bonjour « Monde »
Now when the text renders, « Monde » should appear on the same line:
En dashes and line breaks
While I was testing the text-breaking functionality, I discovered that en dashes and em dashes behave slightly differently. Other people have discovered this as well.
I expected that en dashes would be joined with the non-breaking space rather than be broken across different lines. But the example below shows the text breaking:
Bonjour – Monde –
This is not an issue with the em dash:
Bonjour — Monde —
To fix this, we can use the word joiner character (In HTML this is ⁠, or in JSON: "\u2060"). Now the en dash should appear on the same line as the non-breaking space:
Bonjour –⁠ Monde –