The devil is so often in the detail and this is especially true when you combine French punctuation, HTML and responsive websites where text flows within fluid layouts and line length is something that I can no longer control.

This problem doesn’t arise with English language websites, but with French websites it can provoke an itch that’s difficult to satisfy!

In French, there is supposed to be a space both before and after the following punctuation marks:

  • an exclamation mark: !
  • a question mark: ?
  • a colon: :
  • the right guillemet: »

In English, of course, we never put a space before any of the above. So when a space is required before any of these in French there is always the risk that these punctuation marks will be pushed onto a new line of text and thus be orphaned. Aaaaaaaaaaaaargh! It is truly grim to see something like this, where the exclamation mark at the end of the sentence has been separated from the line of text to which it properly belongs:

Orphaned exclamation mark screenshot

In fixed-width websites, this was something that occasionally happened, but which you had some control over. Now that we all (don’t we?) build websites that have fluid widths to respond to a huge range of different devices, this glitch has elevated itself into something to work on.

The no-break-space rides to the rescue

To prevent this, just manually insert the entity reference   (the no-break space) before any of the above punctuation marks. This forces the punctuation mark to not be separated from the word that comes before it. If the text column can’t accommodate that additional character, then the whole word and the punctuation mark that follows it will drop down to the next line. No more orphaned French punctuation!