Translating HTML

On This Page

• This document describes how to translate HTML strings that are used in Tunnelblick.

• For an overview of how Tunnelblick is localized, see Tunnelblick Localization.

Tunnelblick has a popup help feature that pops up a window containing information about a specific setting or feature.

The strings for these popups are written in HTML so they can include formatting and images. This allows popups like this one for the "Place near the Spotlight icon" checkbox:

HTML strings contain "tags" that cause the text to be formatted or to include images. The string for the above popup is:

    <p><strong>When checked</strong>, the Tunnelblick icon is positioned near the Spotlight icon:</p>
    <p>%@</p>
    <p><strong>When not checked</strong>, the Tunnelblick icon is positioned normally:</p>
    <p>%@</p>
    <p><strong>This checkbox is disabled</strong> on macOS Sierra because it is not needed,
    and on systems for which it is known to cause problems.</p>
    <p><a href=\"https://tunnelblick.net/cAppInfoPlaceNearSpotLightIconCheckbox.html\">More info</a></p>

The "context" shown in Crowdin is

HTML info for the 'Place near Spotlight icon' checkbox. The two '%@' are replaced by images of the menu bar showing the position of the Tunnelblick icon.

Each tag starts with a greater-than character ("<") and ends with a less-than character (">").

Tags usually come in pairs, to mark the start and end of some kind of formatting. Tags in the above string include:

• "<p>" and "</p>": Start and end a paragraph.
• "<strong>" and "</strong>": Start and end bold text.

The "a" tag is similar, but a bit more complicated:

• "<a href="https://tunnelblick.net/cAppInfoPlaceNearSpotLightIconCheckbox.html">More info</a>"

means that the text "More info" should be displayed as a link to the web page at https://tunnelblick.net/cAppInfoPlaceNearSpotLightIconCheckbox.html.

As described in the Crowdin "context", the two "%@" in the HTML string will be replaced by images. (To ensure proper spacing, images are placed within paragraphs.)

When you translate an HTML string, KEEP, BUT DO NOT TRANSLATE OR CHANGE THE TAGS THEMSELVES. Only translate the text between the tags. So in the above example, you would be translating the following as if they were separate strings:

"When checked"
", the Tunnelblick icon is positioned near the Spotlight icon:"
"When not checked"
", the Tunnelblick icon is positioned normally:"
"This checkbox is disabled"
" on macOS Sierra because it is not needed, and on systems for which it is known to cause problems."
"More info"

So a translation would look something like:

    <p><strong>若打勾</strong>，Tunnelblick 图标位于搜索图标附近：</p>
    <p>%1$@</p>
    <p><strong>未打勾</strong>，Tunnelblick 图标位于正常的位置：</p>
    <p>%2$@</p>
    <p>macOS Sierra 或更高版本并不需要该选项，而且有的计算机已发现该选项会导致故障，两者情况下<strong>该复选框已被禁用</strong>。</p>
    <p><a href="https://tunnelblick.net/cAppInfoPlaceNearSpotLightIconCheckbox.html">了解详情</a></p>

The translations of "When checked", "When not checked", and "This checkbox is disabled" will all be displayed as bold text; the rest of the text will be shown normally.

Of course, a proper translation of the HTML string may require rearranging the tags and the rest of the text.