Content in Transifex often contains 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 make it easier to focus on the content that needs to be translated, the Transifex Editor automatically replaces variables and tags with placeholders. You can read more about this on the HTML file format page.
In the Web Editor
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 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 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 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 to the translation area. You don't have to type it out in the translation manually. 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 the number is the number in the placeholder.
To ensure a translation has the same number of variables or tags as the source string, you can only add a placeholder as often as it exists in the source string. If you try to add a placeholder already in the translation, the previous instance will be removed, and a new placeholder will be added.
For strings containing more than ten (10) placeholders/variables, when you use the keyboard shortcut Alt+Ctrl+number, a list with the placeholders/variables that are part of the source string will appear.
For example, if you press Alt+Ctrl+1 and there are 15 placeholders in the source string, you will see a drop-down with all the available selections of the placeholders.
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.
To translate attributes inside an HTML element:
Add the placeholder to the translation area, then click on it.
A modal will appear. You’ll see the source string and a list of its translatable attributes. To translate an attribute value, you can either find the attribute in the list or click on the 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’ve finished translating the string, click Save.
📝 Note: You can switch to raw mode to translate attributes or HTML tags protected in the editor.
Appendix
Some more details regarding how Transifex detects and marks source string content as HTML tags and translatable attributes inside tags.
Tag detection
Transifex detects 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 added regardless of file format, like Android XML and Microsoft docx files that add custom tags. If you want to alter or view the exact tags, please switch to the raw mode of the editor.
Translatable attributes detection
Transifex has defined a blocked list of attributes considered "non-translatable" to identify which attributes are translatable. Any custom attribute specially used for your app is considered translatable (for example, a "data-tooltip" attribute holding translatable content).
Blocked list:
'accept', 'accept-charset', 'accesskey', 'action', 'align', 'async', 'autocomplete', autofocus', 'autoplay', 'autosave', 'bgcolor', 'border', 'buffered', 'challenge', 'charset', 'checked', class', 'code', 'codebase', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'headers', 'height', 'hidden', 'high', 'hreflang', 'http-equiv', 'icon', 'id', 'integrity', 'ismap', 'itemprop', 'keytype', 'kind', 'lang', 'language', 'list', 'loop', 'low', 'manifest', 'max', maxlength', 'media', 'method', 'min', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'poster', 'preload', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'seamless', 'selected', 'shape'
📝 Note: If you are a project manager or administrator who wants 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.
💡Tip
Looking for more help? Get support from our Transifex Community Forum!
Find answers or post to get help from Transifex Support and our Community.