Today I troubleshot: Narrow non-breaking space not rendering

Trouble

Narrow non-breaking spaces ( ) would not render on a webpage.

First hint

I found out that the culprit was the sans-serif font family in use.

Narrowing down the problem

After further investigation and especially some tinkering on Codepen I came to these statements:

1.   in regular font type is rendered
2.   in italic font type style is rendered
3.   in bold font type is NOT rendered

The third statements appears to me as a bug to be honest.

Some googling brought me to this additional information:

In this case, narrow non-break space doesn't appear correctly because the glyph (U+202F) doesn't exist in Georgia font.

Source: sumatrapdf issue tracker ("narrow non-break space" not displayed well in ePUB and PDF files)

At this stage I realized that sans-serif bold may also miss this glyph, and that I will need to work around that.

Solution or rather workaround

First I thought about CSS, but it is impossible to style HTML entities like   because they are just characters.

My final solution was to wrap this HTML entity around a HTML tag. I even created a custom one for the occasion. Inspired by the   entity name, I came up with the <nnbsp> element.

The workaround is to assign font-weight: normal; to this custom tag.
Of course I could have also come up with an utility class, but I found it take more real estate in the code.

Note: This can only work if the regular type for the font includes the narrow non-breaking space glyph, what is the case for sans-serif.

Example solution

HTML Markup:

<p class="u-sans-serif">
	<span class="u-bold">
		FIX Narrow non-breaking space issue<nnbsp>&#8239;</nnbsp>!
	</span>
</p>

Accompanying CSS:

.u-sans-serif {
	font-family: sans-serif;
}

.u-bold {
	font-weight: bold;
}

/* This is the workaround. */
nnbsp {
	font-weight: normal; /* Force Regular type rather than Bold. */
}