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.¹ 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 number²)

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.

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

By the way, you may also see \U00A0. This is the unicode character for the “no-break space”.⁴ 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   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).

• ¹ HTML Entities | W3Schools
• ² Complete list of HTML entities | FreeFormatter
• ³HTML Spaces | JSFiddle
• ⁴Unicode Character ‘NO-BREAK SPACE’ (U+00A0)