Sentence Spacing in HTML and CSS

Here are samples of all of the spaces, so you can see how they render in your browser, in whatever font you happen to be using.

The advantage of these spaces is that you have some finer grain control over the amount of space, they will not affect line wrapping (if the browser is properly implemented which I'm not going to guarantee), and cut-and-paste will cut the actual number of spaces (including both space characters and any of the space above entities) you actually use.

This is probably a good approach, but since I haven't seen it recommended very often, it may not function as expected. For the record, it seems to work correctly in Safari, breaking lines even if there are multiple spaces, without inserting extra space at the beginning of the line. But it really isn't the fully modern CSS approach that I think is what we should be doing.

The "Right" Way

The correct way to do this in HTML is to put in a tag that tells you what elements of your content are sentences. Then you can use CSS to control the spacing between your sentences in a much more proper and modern way, and you can be somewhat precise about it (or even very precise, with some compromises).

Unfortunately, HTML does not have any standard tags that are used to mark sentences. In my opinion (and having participated in the design at the time) the reason is that HTML was never supposed to be that complicated. When the subject of spaces between sentences was raised, someone quipped "what next, range-kerning?" Nowadays that doesn't seem so unlikely.

But, we can do this using the SPAN tag, and adding a class for that particular span that tells us it is a sentence span. For example <SPAN class=sentence>Your sentence goes here.</SPAN> would work, and you'd use CSS to control the separation between your sentence spans.

There's a gotcha with this method, which is similar to the problems of the first method. If you use spans like this, you have to think about cut-and-paste. If you don't put any spaces between spans, then when you cut text from a web browser it will not have any spaces at all between sentences. However, by adding in a space to fix this, you lose a bit of precise control over the inter-sentence spacing. This is because you can't completely control the width of the space character used in the web browser. Of course, even without the space you can't guarantee how the remote system will define "em" units, as it isn't well-defined in modern typography. Or at least, the definition is not followed very consistently.

I'll note here that this issue could be solved if HTML had a real sentence tag, because then browsers doing cut-and-paste would understand that this required particular handling.

Of course, if you don't care about cut-and-paste, you can skip all the real whitespace, but I think this is a mistake. It might be a problem for web crawlers like Google. It's just not how the web is meant to function.

Initially, I had another problem with this method. I was using padding-right to add extra space. The formatting wasn't correct when a sentence would end at the right margin (which was glaringly obvious with fully justified text). Ideally, the sentence would end all the way up against the right margin, but this padding in the span element forced the sentence to wrap before the end of the sentence reaches the edge of it's block. The correct way to solve this problem turns out to be to use the CSS word-spacing parameter, which does just what it sounds like it does (more or less). So we set the word-spacing for paragraphs to the space we want between sentences, and then set the word-spacing in sentences back to normal. Perhaps not the most intuitive approach, but it seems to work correctly in modern browsers. It's important to note that this value is added or subtracted to the size of the already existing space character. But it's not relative to any existing setting. So, setting paragrph word-spacing to 10px adds 10 pixels to the existing space character, and then setting sentence word-spacing to 0 will set the size back to a plain space.

This is a very tedious method (in fact, so is the &nbsp; method). I think if HTML did have a sentence tag, then things that generate HTML would be able to automatically detect and mark sentences off for us, and do a pretty nice job of it. Alas, this is not the case.

The Details

An em is a unit that historically was the width of the 'M' character, which was typically square. Since it was square, then in modern terms an em is loosely defined as the height of a font. When a modern font is set to 36 point, then that is supposed to be the height, and it also defines the em size. But if you just browse through the fonts on your system with the size set at 36 points, you'll see that the actual height of the fonts varies widely (perhaps even wildly).

So how much space do we want? Well Historically the most common sentence spacing used between sentences seems to be between 1/3 em and 1/2 em (but sometimes less, and sometimes even more, up to 1 full em). And in modern practice, many fonts choose roughly 1/4 em as the size of the (ordinary) space character. There is literally no standard here that I know of, but this is typical. So 1/2 em sentence spacing is going to be roughly two normal spaces, all other things being equal. And if you want something roughly between 1/4 and 1/2 em, you could use a regular space along with &thinsp;.

If you are using CSS and the SPAN method described above, you can just specify the word-spacing CSS elements exactly. I definitely recommend you use em units here. If you use pixels or inches or points, and the reader choose a very different font size than you did, the results will not scale with the font. (Although there is a proposal to be able to size things relative to the space character, which could be very useful here if that ever comes to pass.) Em units are the only approach that will grow and shrink when the font does (albeit fairly inconsistently). If you are using one real space, along with the CSS word-spacing element, then I recommend you assume that the space character is 1/4 em, and that you then add additional space in word-spacing. So for 1/3 em, you would set word-spacing to 0.08em, and for 1/2 em, you'd set word-spacing to 0.25em.

The Fun Part

If you choose to use the SPAN method, there's one more fun feature you can include, which this page uses. You can give the user control over the spacing they look at. The following bit of javascript is a function that I use to change the word-spacing element for everything who's class is 'fp' (formatted paragraph). (Originally I used the same script, but was changing the padding-right for class 'sntc'.)

function spacing(value) {
  var CSSRules
  if (document.all) {
    CSSRules='rules';
  } else if (document.getElementById) {
    CSSRules='cssRules';
  }
  for (var i=0; i<document.styleSheets[0][CSSRules].length; ++i) {
    if (document.styleSheets[0][CSSRules][i].selectorText == '.fp') {
      document.styleSheets[0][CSSRules][i].style['wordSpacing'] = value;
    }
  }
}

Then you can just use onclick="spacing('0.25em');" on some a link or other element to give the users clickable control over the sentence spacing. If you look at the HTML source of this document, I use a slightly fancier version of the function which uses boxes in a table, and changes the background color of the selected choice.

No comments

Add a comment

Fine's Home

Send Me Email