Cara menggunakan translate html content

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 .

In the Web 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 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 coloured 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 area 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:

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 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:

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

2. A modal will appear. You’ll see the source string and a list of the translatable attributes in it. 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.

   

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

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

Note

You can switch to raw mode if you want to translate attributes or HTML tags that are protected in the new 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 that is 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 that 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.

Bagaimana cara translate website?

Bagaimana cara menerjemahkan halaman web dari bahasa asing ke bahasa Indonesia?

Gimana cara translate dokumen?

Bagaimana Cara Menambahkan Translate di keyboard?