How do you handle white space in your HTML [closed]

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

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 2

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