diff --git a/endpoints/docs/web.app.localizer/DOC.md b/endpoints/docs/web.app.localizer/DOC.md index c47f28f5..096877f6 100644 --- a/endpoints/docs/web.app.localizer/DOC.md +++ b/endpoints/docs/web.app.localizer/DOC.md @@ -36,9 +36,15 @@ const localizer = new WebAppLocalizer(translations, localStoragePrefix, language ``` ## HTML Usage +If your translation is plain text, then use: ```html ``` +If your translation contains html, then add data-translate-html entry: +```html + +``` + Apply translations: `localizer.apply();` Get the translation of a prompt with options: diff --git a/endpoints/docs/web.app.localizer/README.md b/endpoints/docs/web.app.localizer/README.md index 85d21bad..bbfb4d18 100644 --- a/endpoints/docs/web.app.localizer/README.md +++ b/endpoints/docs/web.app.localizer/README.md @@ -63,6 +63,15 @@ Apply translations to all elements with the `data-translate` attribute. ### HTML Usage Add the `data-translate` attribute to elements you want to localize: +If your translation is plain text, then use: +```html + +``` +If your translation contains html, then add data-translate-html entry: +```html + +``` + ```html

diff --git a/endpoints/libraries/web.app.localizer.js b/endpoints/libraries/web.app.localizer.js index 40ff24df..9f5735ff 100644 --- a/endpoints/libraries/web.app.localizer.js +++ b/endpoints/libraries/web.app.localizer.js @@ -56,7 +56,13 @@ class WebAppLocalizer { const elements = document.querySelectorAll('[data-translate]'); elements.forEach(element => { const key = element.getAttribute('data-translate'); - element.textContent = this.translate(key); + const useHTML = element.hasAttribute('data-translate-html'); + + if (useHTML) { + element.innerHTML = this.translate(key); + } else { + element.textContent = this.translate(key); + } }); }