I'm frequently translating english into other languages in my web apps and one thing I find quite annoying is the hyphen character - in words like ready-to-use. By default html splits the hyphen during a line break like so:
ready-
to-use
If I replace the hyphens with non-breaking hyphens (‑ ), i18n doesn't translate the character code:
ready‑to‑use
(this is not the actual translation, just to demonstrate the problem)
Another approach is to wrap it inside <span style="white-space: nowrap"></span> but span can't be translated by i18n either.
I am aware of an approach using v-html which brings security risks into the mix. How do you handle hyphen characters in paragraphs during translation?
After some pain and with tony's help, I found a simple solution. i18n has named interpolations, which can be used to render a html character code.
{{ $t('message', {char: '‑'}) }}
will render a non-breaking hyphen correctly inside message (en.json):
"message": "I am working full{char}time on this project."
full-time will suffer no line-break.