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 this article you will find:
As you translate, you’ll come across several kinds of placeholders:
- 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.
- A single placeholder, representing self-closing tags. These placeholders look like ovals – both ends are rounded.
Placeholders are colored either purple or orange: purple placeholders represent HTML tags, and orange placeholders represent other variables. Additionally, variable placeholders always display the variable name inside the placeholder.
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.
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:
- Click on a placeholder in the source string area. This copies the placeholder to wherever your cursor is in the translation area.
- 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.
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.
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.
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.
Some more details regarding how Transifex detects and marks source string content as html tag and translatable attributes inside tags.
Transifex detects for a character sequence like '<x>' in all file formats and marks it as a tag placeholder. This is future proof and can hold any custom tag that is added regardless of file format, like android XML and Microsoft docx files that add custom tags. In case you want to alter or view the exact tags please switch to raw mode of the editor.
To identify which attributes are translatable Transifex has defined a black-list of attributes that are considered "non-translatable". This way any custom attribute that is specially used for your app is considered translatable (for example a "data-tooltip" attribute holding translatable content).
If you are a project manager or administrator that want to protect attribute translations on your files, please consider enabling the "HTML tags are preserved in the translation" translation check for your file formats. See Setting Translation Checks for more.