attr-i18n (Internationalization through HTML attributes)

Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript

Visitor stats

Code stats

Install

npm i attr-i18n

# or

yarn add attr-i18n

Usage

First import and initialize the module.

import { AttrI18n } from 'attr-i18n';

const languages = ['English', '', 'franais'];

new AttrI18n(languages, {
	attr: 'data-translation',
	path: 'assets/translations',
	debug: true,
	togglerID: 'language-toggle',
	defaultLang: languages[0]
});

Then in your HTML file(s):

1. Add an HTML select element with the ID corresponding to the togglerID option above. This select element will toggle between languages
2. Add the translation files in the folder you specified in the path option above. Each of the language files should be named after the language name as it appears in the languages array above.
3. Use the data-translation attribute as set in the option attr above by adding it to each element you want translated. The data-translation attribute accepts a dot-delimited string which points to the translation you want to use.

Options

Example HTML

Language selector HTML select element

<select id="language-toggle">
	<option>English</option>
	<option></option>
	<option>franais</option>
</select>

Page content

<h1 data-translation="form.desc">Fill Your Details!</h1>

<div class="form-row">
	<label data-translation="form.name">Name:</label>

	<input type="text" name="UserName" size="35" maxlength="35" value="" data-translation="form.name" />
</div>

<div class="form-row">
	<label data-translation="form.age">Age:</label>

	<input type="number" name="Age" size="35" maxlength="35" value="" data-translation="form.age" />
</div>

<div class="form-row">
	<p data-translation="form.exe.desc">Do you exercise at home?</p>

	<ul>
		<li>
			<input type="radio" name="exe" value="1" />

			<label data-translation="form.exe.yes">Yes</label>
		</li>

		<li>
			<input type="radio" name="exe" value="2" />

			<label data-translation="form.exe.no">No</label>
		</li>
	</ul>
</div>

LICENSE

MIT