Changing Non-Text Media Content

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

Currently, Localize cannot translated any text embedded within images on your application. Here's what we suggest to translate this content.

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.

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