How to translate a dynamic web application

This guide will show you how to translate your dynamic web application. There are many ways you can tailor what content is brought into your Localize dashboard for website translation. With a little bit of prep work you can streamline your localization team’s workflow, and save money if you are purchasing human translations.

You’ll learn how to merge phrases that contain dynamic content, how to handle pluralized phrases, and how to block, isolate, or ignore specific content.

📘

Do This Early and Often in your Localization Process

It’s best if you can use some of these tips and tricks as early in your localization process as possible. That way, you won’t have to sift through lots of duplicate phrases and content that doesn’t need to be translated.

You’ll also want to continue “tuning” your list of phrases on a regular basis, as new phrases are found by Localize.

What you'll learn

• How to merge phrases that contain dynamic content
• How to translate phrases that contain words that can be singular or plural because of a dynamic variable
• How to stop specific content from being brought into Localize
• How isolate adjacent text so that it’s brought in as one phrase
• How to to ignore specific content but still allow it to be grouped with adjacent text
• How to block specific content using CSS selectors

Prerequisites

• You have a project set up in Localize
• You have the ability to modify the HTML of your web application
  • This is only required for some of the following tips.

How to merge phrases that contain dynamic content

Your site may have dynamic content embedded within a phrase, like a username, email address or a counter. Each time this content is seen in your web app with a different value it will be brought into the Localize dashboard as a separate phrase, with only the dynamic part being different. Sifting through these multiple phrases is a waste of time, and having multiple copies translated is a waste of time and money.

Once you’ve identified a group of similar phrases, use one of the following methods to limit duplicate copies from being brought into Localize.

Using the “Define Variables” feature in the Localize Dashboard

For most phrases with dynamic content you can use the Define Variables feature directly in the Localize dashboard.

When on the Manage Phrases page in your Localize dashboard, you can add a dynamic variable to any phrase.

1. Click on the caret in the top/right corner of the box that contains the phrase.
2. Select the Define variables option.
3. Follow the on-screen instructions to highlight the dynamic content in the phrase.
4. Review matching phrases.
5. Confirm changes when ready.

See detailed instructions here.

Using <var> Tags in your HTML

Sometimes there are occasions where you can’t use the Define Variables feature in the dashboard, or it’s more convenient for you to add them in your code. In these cases you can fall back to modifying your HTML to add <var> tags. Some examples include:

• Phrases that contain HTML markup
• Phrases where the dynamic content is the first or last word in the phrase

In these cases you can wrap the dynamic content in a <var> tag.

• Add a <var> tag around the dynamic content.
• Name the variable to help translators understand the context of the variable, since they won’t be seeing the actual content that the variable replaces.
  • A variable name is required when there is more than one variable in a phrase.

Welcome to Localize, <var username>Kirk</var>!
There are <var num-days>5</var> days left before the sale ends!

See detailed instructions here.

How to translate phrases that contain words that can be singular or plural because of a dynamic variable

To tell the Localize library that a phrase requires both a singular and a plural form, add a pluralize attribute to a tag that you place around the word or number value.

After the phrase is brought into your Localize dashboard, you will be asked to provide the singular and plural forms of the words that change as a result of the change in the value of the variable.

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

See detailed instructions here.

How to stop specific content from being brought into Localize

Sometimes you have content that you don’t want or need to have translated, like a brand name, or a drop-down list of country names. This can be an entire phrase or a part of a phrase.

• To block this content from being brought into Localize, simply add an empty notranslate attribute to the HTML element that surrounds that piece of content.

<div notranslate>I don’t want this whole phrase translated</div>
<div>I think that you’ll really enjoy 
  <span notranslate>Berry Berry Bubblegum</span> 
  after you try it!</div>

See detailed instructions here.

How isolate adjacent text

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. You may want to group more content together into one phrase, or you may be trying to separate other pieces of content into separate phrases.

<a href="/" isolate>Home</a> <a href="/about" isolate>About</a>
<div isolate>
  <p>I want both of these paragraphs to be brought into Localize as one phrase.</p>
  <p>Adding an isolate tag around both will do it!</p>
</div>

See detailed instructions here.

How to to ignore specific content but still allow it to be grouped with adjacent text

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".

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

See detailed instructions here.

How to block specific content using CSS selectors

You can block content from coming into your Localize dashboard by telling Localize that content within specific CSS class or id selectors shouldn’t be translated. You can handle both from within the Localize dashboard, or inside the Localize.initialize() call, whichever is more convenient.

Using the Localize Dashboard

You can block specific content from being brought into your Localize dashboard by adding the appropriate CSS selectors to this list in your Project's Library Settings.

This is handy when:

• you aren’t able to modify the HTML of your website
• you are using an integration that doesn’t allow you to modify your Localize.initialize() call
• you simply don’t want to involve your developers

.admin-mode
.editing-mode
#country-name
#terms-of-service

See detailed instructions here.

Using Options in your Localize.initialize() Call

By adding an array of CSS class and/or id selectors to your Localize.initialize() call, any phrase(s) contained inside an HTML element with the class(es) or id(s) will not be brought into the Localize dashboard, allowing you to filter out your unwanted content.

blockedClasses: ['admin-mode', 'editing-mode'],
blockedIds: ['country-name', 'terms-of-service'],

See detailed instructions here for classes and here for Ids.