Using HTML Syntax to Prepare Phrases

Easy steps to improve your integration.

Save time by prepping your content for localization and translations. This guide explains how you can use HTML syntax to better prepare your content to quickly approve phrases and translate them.

Variables (interpolation)

Variables are a means of wrapping dynamic content for deduplication purposes. For example, you might consider using this for usernames or numeric amounts (like dates & currency). To create a variable, wrap the text in <var> tags.

Welcome back, <var>theC00lkid</var>

Variable names help translators better understand the context of your phrases.

Welcome back, <var username>theC00lkid</var>.

Note: <var> is a valid HTML5 tag that behaves similarly to a <span> tag.

Pluralization

Adding a pluralize attribute to the variable indicates to our system whether the phrase should be singular or plural. This is especially important for languages like Arabic.

You have <var count pluralize="1">one</var> notification.

The value of the pluralize attribute must be set to an integer denoting the number of items represented by the variable. To improve the accuracy of pluralization, we recommend manually inputting the singular and plural versions of your phrases on your Localize dashboard. You'll be prompted to do this if you use plural phrases in your app.

Isolation

Localize will intelligently group together adjacent text in your app. If you notice an inaccurate grouping, you may define one yourself by adding an empty isolate attribute to the parent element.

For example, Localize will group adjacent text nodes and link elements together to form one text segment. In the example below, we can add an isolate attribute to ensure each link is parsed as its own phrase.

Please Note: The isolate tags will not work when attempting to group entire pages. The isolate tags are for grouping smaller paragraph length amounts of content.

Website navigation: 
<a href="/" isolate>Home</a>
<a href="/about" isolate>About</a>

Notranslate

Adding an empty notranslate attribute to an element prevents it, and all of its children elements, from being translated. Meaning it will not appear as a pending phrase. It also prevents the element from being grouped with adjacent text.

<div notranslate>This won't be a pending phrase and will not be translated</div>

Ignore

Adding an empty ignore attribute to an element will ignore the content of the element while allowing it to be grouped with adjacent text. This can be useful to prevent translating names, or words such as "Tweet". For example:

This website is called <span ignore>Localize</span>.

The above phrase will be detected and available to translate as: This website is called {1}{/1}.

Note: <code>, <var>, and <kbd> elements are automatically ignored.

Deprecation

Localize archives content that has not been detected on your website after 2 weeks (to optimize the load speed of our library).

If that deprecated content is found again on your website, it will be reactivated automatically.

Depending on your website traffic patterns (e.g. plenty of infrequently-visited pages), you may consider disabling this feature.

Variable with Data prefix

We support implementation with the “data-“ prefix. For example: “data-var” and “data-pluralize”.

I have <var data-var="num" data-pluralize="2">2</var> dogs.

Naming variables with “data-var” is optional. The variable name can provides more context to translators.