TheOverAnalyzed

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.

Which one looks better to you? Yeah, I thought so.

Recall Gandalf saying this 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.