vue-i18n: Non-breaking space ( ) and other special chars

  is an HTML entity and it isn’t supposed to work outside of v-html. If you want a non-breaking space, use a JavaScript escape code and not an HTML entity. The one for a non-breaking space is \xa0

For most characters just paste the character in the text - all modern tools support Unicode fine. For things like non-breaking spaces the escape codes are useful because otherwise they’re kind of hard to see as they look just like normal spaces most of the time.

If we can avoid to ask translators to add such entities or special characters, I think we all agree that it is better. I’ve just found out that there is a posTranslation constructor option so the following work really well:

postTranslation: (str) => str.replace(' ?', '\xa0?').replace(' !', '\xa0!')

@Xowap If your translators are OK with typing   do you think they could manage \xa0 or \u202f? I guess those are a bit harder to remember. A filter would be pretty simple to implement yourself if you can come up with the logic, everything is just objects so you could loop through them and process every string.

@kazupon how I can use this feature? I didn’t find it in the docs

The thing is that in French,   is required before ?, ! and a handful of others. Well, to be precise it’s officially U+202F and not  , but this doesn’t change the problem.

To demonstrate the issue, in French you’d expect to see this:

Parlez-vous le français ?

However, if this reaches the end of a line, the ? might end up alone on the next line.

Parlez-vous le français
?

That’s why there is a (narrow) non-breaking space instead of a regular space, this way the word will come along.

Parlez-vous le
français ?

However, using v-html for all translations seems a bit hazardous but so is expecting translators to type “invisible” characters. Other solutions could be found I guess? Like language-wide filter to rectify punctuation?

Here is a solution. You need to use the windows ascii input. ALT + 255 =   Exemple : ’ ’

https://theasciicode.com.ar/extended-ascii-code/non-breaking-space-no-break-space-ascii-code-255.html

*On the other hand, I don’t know if the ALT code is different depending on the keyboard type/language.

Here’s a small utility to handle common french punctuation:

// Replaces white spaces before or after some punctuations by non breaking spaces
// Eg. replaces " ?" by " ?" or "« " by "« " to avoid unwanted line breaks
const addNbspAroundPunctuation = (str) =>
  str.replace(/\s+([:;»!?/])|([«])\s+/g, (match, left, right) => {
    if (left) {
      return `\xa0${left}`;
    }
    if (right) {
      return `${right}\xa0`;
    }
  });

The characters list is not exhaustive.

@Xowap it’s easy to enter the unicode character for non-breaking space:

• (en) https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods
• (fr) https://fr.wikipedia.org/wiki/Espace_insécable#Par_système_d’exploitation

Personally, I have a french BÉPO keyboard and writing non-breaking spaces is as easy as pressing shift + space.