• Documentation
  • Translating
  • Translating HTML Content

Translating HTML Content

Content in Transifex often contain variables and HTML tags. Most of the time, these do not need to be translated. If translated, the app or website might break. To prevent accidental changes to variables and tags, and to make it easier to focus on the content that does need to be translated, the Transifex Editor automatically replaces variables and tags with placeholders.

In the new editor

As you translate, you’ll come across several kinds of placeholders:

  1. A pair of opening/closing placeholders, representing tags that have some content in between. These placeholders look like a half oval/pill. One end is rounded and the other is straight. 
  2. A single placeholder, representing self-closing tags. These placeholders look like ovals – both ends are rounded.

Placeholders are colored either blue or red: blue placeholders represent HTML tags, and red placeholders represent other variables.

editor-placeholders.png#asset:3727

Every placeholder has a number in it to help you identify tags in a string. Pairs of tags – for example, an opening <strong> and closing </strong> – will share the same number so you know they are related. You can hover your cursor over a placeholder to see the tag the placeholder represents.

Translating with HTML placeholders

Besides hiding untranslatable content, placeholders can be easily copied from the source area to the translation area. This way, you don't have to manually type it out in the translation. There are two ways to copy a placeholder to the translation area:

  1. Click on a placeholder in the source string area. This copies the placeholder to wherever your cursor is in the translation area.
  2. While typing a translation, use the Ctrl+Alt+number keyboard shortcut, where number is the number in the placeholder.

To make sure a translation will have the same number of variables or tags as the source string, you can only add a placeholder as many times as it exists in the source string. If you try to add a placeholder that’s already in the translation, the previous instance will be removed and a new placeholder will be added.

Translating HTML attributes

HTML tags sometimes have attributes that need to be translated. In such cases, the placeholder will have a small triangle in the top-right corner of the placeholder to let you know it needs more attention.

editor-placeholders-html-attribute.png#asset:3737

To translate attributes inside an HTML element:

  • Add the placeholder to the translation area, then click on it.

  • A modal will appear. In it, you’ll see the source string along with a list of the translatable attributes. To translate an attribute value, you can either find the attribute in list and click on Edit attribute. Or click on the attribute name in the source string.

    HTML-attributes-edit.png#asset:3690

  • When you’re done translating the attributes, click the Apply button. This will transfer your translations to the translation area.

  • After you’re finished translating the string, hit Save.

In the old Editor

Within Transifex's old Editor, you can view HTML as readable text without losing the formatting.

Here's how:

  • Let's say you have the following string: <code>markup</code>, which only has one word that needs to be translated. To hide the HTML markup, click the Gear icon settings_color.png#asset:1107 at the top of the Editor and check the box next to Enable HTML editor. The markup becomes hidden and phrase is bolded. You'll see this change in the translation box as well.

  • Translate the string like you would any other text. Be careful not to delete the whole grayed out word or phrase; otherwise, the markup will be lost. So we recommend translating those piece by piece. You can always check that all HTML markup is still there by hitting the Toggle HTML button.

Tip

If a word or phrase with HTML markup is deleted in the translation box, no need to panic. Just click the Copy source string button and start over again.