Tuesday, June 4, 2024

css gives html new options for whitespace

Back in the day, one of the hardest things to get used to with HTML was how it treated white space; any linebreak in the source code wouldn't show up in the final page, and in fact its only concept of white space was "none" "a space" or "some linebreak caused by a <br> or <p> tag"

Different content systems aspiring for some flavor of WYSIWYG had to decide how treat carriage returns - the simplest, like what my homebrew CMS for my blog does, is replace "\n" with "<br>\n". More typographically elegant systems would use <p> tags - BUT - there was always some xhtml-days guilt about having to wrap paragraphs in "<p></p>", and then ambiguity about when you wanted a single line break vs a full on paragraph break.

(Also there was always the <pre></pre> tag for preserving ALL line breaks and other white space- but this was like the opposite of responsive design)

But these days CSS offers another good option:

white-space: pre-wrap;

This seems to do a great job of preserving both carriage returns as they are in the text, as well as preserving collections of spaces (where you used to have to use convert &nbsp; to get the same effect). You can use the mere "pre" setting to get back to full <pre>-tag like behavior without having to use non-semantic" tags

I probably can't retrofit my blog with this... too much of my old content was too free with the whitespace in general, but it's good to know about for future projects.

No comments:

Post a Comment