Base solution for your next web application
Open Closed

Format localized text in html #8013


User avatar
0
daws created

How can I format localized text in html ?

Example : {{l('MyTextKey')}}

Would return (in English for instance) : <span><b>MyText</b><br/>is formatted in the current language</span>

Which would render on screen :

MyText is formatted in the current language

We're using abp 7.2.3 with angular


6 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    You can take a look at the documentation first. : )

    https://aspnetboilerplate.com/Pages/Documents/Localization#in-mvc-views https://aspnetboilerplate.com/Pages/Documents/Localization#in-javascript

  • User Avatar
    0
    daws created

    I'm sorry but I see nothing about including html in translated text strings ?

  • User Avatar
    0
    maliming created
    Support Team

    Pure html can't use localization, you need to use it in JavaScript.

  • User Avatar
    0
    daws created

    Whether I call the l() function in my html template or in my javascript code will not make a difference, since the string values in my App-xx.xml can't have html tags.

    So where do I store the html translations ? And how do I display them to the user ?

    Said otherwise : I need to display very long formatted texts in several different languages. The texts are provided to me in a Word document, which I then convert to html (in order to keep the formatting). The conversion result is what I want to display (according to the current language). In different languages, the html tags will be set on different parts of the text, which makes it impossible to have an html template and a lot of strings to translate between the tags.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @daws,

    If those values are only going to be used in Web project, you can put it into your localization xml files like this one https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Core/Localization/AbpZeroTemplate/AbpZeroTemplate.xml#L407

  • User Avatar
    0
    daws created

    I see now. Thanks.

    For further reference, two things are necessary to achieve what I need :

    1. In the localization files, html must be enclosed in CDATA tags : <text name="MyTextKey"><![CDATA[<span><b>MyText</b><br/>is formatted in the current language</span>]]></text>

    2. In order for the html to be rendered on the client, assign it to the innerHtml of a span element : <span [innerHtml]="l('MyTextKey')"></span>

    And voilĂ  :-)