Internation

Examples

Fruit

An apple

An orange

Diner

A pizza

A hamburger

Animals

A dog

A cat

HTML Content

This is a normal paragraph with text.

This is a paragraph that has HTML in it.

Setup

Step 1. Define current language

Internation has English as default language. You can change it if you like in the options:

Reveal.initialize({
    //
    internation: {
        locale: "en",
        localename: 'English'
    },
    plugins: [ Internation ]
});

Step 2. Adding data-attributes

<section id="intro">
    <h1 data-i18n="title">Hello!</h1>
    <p data-i18n="paragraph1">There is a <a href="#">link</a> in the paragraph</p>
</section>

Add a data-attribute of data-i18n="something" to the text you want to translate. Skip elements that are common in all languages.

Internation reads HTML by default. If some text contains a span or link, it is better to take that whole piece for translation. If you turn the HTML setting off in the options (you can), you would need to make spans of every text that is not a link.

Step 3. Creating JSON

Internation can automatically generate a JSON file for you based on the existing HTML content of the elements. First turn it on in the options (make sure you have added data-attributes in step 2):

Reveal.initialize({
    //
    internation: {
        makejson: true
    },
    plugins: [ Internation ]
});

Next, load the page with this URL parameter: ...index.html?makejson. This will immediately download a JSON file of your current HTML. The URL step is a safeguard for if you accidentally publish with makejson:true in the options turned on.

Step 4. Start translating

Make a copy of your first language JSON. Give the file a name that is obvious (so, fr.json for French).

Now start translating! When you are finished, put the file in an obvious location on your website.

Note: If an element has the data-attribute, but is missing in the dictionary of your new language, it will stay in the original language.

Step 5A. Refer to a language file

Reveal.initialize({
    //
    internation: {
        languages: {
            fr: {
                name: "Français",
                dictionary: "fr.json"
            }
        }
    },
    plugins: [ Internation ]
});

A language in Internation contains both a name and a dictionary. This example shows that a JSON file is used for the dictionary. JSON files will only work if there is a server. It will not work with the file:// protocol.

Step 5B. Or a language object

Reveal.initialize({
    //
    internation: {
        languages: {
            fr: {
                name: "Français",
                dictionary: {
                    "slides" : {
                        "intro":{"title":"Bonjour!"}
                    }
                }
            }
        }
    },
    plugins: [ Internation ]
});

If you really want to allow local file access, you can put the whole dictionary object in the specific language object in your options.

The dictionary / JSON

{
    "slides" : {
        "intro":{
            "title":"Bonjour!",
            "paragraph1":"Ceci est un paragraphe"
        },
        "animals":{
            "title":"Animaux",
            "dog":"Chien",
            "cat":"Chat",
        }
    },
    "menubar" : {
        "title":"Voici le titre",
    }
}

To get a human-readable structure, Internation looks for a 'slides' object for any sections with ID's. It will also look for any elements with an ID that are outside of the slides, like a menu bar that is visible on all slides.

Switching languages

If you want multiple languages, you will probably also want users to choose. Internation listens to 'change' events of either a select or a set of radio buttons. By default, this is any element with the class langchooser, but that classname can be changed in the options.

You can put these on a slide (like the first page with the flags) or outside them in an element that is visible on multiple slides (like the menubar in the examples).