Today I learned about non-breaking whitespaces

  • Written on: Mo Dec 2020
  • Last update: Mo Dec 2020

Narrow non-breaking space

At my job at Chronotruck, I needed to update our front-end stack from Node 10 to Node 12. By running our unit tests with full-icu, it kept making me errors over our currency formatting.

Expected: "1 983,72 €"
Received: "1 983,72 €"

By looking to this test, it should work as expected but if you look closely you may notice that the number separation uses, what we call, a non-breaking whitespace. But the thing is, I've already included non-breaking whitespace in my test to handle that for Node 10 so I didn't understood right away what was going on. By searching a bit further, I noticed that the non-breaking whitespace used by Node 12 was not a simple non-breaking whitespace but a "narrow non-breaking whitespace".

The narrow whitespace is a unicode character by itself that's a big larger than a simple whitespace. So I had to remplace my non-breaking whitespaces with a narrow whitespace in my tests.

An interesting thing to note is that, you can't write a narrow whitespace using your keyboard, like you could by doing Option + Space. For that, I had to install a VSCode extension that allows me to write Unicode characters using their UTF-16 code. For the narrow whitespace, it's 202F per example.

You can learn more about the narrow whitespace here: https://codepoints.net/U+202F#:~:text=%3E-,U%2B202F%20NARROW%20NO%2DBREAK%20SPACE,is%2C%20in%20no%20specific%20script