Tagging elements for translation

In order to mark text for translation, you have to tag the HTML element that holds the text.

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see Editing HTML.

However, to tag an element for translation, you don't have to go into the Source view.

1. Place the cursor in the text that should be translated and select the HTML element in the breadcrumbs (see Selecting an element) or select the element via the Outline view. Elements that contain text are paragraphs, headings, table cells, buttons, labels etc.
2. Open the Translations pane. If it isn't visible, select: Window > Show View > Translations from the menu.
3. Click the Tag Element button in the toolbar of the Translations pane. This adds the data-translate attribute to the element. (Attributes are visible on the Source tab.)

If there was no translation entry with the same text already, the text of the tagged element is copied to a new translation entry on the Translations pane.
One translation entry works for all HTML elements that are tagged for translation and have exactly the same text.

Same text, different translation

Should the same text be translated differently in different locations? Then you need to add a 'context' to the translation entry:

1. Double-click the translation entry, or select an element and press the Ctrl key when you click the Tag Element button.

   Pressing the Ctrl key when you click the Tag Element button opens the Translation String Options dialog.

2. In the Context field, describe where the source text is used, for example: "This text is in the head of a table", or "Table|Head"

The description is added to the <data-translate> attribute of the HTML element in which the source text is located, as its value, for example: <data-translate="Table">.
Note that a translation will only be applied if the value of the <data-translate> attribute of the respective HTML element is exactly the same as the given Context (case-sensitive).

Tagging text in snippets

If the text that you want to tag for translation is located in a snippet, do not tag it in the section where the snippet is used. Instead, open the snippet (see Snippets) and tag the elements inside the snippet as described above.

Tagging text that is inserted by a script

OL Connect will also apply translations to content that is inserted by personalization scripts, but only if that content is marked for translation, and if there is a matching translation entry.

1. On the Translations pane, click on the New Empty String button to create the translation entry.
2. Make sure that any element in which the text is inserted, are tagged for translation. There are several ways to do that:
   • Let the script insert the tagged HTML element as well as the text, for example:
     results.html( "<p data-translate>Bill to @CustNumber@</p>" );.
   • If the script inserts text into an existing, empty HTML element, switch to the Source view and add the data-translate attribute to the element (e.g. <p id="p1" data-translate>).

Data placeholders in translation entries

A translation entry may include placeholders for data fields, e.g. "Dear @name@". (For more information about placeholders see Variable Data.)
Placeholders must not be translated; otherwise the personalization script will no longer replace them with data

Typically, translators are familiar with entries that contain variables, but you may add a comment explaining that the placeholder is used as a variable and that it should not be translated.

To add a comment, simply double-click the entry in the Translations pane and enter your comment in the Comments field. Comments will be added to the POT file and are visible to translators in their translation tools.

HTML tags in translation entries

A translation entry may contain HTML tags, for example when part of the text is styled or when there is a hyperlink in the text. HTML tags must not be translated or removed. Normally, translators will recognize a simple bold or italic tag (<b>...</b> or <i> ... </i> respectively), but more complex elements like hyperlinks could cause problems. The translator may accidentally modify the tag, and break the hyperlink for example.

One way to avoid this is to split the text around and inside HTML tags into separate chunks, no matter how short. Select the respective text in the template and select Wrap in Span from the contextual menu. Subsequently tag the new <span> element for translation.

Alternatively you could also add a comment explaining that the HTML tag should not be changed.

To add a comment, simply double-click the entry in the Translations pane and enter your comment in the Comments field. Comments will be added to the POT file and are visible to translators in their translation tools.