white-space charactersFor control and predictability

You’re now fa­mil­iar with the es­sen­tial al­pha­betic, nu­meric, and sym­bol char­ac­ters. We turn to the fre­quently over­looked white-space char­ac­ters—the key­board char­ac­ters that put blank space be­tween point A and point B.

Why are they over­looked? For one thing, they’re in­vis­i­ble. As you learn to use white-space char­ac­ters, you’ll find it help­ful to make them vis­i­ble. That way, you can ver­ify that you’re typ­ing them cor­rectly and that they’re hav­ing the in­tended ef­fect. Later, you’ll find it use­ful to see them while di­ag­nos­ing for­mat­ting problems.

How to display white-space characters

WordHomeParagraph panel → but­ton (or con­trol + shift + 8)

Mac OS Word but­ton (or ⌘ + 8)

PagesViewShow Invisibles (or ⌘ + shift + i)

HTMLView the HTML source in an ex­ter­nal text ed­i­tor that can show in­vis­i­ble char­ac­ters (the ex­act name of the com­mand will vary)

There are six im­por­tant white-space char­ac­ters: the word space, the non­break­ing space, the tab, the hard line break, the car­riage re­turn, and the hard page break. Each white-space char­ac­ter has a dis­tinct func­tion. Use the right tool for the job.

“But if all white space looks the same when printed, why should I care?” Two rea­sons: con­trol and pre­dictabil­ity.

Con­trol means you get the in­tended re­sult with the fewest key­strokes. Sup­pose you need a para­graph to start at the top of the next page. What to do? If you use a hard page break rather than a se­quence of car­riage re­turns, you can get the job done with one keystroke.

Pre­dictabil­ity means that as you edit and re­for­mat, you’ll get con­sis­tent re­sults. When you ap­prox­i­mate a hard page break with car­riage re­turns, your text will even­tu­ally re­flow, and you’ll get a large gap where you in­tended a page break. Then you’ll have a new prob­lem to di­ag­nose and fix. But a hard page break will al­ways do the right thing.

The time you in­vest in learn­ing the white-space char­ac­ters will be paid back in lay­outs that snap to­gether faster and re­quire less fiddling.

A word proces­sor aims to sim­u­late a printed lay­out, so each white-space char­ac­ter has a vis­i­ble ef­fect. An HTML doc­u­ment, by con­trast, is a se­ries of for­mat­ting tags. So white space is han­dled more like it would be in a pro­gram­ming lan­guage: ex­cept for non­break­ing spaces, any se­quence of white space in HTML is col­lapsed to a sin­gle word space when the doc­u­ment is ren­dered in a browser. To achieve vis­i­ble ef­fects with white space, you need to use ex­plicit HTML for­mat­ting tags.

undock move Heliotrope Equity Valkyrie Century Supra Concourse Triplicate buy font close