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.
- 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
- 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.
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.
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.
- Click on the caret in the top/right corner of the box that contains the phrase.
- Select the Define variables option.
- Follow the on-screen instructions to highlight the dynamic content in the phrase.
- Review matching phrases.
- Confirm changes when ready.
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
- 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!
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.
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
notranslateattribute 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>
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>
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>.
You can block content from coming into your Localize dashboard by telling Localize that content within specific CSS
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.
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
- you simply don’t want to involve your developers
.admin-mode .editing-mode #country-name #terms-of-service
By adding an array of CSS
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'],
Updated about 1 year ago