Remembering the Non-breaking Space Entity

Non-breaking space entity, oh how I forgot about you.
Non-breaking space entity, oh how I forgot about you.

A few nights ago, inspired by a critique of my site’s design, I finally fixed my .content being too wide on smaller-screened iPhones, as well as some other aspects of my poorer small-screen layout.[1]

And as expected, this took me down the rabbit hole of tinkering. While I was previewing the site in Safari’s Responsive Design Mode, I was reminded by one of those things that has irritated me for months, but I never took the time to fix:

It was that arrow.

You know, that arrow symbol that so[2] often[3] signifies[4] a linked[5] post on blogs.[6]

Occasionally, I would visit my site check something, only to find that the arrow in a linked post title had wrapped to a new line by itself.

Ugh.

Terrible.

I wasn’t sure if this was caused by an omission on my part, so I checked Marco.org, Liss is More, and a couple other sites. They all exhibited the same arrow-wrap-wonkiness.[7] I asked each website owner on Twitter, and at least one of them didn’t know how to fix it.

My thought was the CSS property white-space to nowrap, like so:

white-space: nowrap

A good idea, no doubt, but that would have fixed one problem only to create another. The arrow would no longer wrap at all, which could cause it to overwhelm the horizontal container. (That’s even worse than my arrow-wrapping-to-a-line-by-itself problem.)

Thankfully, I follow a few CSS experts. And none other than Mr. CSS-Tricks himself—Chris Coyer—had the solution:

@ToniWonKanobi   between Arrow and last word

— Chris Coyier (@chriscoyier) October 5, 2015

Ahh.  —the HTML entity for “non-breaking space character.” What is that, exactly? It’s just what it sounds like. It is a space character, except unlike regular spaces, which HTML will truncate, the   character will not break.

In other words, if you have a string of text that would look stupid broken, such as proper nouns that contain a number modifier (e.g., Tweetbot 4), you can use   to prevent the word and the number from ending up on separate lines.

To implement the non-breaking space character, I dug into the .html file that is the template for my posts (.postHeader.html) and removed the literal spaces and replaced them with the non-breaking space character,  .

So,

<h2><a class="postTitleLinked" href="{{Link}}">{{Title}} <span class="linkArrow">&#10142;</span></a></h2>

becomes

<h2><a class="postTitleLinked" href="{{Link}}">{{Title}}&nbsp;<span class="linkArrow">&#10142;</span></a></h2>

And that’s all there is to it.

Without   With  
Here's a post header that has a regular space character between the title and the arrow (Left), and another post header using the non-breaking space character instead. Which one looks better to you?

In it, Gandalf says to Frodo:

My dear Frodo. Hobbits really are amazing creatures. You can learn all there is to know about their ways in a month, and yet after a hundred years they can still surprise you.

HTML is my “hobbits”—just when I think I have a handle on it, something like a non-breaking space character pops up and surprises me. Shows what I know.


  1. Here’s how I handled mobile styles previously:

    I defined an @media query to target all screen widths up to 736px, which is the longest dimension of an iPhone (it’s the length of an iPhone 6 Plus display @3x asset sizes)

    I then set .content to width: 300px;, which was a good compromise between too much whitespace on iPhone 6 Plus, and not enough on iPhone 6. (When I did the big redesign back in June, I had a Plus and Allison had a 6, so I could test against both of those devices easily). iPads behaved like the desktop site, more or less (portrait was always a headache for some reason).

    The site looked great on iPhone 6 and 6 Plus, but at 300px, the .content width was overwhelming the 320px width screens on 3.5" and 4" iPhones. Not only was the .content width too wide on those small screens, the font size was too big, and the line spacing was too large as well. Needless to say, I needed to fix this.

    So what did I do?

    I added an additional @media query targeting smaller iPhones: @media (max-width: 320px).

    Finally, I set .content width: 250px; and font-size: 0.9em;, as well as adjusted some 100vw stuffs.

    Boom.

  2. Marco.org: The 'Link' arrow  on Marco.org

  3. Liss is More: The 'Link' arrow  on Liss Is More

  4. The Brooks Review: The 'Link' arrow  on The Brooks Review

  5. 512 Pixels: The 'Link' arrow on 512 Pixels

  6. Six Colors: The 'Link' arrow  on Six Colors

  7. The Brooks Review’s wrapping arrow problem: The 'Link' arrow  wrapping stupidly on The Brooks Review