How do you handle white space in your HTML

Question

One of my biggest typographical frustrations about HTML is the way that it mangles conjoined whitespace. For example if I have:

<span>Following punctuation rules.  With two spaces after the period.  </span>

One of the two spaces following the period will be considered to be insignificant whitespace and be removed. I can of course, force the whitespace to be significant with:

<span>Following punctuation rules.&nbsp; With two spaces after the period.  </span>

but it just irks me to have to do that and I usually don't bother. Does anyone out there automatically insert significant whitespace into external content submissions that are intended for a web page?

Answer 1

You can use a styled pre block to preserve whitespace. Most WYSIWYG editors also insert   for you...

Overall, it's good that the browser ignores whitespace. Just view the source on this website for yourself and imagine how crazy the site would look if every space was displayed.

Answer 2

If you really want your white space to be preserved, try the css property: white-space: pre;

Or, you could just use a <pre> tag in your markup.

By the way, it's a good thing that HTML browsers ignore white space in general, it allows us to have clearly formatted source code, without affecting the output.

Answer 3

It may not be very elegant, but I apply CSS to a <pre> tag.

There's always the "white-space" CSS attribute, but it can be a bit hit and miss.

Answer 4

Take a look at the pre tag. It might do what you want.

Answer 5

You'd better use white-space: pre-wrap than white-space: pre or &nbsp; With your example, the latter solutions can start a new line on "rules.&nbsp;" just because your non-breakable space hit the end of the line.

Answer 6

The PRE tag can be a valid solution, depending on your needs. However, if you are trying to use the 2 space rule in sentences throughout your site, you'll soon find that the other characters the PRE tag preserves are the line feed/carriage returns (or lack of) will muck up any styling you try to do.

In general, I tend to ignore the "2 spaces after a sentence" rule, or if you're a stickler for it, I'd stick with the &nbsp;, but you'll occasionally run into the issue Nicolas stated.

Answer 7

For your specific example, there is no need to worry about it. Web browsers perform typographical rendering and place the correct amount of space between periods and whatever character follows (and it's different depending on the next character, according to kerning rules.)

If you want line breaks, <br/> isn't really a big deal, is it?

---

Not sure what's worthy of a downmod here... You should not be forcing two spaces after a period, unless you're using a monospace font. For proportional fonts, the rederer kerns the right amount of space after a period. See here and here for detailed discussions.

Answer 8

For your specific example, there is no need to worry about it. Web browsers perform typographical rendering and place the correct amount of space between periods and whatever character follows (and it's different depending on the next character, according to kerning rules.)

That is false, and the links you posted confirm it.

Answer 9

There is a page regarding this topic on webtypography.net. That site has many other interesting things about creating text for the web from the point of view of typography, things that web page designers often don't even think about. It's worth reading.

Answer 10

@Kevin, where exactly do the links I referenced indicate that two spaces should be used?