Help Center Advanced
Alternative Translations For The Same Phrase
Alternative Translations For The Same Phrase
Last updated: 25 days ago
2 minute read
Steven Wise
CEO at SiteTran

ALL ARTICLES

Alternative Translation with Selectors

Sometimes you need to translate the same phrase in different ways based on the context. This is powered entirely through SiteTran, and requires no additional work from a developer.

You can select elements based on the element’s tag name (like p, or div), the element’s class, ID, or attribute. 

A good explanation of CSS selectors can be found here. Examples of all selectors can be found here.

In SiteTran, find your phrase in the Site Phrases dashboard.

Find your phrase in the Site Phrases dashboard

Click on the 3 vertical dots to the right of the phrase and select “Alternative”. 

Click on the 3 vertical dots to the right of the phrase and select “Alternative”

Add your URL selector and/or your CSS selector. You URL selector is used to match the page you want this to be applied to (like /alternative-translations for this page), and your CSS selector as mentioned above, allows you to target a specific element for it to be treated differently. If you're adding a CSS selector to target a specific element, make sure that you're targeting the actual element that contains your text, and not one of its parents. It must be the direct parent of the content for it to match.

Add your URL selector and/or your CSS selector

Press "Add Selectors" to add your new phrase for alternative translations. You will now see that your phrase’s source circle is black, and when you hover over it you will see that it says “Phrase added with alternate translation” (it will also have a new phrase_id, since it's a new phrase).

PUT_DESCRIPTION_HERE

Now the phrase’s translation can be changed. When you created the alternative phrase, SiteTran added the new phrase directly under the old one. They both exist. That phrase doesn’t have any selectors on it, so it will still have its translation.

Note: Unfortunately it’s impossible to select individual text nodes within elements using CSS selectors, so if you have multiple text nodes in an element, and you need to translate one of the nodes differently, your best bet is to wrap it in a <span> and give it a unique class, ID, or attribute.

Example Problem:

<div>some text <div>in the middle</div> problematic text </div>

A Possible Solution:

<div>some text <div>in the middle</div><span id="translate-different"> no more problematic text</span></div>
Couldn't find what you were looking for?

In this article

Website Translation Made Easy