search

dkfbasel / vuex-i18n

Localization plugin for vue.js 2.0 using vuex as store
MIT License
666 stars 56 forks source link

Usage of special characters inside the translations ( ) #106

Closed Vinnythetrue closed 5 years ago

Vinnythetrue commented 5 years ago

I'm using the i18n module in my app, working well, great module, thanks for the job.

But I would like to use special characters, ie.   inside some of my texts. For instance, in french, there is a space before an exclamation mark, I would love to put a nonbreakingspace there instead of a regular space, but putting the litteral string " " in the text data inside the json file makes it appear just like that in the browser instead of being interpreted by the browser.

How should I achieve that ?

tikiatua commented 5 years ago

Hi @Vinnythetrue,

Thank you for your feedback. This is indeed a tricky problem and has to do with character encoding and html escaping.

For security reasons, vue will automatically escape all html tags – i.e. the   tag – in text unless you use the v-html directive to insert the content. Be aware, that using the v-html directive might open your application up to possible security vulnerabilities. Especially, if it is used on content that users can specify.

However, the content can contain a range of characters, which is usually encoded in a specific format. Nowadays, I would suggest to use the utf-8 encoding for most websites that use latin characters (exceptions for special languages like Arabic, Chinese, Japanese, ..).

You can specify the encoding to use for the website in a meta tag

<head>
  <meta charset="UTF-8">
</head>

Make sure that the content in the json file is also encoded in utf-8 – i.e. in VSCode this can be set in the toolbar on the bottom right.

Now you need to actually use a non-breaking space instead of a regular space in the json content. To enter a non breaking space you need to use the unicode code to insert the character, which is 00A0 (http://www.fileformat.info/info/unicode/char/00a0/index.htm).

There are different ways of inserting a special unicode character depending on your operating system:

Please let me know if this solves your problem.

Vinnythetrue commented 5 years ago

thanks tikiatua ! The solution was so simple, I even didn't though of simply insert the "real" non-breaking space unicode character O_o

It works like a charm !

The only downside for me, is when it comes to the translation work, I will have to process somehow the texts coing back from translation, because the translation people won't be able to do this I guess...

Thanks again :)