Sentence Spacing

Roger Pate picture Roger Pate · Dec 29, 2009 · Viewed 7.2k times · Source

What is the best way to present the additional spacing that should come between sentences (using [X]HTML+CSS)?

<p>Lorem ipsum.  Dolor sit amet.</p>
               ^^ wider than word spacing

Since HTML and XML both require whitespace folding, the above two spaces must behave as a single space.

What options are there?  There are a few obvious ones below, what others exist?  (Anything in CSS3?)  What drawbacks, if any, exist for the these, including across different browsers?  (How do the non-breaking spaces below interact with line wrapping?)

  • ..ipsum. &nbsp;Dolor..
  • ..ipsum.&nbsp; Dolor..
  • ..ipsum.&nbsp;&nbsp;Dolor..

There's a lot of FUD on the net which claims this was invented for typewriters, but you can see it in documents such as the U.S. Declaration of Independence.  (And yes, I realize you shouldn't follow all the conventions from over two hundred years ago, the DoI is merely a handy example showing this predates typewriters and monospaced fonts.)  Or a typographer claiming that the additional space is distracting—after changing the background color so the example cannot be anything else!

To put it bluntly, while I appreciate opinions and discussion on whether additional spacing should be used or not (which isn't programming related), that is not what I'm asking. Assume this a requirement, what is the best way to implement it?

Answer

Brian Campbell picture Brian Campbell · Dec 29, 2009

You can use white-space: pre-wrap to preserve sequences of spaces, while still wrapping text:

<p style="white-space: pre-wrap;">Lorem ipsum.  Dolor sit amet.</p>

This is not supported in IE until IE 8 in IE 8 mode, nor in Firefox until 3.0.

You could also use &emsp; or &ensp; for spaces one em or one en wide. I do not know how widespread support of these is, but they seem to work on the latest WebKit and Firefox on Mac OS X.

A sequence of two &nbsp; characters will prevent line breaks in that space; that's what &nbsp; means, non-breaking space. The sequence A sentence. &nbsp;Another. causes the &nbsp; to appear on the second line, indenting text slightly, which is probably undesireable. The sequence A sentence.&nbsp; Another. works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with the &nbsp; at the end of the line, it will prevent that line from being properly justified. &nbsp; is intended for the case of writing someone's name, like Mr.&nbsp;Torvalds, or an abbreviation ending with a ., in which typographical convention says that you shouldn't split it across lines in order to avoid people being confused and thinking the sentence has ended.

So, using sequences of &nbsp; is undesirable. Since this is a stylistic effect, I'd recommend using white-space: pre-wrap, and accepting that the style will be a bit less than ideal on platforms that don't support it.

edit: As pointed out in the comments, white-space: pre-wrap does not work with text-align: justify. However, I've tested out a sampler of different entities using BrowserShots (obnoxious ads, and somewhat flaky and slow, but it's a pretty useful service for the price, which is free). It looks like a pretty wide variety of browsers, on a pretty wide variety of platforms, support &ensp; and &emsp;, a few that don't still use spaces so the rendering isn't too bad, and only IE 6 on Windows 2000 actually renders them broken, as boxes. BrowserShots doesn't let me choose the exact browser/OS combos I want, so I can't choose IE 6 on XP to see if that's any different. So, that's a plausible answer as long as you can live with IE 6 on Win2K (and maybe XP) broken.

Another possible solution would be to find (or create) a font that has a kerning pair for the ". " combination of characters, to kern them more widely apart. With @font-face support in all of the major browsers at this point, including IE back to IE 5.5 (though IE uses a different format than the other browsers), using your own font is actually becoming reasonable, and falling back to the users default font if not supported would not break anything.

A final possibility might be to talk the CSS committee into adding a style feature that would allow you to specify that you want wider spacing at the end of sentences (which would be determined by a period followed by a space; acronyms and abbreviations would need an &nbsp; in order to avoid getting the wider space). The CSS committee is currently discussing adding more advanced typography support, so now might be a good time to start discussing such a feature.