tunnelblick icon Tunnelblick free software for OpenVPN on OS X and macOS We need translators for several languages…
Home Downloads Support Documents Issues Source Contribute Contact

Highlighted Articles
  Installing Tunnelblick
  Uninstalling Tunnelblick
  Setting up Configurations
  Using Tunnelblick
  Getting VPN Service
  Common Problems
  Configuring OpenVPN
  Release Notes
  Thanks
  FAQ

Discussion Group
  Read Before You Post

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:

window showing bold and normal text interspersed with images

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, 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"

"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.

  Deutsch     Français     中文(简体)     Русский     Español     日本語     …