Demo of non-breaking spaces

This demo is aimed at authors and editors who produce content within Sitecore and discusses how to manage non-breaking spaces.

Let it flow...

Reflow is a legal requirement to meet accessibility regulations. And something that everyone expects and takes for granted.

In our pages, we always want the text to reflow. This means that the text will wrap and adjust to the size of the desktop screen or mobile or tablet device that the user is using. The text will also reflow if a user alters the font size in their browser. The reflow allows the text to wrap organically so that it fits the screen, and no text is missing.

Reflow also prevents excessive scrolling.

Non-breaking spaces

Non-breaking spaces are designed to interrupt the reflow. A non-breaking space is a space between two words that makes sure that the words do not get separated over two lines.

A non-breaking space doesn't look any different to a normal space between words so it may be hard to realise you have them. That is, until you see your text on a mobile and there are big gaps at the end of a line where the text should be.

The biggest cause for adding unwanted non-breaking spaces is when you copy and paste text into the Sitecore Rich Text Editor. Copying text nearly always brings the hidden coding and styles with it. Unfortunately, non-breaking spaces are a large part of this.

They also tend to appear before or after a html tag. So, if you add a 'bold' value to a word, you may also get a non-breaking space.

What a non-breaking space looks like

A non-breaking space is written as   in HTML code.
When you view your HTML text in Sitecore's Rich Text Editor you may see lots of   between words. 

Removing non-breaking spaces

When you paste your copy into the Rich Text Editor, highlight it all and then use the 'Strip all formatting' tool.
Or you can paste your text into the Rich Text Editor using the 'Paste from Word, strip font' tool.

Non-breaking spaces need to be replaced with a standard space using the space bar.

Unfortunately, the non-breaking spaces are not always removed, so you will have to check the HTML in the Rich Text Editor. It is helpful to use Ctrl+F to highlight all the instances of   so that you can easily spot them.

When a non-breaking space is useful

There are times when you do not want words to be separated over two lines. For example, dates or some phrases look better when they appear on one line.
So, it’s 26 April rather than 26
April.

In the HTML view add   between '26' and 'April' so that they are kept together.

Top tip

Check for non-breaking spaces after you have finished writing your copy.
Last-minute edits can create non-breaking spaces, so check at the end of the writing process, and always before you publish.