Skip to main content

A Jekyll filter for adding non-breaking spaces

I’ve been using Jekyll to build this blog for about two and a half years. Because the site is quite simple, I’ve had plenty of time to work on the long tail of small details: stuff that makes me smile, but won’t necessarily be apparent to anyone else. This post is about one of those details.

Most people will notice that the site works well on small screens as well as big. Lots of web traffic comes from smartphones, so I made sure the design would scale down as well as up. (I think the technical term for this is responsive design.)

One effect of responsive design is that you can’t predict where line breaks will appear. To keep the text a sensible size, lines have to be different lengths on different devices – for example, 20 words fit comfortably on one line on a desktop monitor, but on a phone screen they’d be unreadably small.

Most of the time, this is fine. It doesn’t matter where the line breaks appear. But there are a handful of phrases I use regularly where a line break in the middle would be a bit annoying. Phrases like “PyCon UK”, “RFC 1234” or “part 3”. If the two words were split over multiple lines, it wouldn’t be the end of the world, but it’d be a bit annoying. It’s a digital paper cut.

You can read RFC 1234 to learn about ✔ You can read RFC 1234 to learn about ✘ You can read RFC 1234 to learn about ✔ Three examples of line breaking of the text “RFC 1234”, with a green tick next to two examples where the two words are on the same line, and a red cross where they're split across a line.

In HTML, you can use a non-breaking space to tell a browser “don’t put a line break here”. If I write RFC 1234 instead of RFC 1234, the two words will always appear on the same line. If the phrase is too long for one line, both words move down to the next line.

But I don’t want to have to remember that every time I’m writing – it’s only a display issue. Instead, I’ve written a Jekyll filter that adds these non-breaking spaces for me. Here’s what it looks like:

module Jekyll
  module AddNonBreakingSpacesFilter
    def add_non_breaking_spaces(input)
      text = input

      text = text.gsub("PyCon UK", "PyCon UK")
      text = text.gsub(/RFC (\d+)/, 'RFC \1')
      text = text.gsub(/([Pp]art) (\d+)/, '\1 \2')

      text
    end
  end
end

Liquid::Template::register_filter(Jekyll::AddNonBreakingSpacesFilter)

Then I use this filter in one of my base templates, so everything on the site gets these modifications. Rather than adding the non-breaking spaces as I write, I type as I would normally (with a regular space), and the non-breaking version is added at build time. It’s an improvement that I don’t think anyone but me has ever noticed, but it avoids a tiny paper cut every once in a while.

This is one of the nice things about using an existing, stable tool like Jekyll. All the baseline functionality is good enough that I don’t need to worry about it, and I have time to work on fun bits of polish like this.