Handling of leading and trailing whitespace in templates inconsistent

[bernhardreiter]

Leading and trailing whitespaces are stripped with [email protected] and [email protected]
only if a translation is available. This is an inconsistency which can be a problem together with some styling.

example

We have code like

<a href="https://vuejs.org/">Vue.js</a>
  <translate> is nice</translate>

Case 1:

If there is no translation available, this get expanded to something like

<a href="https://vuejs.org/">Vue.js</a>
  <span data-v-26f5cf0f> is nice</span>

which in our style sheet formats with space as expected like Vue.js is nice.

Case 2

there is a translation, this becomes

<a href="https://vuejs.org/">Vue.js</a>
  <span data-v-26f5cf0f>ist nett</span>

which in our style sheet formats without space between like Vue.jsist nett.

Inconsistency

Case 1 and 2 are inconsistent, the behaviour should be the same
and not depending on if there is a translation available for a language or not,
because it is reasonable to leave the default translation untranslated in the .po file.

formatting problem

My expectation would be that the rendering of

<a href="https://vuejs.org/">Vue.js</a>
  <translate>is nice</translate>

is as similiar to those of

<a href="https://vuejs.org/">Vue.js</a>
    is nice

as possible.

But now of course I go looking into our style sheet to see where the difference
comes from.

Thanks for creating vue-gettext as Free Software! :)

[bernhardreiter]

More research show, it is a formatting challenge with vue-gettext, see
https://codesandbox.io/s/5n5jyqn2x

where

<template>
  <div id="app">
    <a href="https://vuejs.org/">Vue.js</a>

    <translate> is nice</translate>

    <br />
    <a href="https://vuejs.org/">Vue.js</a>

    <translate> is very nice</translate>

    <br />
    <a href="https://vuejs.org/">Vue.js</a>

    <translate>is wonderful</translate>
  </div>
</template>

with

{
  "en_US": {
    "is nice": "is nice"
  }
}

leads to

Vue.jsis nice
Vue.js is very nice
Vue.jsis wonderful

expected would be

Vue.js is nice
Vue.js is very nice
Vue.js is wonderful

[kemar]

I am not sure that this is a vue-gettext issue.

Using your code sample without any <translate> tag:

<template>
  <div id="app">
    <a href="https://vuejs.org/">Vue.js</a>

    
    <span>is nice</span>
  </div>
</template>

I'm getting Vue.jsis nice.

Did you use preserveWhitespace: false in Vue Loader?

Btw, you can read more about spaces in issue #65

[bernhardreiter]

@kemar thanks for responding!

I'm not sure either where to search for the problem. Just using a plain .html file will not display the problem, so vue (and potentially vue-gettext) is still needed to reproduce the issue.

Just to confirm: we there is no preserveWhitespace in our settings. And I haven't changed the codesandbox example in this regard either.

I've read #65 before, but it hasn't gotten me the right idea.
A defect in vue-gettext or triggered by vue-gettext is still likely from my point of view.
(and at least the inconsistency is worth fixing in any case).

workaround

in cases where a leading space is needed, we are now using

<span v-translate class="fix-trans-space">to be translated</a>

and in style.sass

.fix-trans-space
  &:before
    content: " "

so we can centrally remove the style, once the rest is working as expected again.

[bernhardreiter]

Yes, there seems to be a general vue.js problem, so I've opened an issue with them (see automatic link).

Still the inconsistency remains as an issue for vue-gettext
and that the vue.js white space problem probably should be described in the docs.

[kemar]

@bernhardreiter you should have a look at this comment vuejs/vue#9021 (comment) (referenced in the issue you opened on Vue repo).

You have to configure your stack correctly at some point, with preserveWhitespace set to true, as I suggested in my last comment.

This isn't a bug with vue-gettext at all :)

[bernhardreiter]

@kemar

To your comment I've followed the link to https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options which reads

preserveWhitespace Defaults to true.

I've grepped my source files and did not find preserveWhitespace.
Therefore I've assumed the wrong default. :/ The Vue issues helped to learn about this.

Still I believe that for users of vue-gettext this poses and issue which should be documented and the inconsistency between translated and untranslated should be removed. Both is surprising to a vue-gettext users and eats time to find out.