Available with CloudCannon hosting on the Pro plan.
CloudCannon Internationalisation allows you to serve your site in different languages based on the viewers browser settings.
Tagging content for translation
First we must add a key to each element we want internationalised. To do this add a
data-i18n attribute with a unique key. For example:
Obtaining the current locale
Once you have tagged the elements that need translation, CloudCannon can generate a lookup of the content. CloudCannon supports three file extensions:
.properties. These files are called locales.
To obtain the current locale you can visit any of these URLs on your site:
Providing alternative locales
Once you have the current locale you can start creating new ones. For each new locale:
- Create the file with your chosen format (either
- Name that file the locale that matches it. This locale should be a in the format
language[_territory]. For example, general English is
enand English specific to New Zealand should be
- Use the current locale as a template and update the values for the new locale.
- Add each file to the
_localesdirectory in the root of your site.
Here are some example locales:
CloudCannon generates a new version of the HTML per locale and route visitors based on their accept-language header and country.
Detecting the current locale
CloudCannon automatically injects the viewers locale into the HTML elements class as it is served. If a site has en_NZ support and the viewer accepts that language it looks like:
Using CSS you can alter anything from font-size to text direction: