Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to send escaped newlines into i18n-attr #105

Open
mathewguest opened this issue Dec 13, 2016 · 0 comments
Open

Unable to send escaped newlines into i18n-attr #105

mathewguest opened this issue Dec 13, 2016 · 0 comments

Comments

@mathewguest
Copy link

First of all, great module and super appreciate the hard work.

It doesn't seem like there is a way to pass escaped newlines, "\n", as data for i18n text. The desired use case is to use angular-localization to populate @title attributes for hover descriptions and to have line breaks in the descriptions. AFAIK, typical newlines aren't allowed in json and causes load errors if tried. If you pass an esaped newline, "\n", in, angular-localization replaces "\n" with "<br>". I tried these representations for various newlines:

\n (replaced with <br>)
\r
&#10; (html representation for \n)
&#13; (html representation for \r)
\u000A (unicode representation for \n)
\u000D (unicode representation for \r)
\x0A (alternate representation for \n)
\x0D (alternate representation for \r)

The unicode representation works in Firefox (tested on 50.0.2 on linux) but doesn't generate line breaks in Chromium (tested on 55.0.2883.75 64 bit on linux). Overall, I have been unable to have the module generate line breaks in chromium because the only representation that works is "\n" and it gets replaced with <br>.

This is the json lang file:

{
    "test": "one \n\n two \r\r three &#10;&10; four &#13;&#13; five \u000A\u000A six \u000D\u000D seven"
}

This is the html, using the i18n-attr directive to load the text from the lang file:

<label data-i18n-attr="{'title': 'langfile.test'}">hover me</label>

This is what angular-localization turns that into on chromium (all one line):

one <br><br> two   three &#10;&10; four &#13;&#13; five <br><br> six    seven 

I took a quick look at the code and the replace is done in ngLocalize.applySubstitutions()
on this line:

res = res.replace(/\n/g, '<br>');

I couldn't figure out how to get around this so I wrote a very ugly patch in grunt-shell to stop
that line of code from executing with the understanding that I'll have to put <br>
in the place of newlines in the lang files if I need there to be newlines. I'll post it
here on the off chance it could be useful to someone else with the same problem.

patch: {
    // This command does the replace on the non-minifed line of code
    // command: "sed -i 's/res = res.replace(\\/\\\\n\\/g, '\\''<br>'\\'');//' bower_components/angular-localization/angular-localization.js"

    // This command does the replace on the minified line of code
    // This is what that line looks like after minified (d may be a different variable):
    //     d=d.replace(/\n/g,"<br>")
    // This is what this shell command turns that line into:
    //     d=d
    command: "sed -i 's/.replace(\\/\\\\n\\/g,\"<br>\")//g' bower_components/angular-localization/angular-localization.min.js"
}

If there's a better or alternate way to get line breaks into attribute tags then I may have just missed it. Otherwise, I hope this report helps provide some feedback. Thanks for the time!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant