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

How to display white-space characters

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

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

Pages ViewShow Invisibles (or ⌘ + shift + i)

HTML View 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)

As you learn to use white-space char­ac­ters, you’ll find it help­ful to make them vis­i­ble so you can ver­ify that you’re typ­ing them cor­rectly and that they’re hav­ing the in­tended ef­fect. Af­ter you’re pro­fi­cient, you’ll find it use­ful to see the white-space char­ac­ters while di­ag­nos­ing for­mat­ting problems.

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.

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

  2. Pre­dictabil­ity means that as you edit and re­for­mat, you’ll al­ways get the same re­sult. If you ap­prox­i­mate a hard page break with car­riage re­turns, at some point in your edit­ing, your text will re­flow and you’ll have a large, un­ex­pected 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 how to use white-space char­ac­ters will be paid back in lay­outs that come to­gether faster and re­quire less maintenance.

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.