Changing Non-Text Media Content

Swapping out images and links (to PDFs, for example) for each language.

Here's how we suggest to translate content within images:

  • If possible, when creating images with text, we recommend removing the text from the image itself, and adding the text on top of the image in HTML.
    • Localize will then translate any text that is placed on top of an image.
  • If you're unable to decouple the text from your images, you can manually create multiple translated versions of your images and display the correct version using Javascript or CSS, as detailed below.

Localize does not translate text embedded within images on your application, with the exception of SVG files. Localize can detect text within an SVG file and will pull those phrases into your Localize dashboard.

JavaScript

Localize fires a setLanguage event when the language of the page is changed. Here's how it works:

Localize.on('setLanguage', function(data) {
  console.log(data) // { from: 'en', to: 'fr' }
});

Check out our Frontend API documentation for a full list of available events.

CSS

Localize ensures the lang attribute of the <html> is always kept up to date.

This can be used to apply language-specific CSS rules, as in the following example:

html[lang=en] {
  // CSS rules for English
}
html[lang=fr] {
  // CSS rules for French
}

Check out our Library documentation for further details.

Changing Non-Text Media Content


Swapping out images and links (to PDFs, for example) for each language.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.