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. Dolor..
..ipsum. Dolor..
..ipsum. 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?
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  
or  
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
characters will prevent line breaks in that space; that's what
means, non-breaking space. The sequence A sentence. Another.
causes the
to appear on the second line, indenting text slightly, which is probably undesireable. The sequence A sentence. Another.
works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with the
at the end of the line, it will prevent that line from being properly justified.
is intended for the case of writing someone's name, like Mr. 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
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  
and  
, 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
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.