/* Code-Comments */

September 22, 2019

Leading Spaces & The Web

One of the more frustrating little quirks about HTML is its insistence on collapsing white space.

This is actually often more useful than it’s annoying, but still - when you want a space, how do you do it?

Turns out, one way is with HTML Character Entities.1 If you’ve ever seen someone type → to create a →, then you’ve seen a character entity. (Freeformatter.com has a full list of characters with their entity number2)

For my purposes, I was working in React and I wanted two components to be separated by a space. That meant I couldn’t allow the compilation process down to HTML to collapse my spaces.

It turns out that is exactly the difference between a normal space and a “non-breaking space”.

Looking at HTML specifically, I wanted to see how these would work.

<h1>Strictly HTML</h1>
<div>
  <h2>
  Leading Space
  </h2>
  <div> leading space</div>
  <div>&#32;leading space character entity</div>
  <div>&nbsp;leading nbsp character entity</div>
  <div>^ starting position</div>
</div>
<div>
  <h2>Multiple spaces</h2>
  <div>three spaces between words</div>
  <div>three&#32;&#32;&#32;spaces between words with space character entity</div>
  <div>three&nbsp;&nbsp;&nbsp;spaces between words with nbsp character entity</div>
</div>

I also mounted React to the DOM and tested it with JSX to get equivalent results (with a few extra tests to see how JSX evaluation would work):

const App = () => (
  <div>
    <h1>React</h1>
    <div>
      <h2>Leading Space</h2>
      <div> leading space</div>
      <div>{' '}leading JSX evaluated space</div>
      <div>{`${' '}${'leading space in evaluated expression'}`}</div>
      <div>&#32;leading space character entity</div>
      <div>&nbsp;leading nbsp character entity</div>
      <div>^ starting position</div>
    </div>
    <div>
      <h2>Multiple spaces</h2>
      <div>What about multiple spaces?</div>
      <div>three   spaces between words</div>
      <div>three&#32;&#32;&#32;spaces between words with space character entity</div>
      <div>three&nbsp;&nbsp;&nbsp;spaces between words with nbsp character entity</div>
    </div>
  </div>
);

The results proved out the point — leading spaces are collapsed (as, by the way, are trailing spaces) unless we use the non-breaking space character. leading space exercise

If you’re interested in playing around yourself, I used JSFiddle to help me visualize the differences1.

By the way, you may also see \U00A0. This is the unicode character for the “no-break space”.4 There appear to be several other ways to identify the character depending on the encoding used (UTF-8, UTF-16, python, etc.)

Conclusion

To get the spaces you want to show up in HTML that you expect, use the HTML character entity - specifically &nbsp; for the non-breaking space character.

These entities are also a great way to introduce other visually appealing characters, like a right arrow (though Unicode is another good option).


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!