A tiny JavaScript library for internationalization and easy switching of languages on HTML pages
Warning
This is currently an experimental project or proof-of-concept. It may contain bugs or incomplete features, and is not intended for production use. Breaking changes may be made at any time. Consider more stable alternatives for critical applications.
loadTranslations('translations.json'): Loads JSON file with translations. Takes a filename as inputgetLang(): Get the current language of the page according to tinyi18nsetLang('en'): Changes the page language to a specified language. Takes a language string as input
data-translatekey="title": Use this on every text element you want to translate. Choose a different key for every element and add the translations for your keys in your JSON filedata-translateattribute="value": Use this on non-text elements where you need to have translated text for an attribute value (ex. value attribute for input elements)
- Include
tinyi18n.jsbefore the closing body tag in your page and calltinyi18n.loadTranslations('translations.json')with the name of your JSON file to load it. Put thedata-translatekeyattribute on any block of text you want to have multiple languages. The value of this attribute is essentially an id for the block of text so you can write translations for it. You can use the same value for multiple blocks of text. For non-text elements, also add thedata-translateattributeto specify which attribute you want to have translations for.
<html>
<head>
<meta charset="UTF-8">
<title data-translatekey="title"></title>
</head>
<body>
<h1 data-translatekey="title"></h1>
<p data-translatekey="description"></p>
<input type="text" data-translatekey="searchbox" data-translateattribute="value"></input>
<script src="tinyi18n.js"></script>
<script>
tinyi18n.loadTranslations('translations.json')
</script>
</body>
</html>- Create your translations as shown below with multiple languages listed for each key. Make sure to include
default_languageandlanguagesfor the module to work properly.
{
"default_language": "es",
"languages": ["en", "es"],
"translations": {
"title": {
"en": "Title in English",
"es": "Título en Inglés"
},
"description": {
"en": "I like cats",
"es": "Me gustan los gatos"
},
"searchbox": {
"en": "search",
"es": "buscar"
}
}
}- Call
tinyi18n.translatewith the language you want to switch to and voila!
<html>
<head>
<meta charset="UTF-8">
<title data-translatekey="title"></title>
</head>
<body>
<h1 data-translatekey="title"></h1>
<p data-translatekey="description"></p>
<input type="text" data-translatekey="searchbox" data-translateattribute="value"></input>
<button onclick="tinyi18n.setLang('en')">Translate to English</button>
<button onclick="tinyi18n.setLang('es')">Traducir al inglés</button>
<script src="tinyi18n.js"></script>
<script>
tinyi18n.loadTranslations('translations.json')
</script>
</body>
</html>Contributions, issues, and forks are welcome but this is a hobby project so don't expect too much from it. SemVer is used for versioning.
This project is licensed under the Mozilla Public License 2.0. See LICENSE for details.
Find this project useful? Sponsoring me will help me cover costs and commit more time to open-source.
If you can't donate but still want to contribute, don't worry. There are many other ways to help out, like:
- 📢 reporting (submitting feature requests & bug reports)
- 👨💻 coding (implementing features & fixing bugs)
- 📝 writing (documenting & translating)
- 💬 spreading the word
- ⭐ starring the project
I appreciate the support!
