This is a minimal in-browser internationalization solution: if you are doing a static page this might be what you need to support multiple languages, although it can easily be used in more complex setups.
Since it will govern what text to display it's a good idea to require int as soon as possible, I recommend doing it in your <head> element.
<script type="text/javascript" src="js/int.js"></script>Right after that, you'll want to initialize it:
<script>
int = new Int({
default_locale: 'en',
available_locales: ['en', 'es']
});
</script>You'll need to use the lang attribute in all elements you want to internationalize, like so:
<p lang="en">
A long time ago in a galaxy far, far away...
</p>
<p lang="es">
Hace mucho tiempo en una galaxia muy, muy lejana...
</p>In the above markup, only the element with the lang attribute matching the current int.locale will be displayed.
You can toggle available locales easily:
int.toggle('es');#toggle saves the locale you're selecting to localStorage, so the appropriate language will be loaded on page reloads.
So you can create a language picker of your choice just as easily:
<a href="#" onclick="int.toggle('en')">English</a>
<a href="#" onclick="int.toggle('es')">Español</a>The detect option is set to false by default, but if enabled, it will attempt to toggle the user's browser navigator.language automatically on load, unless that user has explicitly toggled a preferred language before.
<script>
int = new Int({
default_locale: 'en',
available_locales: ['en', 'es'],
detect: true
});
</script>When using detect: true you might not want to make a difference between, say, en-US and en-UK, as that would mean writing a ton of repetitive language elements.
However, if you set the strict option to false in the constructor then Int will only pay attention to the first two characters of the user's preferred language, so any en-* in navigator.language will match your en elements.
<script>
int = new Int({
default_locale: 'en',
available_locales: ['en', 'es'],
detect: true,
strict: false
});
</script>Int is a very tiny solution and doesn't include custom language display styles, however, by using the standard html lang property it gives you the ability to style individual languages easily. For example: if you want Arabic to be displayed with its proper right-to-left style, simply add this to your CSS:
:lang(ar) {
direction: rtl;
}Int is (for now) an immature project, it is running in production in a few sites but you must keep in mind that the main usecase is simple static sites hosted in places like github pages:
It might not be your cup-of-tea, it might not solve your use case, that's okay: Int won't attempt to solve internationalization for everyone, instead it will attempt to solve it elegantly for some people, there are plenty of other solutions out there already :).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent