Improve your online presence: Make your words inseparable

Let’s get nerdy. I’m back with some practical tips on how you can improve your online presence through fundamental web knowledge that will give your content the polish it deserves. There will be some light HTML talk for all of you who fancy that.

Making sure that your website is mobile friendly is increasingly more important in this day and age. A well-built website framework will relieve you from the most common headache-inducing situations, but there comes a point when the content editor needs to take control over the presentation to reach the next level. In my first post in the series I wrote about how you can deal with overflowing post titles on smaller screens. Yes, that post is almost two years old now—we’re playing the long game here. 

So I’ve already covered how to gracefully break up longer words using soft hyphenation, but what about the opposite; when we have shorter words, numbers or abbreviations that we want to keep together?

For example, ‘5 km’ to the computer is basically just two adjacent words, which means that a line break can be inserted between them. But to us—assuming that you who are reading this is a human that is—they are connected, and they need to stand together. But how can we make sure that they will stay on the same line?

The hard space

Today I’m going to teach you how to use the HTML entity  , which is an acronym for ‘non-breaking space’, a.k.a. ‘hard space’.

Let’s say we have this remarkable headline:

Doesn’t look very nice, does it? That unfortunate line break totally ruins the impact of our carefully crafted headline. This is a rather common problem on websites nowadays, and it’s sadly not something that can be easily fixed by automation. Sure, you can always rewrite the whole title, but that would be the same as denying that ‘content is king’, because it’s highly unbefitting of a king to bow down to his servants! So let’s learn how to use our new little magic trick and tame your online presence once and for all!

To keep ‘5’ and ‘common’ together, we need to insert a   in-between in the content’s source code. Most modern WCMS let you do this, although they might call it by different names. In HubSpot, you can click on the <> icon in the toolbar to open up the HTML source view:

Editing the source code of a post can be a jarring experience depending on your HTML knowledge, but doing the above should just be a matter of searching for the targeted words and pasting the entity code. The great news is that the result will surely be worth it:

Best trick ever!

Wait. That’s not all. In the world of wide web, the non-breaking space can be considered a double-edged sword, since it’s not always desirable to make things unbreakable. When used intentionally, to prevent words from wrapping, or to deal with orphans, it’s the best thing since sliced bread, but remember that binding words together with invisible chain links produces the equal of one very long word. And as we already know, long words risk overflowing on smaller screens.

Now, this is problem rarely (directly) caused by humans, but rather it’s a side-effect of how rich-text editors handle space.

Here’s the thing: In HTML, multiple spaces are interpreted as just one space, so in order for rich-text editors to maintain their WYSIWYG (What You See Is What You Get) reputation, they insert a   for every extra/redundant space that you hit. They try their very best to be nice and understanding, but sometimes their incorrect and seemingly random assumptions will just baffle you with a mess like this:

Simply disgusting. With your newfound knowledge however, you will be more than ready to act next time you encounter a mysterious leading space, or groups of words that seem overly clingy. Just open up the source code view and clean up those non-breaking spaces!

And that concludes yet another article about a very earthly problem blown into worldly proportions. You’re welcome.

Let us know if you would like more practical tips on how you can improve your online presence.