Translating Elements

Elements to be translated need to have the data-rosey attribute. For example:

<!DOCTYPE html>
<html>
    <body>
        <h1 data-rosey="title">Home page title</h1>
        <h2 data-rosey="sub-title">Home page subtitle</h2>
    </body>
</html>

Will produce the translation keys:

Key Original
title Home page title
sub-title Home page subtitle

#Translating Inner HTML

The data-rosey tag can be applied to elements containing HTML, which will be captured for translation. For example:

<!DOCTYPE html>
<html>
    <body>
        <h1 data-rosey="title">Home page title</h1>
        <article data-rosey="content">
            <img src="/image.png"/>
            <p>Some content</p>
        </article>
    </body>
</html>

Will produce the translation keys:

Key Original
title Home page title
content <img src="/image.png"/>\n<p>Some content</p>

If integrating with a translation provider, that provider will need to translate HTML strings correctly.