Internationalization¶ ↑

Showoff transparently supports both user interface localization and content translation. Each user will see UI elements and content translated to the language their web browser is set to, assuming the proper translation exists.

User Interface¶ ↑

The Showoff user interface, such as the sidebar menu and help dialog,will automatically localize itself to the language of the viewer. The list of supported languages can be seen in the repository. No configuration is required.

If you'd like to contribute a translation file, please follow the directions provided.

Content Translation¶ ↑

Showoff will present each user with content in the language of their choice. It is the author's job to create the translations in the first place.

Using a language directory¶ ↑

When the presentation is loaded, Showoff matches the language setting of the user's browser against the locales directory. If it finds a subdirectory matching the language, or one of the fallbacks, then that content will be served.

For example, if the user's browser was set to en-GB, then Showoff would look for these directories in order:

• locales/en-GB

• locales/en

• default to main presentation directory

The structure of the translated presentation directory should match exactly the structure of the top-level default presentation. The same relative paths will be used to reference each slide.

Images or other media should also be located in the localized directory. This allows you to translate any images with text as well. If you don't need this, you can symlink the directory, or you can use relative parent paths (../../) to point to the correct images.

Using `LANG` tags in content¶ ↑

If you prefer not to duplicate your files in a directory per language, you can use LANG tags in the content to mark which content should appear depending on the language:

“` This content will always appear

~~~LANG:en-GB~~~ This content will only appear in British English ~~~ENDLANG~~~

~~~LANG:en~~~ This content will appear for all English localizations ~~~ENDLANG~~~ “`

String Replacement¶ ↑

You can also translate simple strings in your content. Start by adding a strings.json file to your locales directory that looks like this:

{
  "en": {
    "greeting": "Hello!",
    "farewell": "Goodbye"
  },
  "es": {
    "greeting": "Hola!",
    "farewell": "Adios"
  },
  "fr": {
    "greeting": "Bonjour!",
    "farewell": "Au revoir"
  },
  "de": {
    "greeting": "Hallo!",
    "farewell": "Auf Wiedersehen"
  },
  "ja": {
    "greeting": "こんにちは!",
    "farewell": "さようなら"
  }
}

Then add simple tags like {{greeting}} to your content in one of two ways:

• Add these tags to SVG images as text elements:

• Add the class translate to text elements with these tags:

  The localized greeting is <span class="translate">{{greeting}}</span>.

Browser Configuration¶ ↑

The language that Showoff selects is determined by the end-user browser settings. In other words, if the user wants to see Spanish content, they should configure their browser to prefer Spanish.

Each browser is configured somewhat differently. For example, the language selection for Safari on macOS lives in the OS system preferences. On the other hand, Chrome has built-in language selection underneath the Advanced section of the settings and Firefox puts it under the Content section.

On the command-line¶ ↑

When generating a static HTML representation of your presentation, you may use the --lang argument for language selection.

$ showoff static --lang de