March 2012
Updated April 2012 (switch from padding-right to word-spacing)

Click to select your desired sentence spacing: one space modern automated look conservative traditional wide effing huge

(Note that the spacing terminology above is my own, and completely subjective. If anything, the record shows that wider spacings were common prior to the automation of the printing process.)

Sentence Spacing in HTML and CSS

For the record, I am not a mandatory spacing person. I'm not going to tell you how to format your sentences. I do have some information and opinions on those who demand you must do it one way or another.

The lazy choice is to add no extra space. You'll get spacing between sentences the same size as spaces between words. This is true no matter how many spaces you type. HTML collapses repeated spaces, because within the content portion of HTML (the part that isn't tags) the only purpose a space has is to separate words from each other, i.e. to make "grapefruit" and "grape fruit" have different meanings. Adding extra space between sentences is a kind of layout, and that's supposed to be the work of the tags themselves.

The "Wrong" Way

If you poke around on the web on this subject, you'll probably see many people recommend that if you want to do this, the proper way is to use   to create an extra space that will not be collapsed. This does in fact work, but it suffers from a few drawbacks (and at least one advantage). First of all, 'nbsp' is actually an abbreviation of 'non-breaking space'. This is used to insure that HTML doesn't wrap your lines at that particular space. The non-collapsing aspect is a side-effect of the non-breaking feature.

So the first problem is that HTML can not wrap your text where that space is. This is sort of ok if you use one regular space and one   because it can still wrap text on the regular space. However if you put the regular space first and then the   you can end up with a space at the beginning of the line after it wraps. If you do use this method, you have to make sure the regular space comes second (although even this is a problem if you are using justified text).

Another problem is that adding an extra space is a club, where you might prefer a scalpel. Hand-set type always allowed printers to put in as much space as they desired between sentences (well, depending on the width of the blank sorts (printing blocks) they had on hand). Only the invention of typewriters put us in a position to count the space in terms of the number of times we pressed the space bar (or in computer terms, the number of space characters). It would be better to adjust sentence spacing to whatever amount of space we desire. And there is a way to do that more or less, which I'll describe shortly.

But first I'll say that the one advantage of using the   method is that when you cut and paste text out of a web browser window, you'll probably end up with two spaces between sentences.

The "Maybe" Way

HTML does offer other spacing entities. I am aware of three of them:

&emsp—the em space; this should be a very wide space, typically as much as four real spaces.

&ensp—the en space; this should be a somewhat wide space, roughly two regular spaces.

&thinsp—this will be a narrow space, even more narrow than a regular space.

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.

This is &emsp;

This is &ensp;

This is a regular space.

This is  

This is   (Note that on my browser, this looks almost the same as a regular space but upon closer inspection appears to be 1/2 pixel narrower. In other words, there's about a 50% chance that it will be one pixel narrower.

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   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  .

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.

Reader Comments (Experimental. Moderated, expect delays. Posts may be edited or ignored. I reserve the right to remove any or all comments, at any time.)

1 comments:

At 2023/12/28 16:59
Smitty In Philly wrote:

exert:
Formatting Research Papers
https://psychology.ucsd.edu/undergraduate-program/undergraduate-resources/academic-writing-resources/writing-research-papers/formatting-research-papers.html

Two spaces should be used after punctuation marks at the end of each sentence (in other words, there should be two spaces after the period that ends each ...

End Comments

Add a comment

Fine's Home

Send Me Email