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

[artemtam]

Both v-t and $t doesn't support special chars like   and so on. Using $t with v-html works well, but frequently it is needed as a "plain text" (without rendering HTML). By the way another localization plugins (e.g. vue-multilanguage) support this feature.

[amosbatista]

Hello.
I don't know why, I have to replace this char before set 'v-html' content. I wonder what is this problem...

[avenla-mvirkkunen]

  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.

[Xowap]

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?

[avenla-mvirkkunen]

@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.

[laurentpayot]

@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%C3%A9cable#Par_syst%C3%A8me_d'exploitation

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

[Xowap]

In my experience, translators forget to insert any form of (N)NBSP.

I agree that the actual unicode characters are easier to safely move around.

@laurentpayot I think we can agree that moving everybody to BEPO is not an easy fix for this

@avenla-mvirkkunen sure I can (and do) code things myself but the problem is at least affecting every application translated to French and I guess that other languages are affected too. Some standard way of dealing with this oft-ignored problem would be pretty nice.

[jp-sauve]

I'm looking at a similar problem, but I am trying to insert &laquo and &raquo in french translations. Is there a way of doing this that I haven't figured out? I tried putting in javascript escape sequences, but those are rendered as text as well.

[mvirkkunen]

@jp-sauve

HTML escapes just represent Unicode characters so all you need to do is use the characters as-is. Non-breaking spaces and such are a bit of a special case because most editors don't make it easy to tell apart from normal spaces, but « and » are just normal characters so there's no need to use an escape sequence at all.

[jp-sauve]

Thanks! I don't know why I didn't think of that, but it worked perfectly of course.

[spassignat]

Hi,

It would be great to have non encoded/decoded messages, as it was in 8.1.0 version (if my tests are corrects).
Sometime, using external composite components, translated texts are provided as attributes (ex: bootstrap vuejs) which makes the usage of v-html not applicable without a complete review of the application to use slots.

I understand the idea of decode/encode and use of v-html, it's probably great, but changing the default behavior of $t function has some drawbacks (doesn't ensure backward compatibility with previous versions).

Are there any solution to "hack" the behavior of $t function and return to the 8.1.0 behavior ?

thanks.

[imagoiq]

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!')

[nicooprat]

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.

[kazupon]

we supported in Vue I18n v9.
please try it!