l10n-html

A module that creates localized HTML.

npm install l10n-html
7 downloads in the last week
28 downloads in the last month

l10n-html Build Status

A module that makes localization much friendlier by using HTML attributes, instead of a template system. Browser and server ready!

Testling Badge

NPM

Installation

NPM:

npm install l10n-html

Or for you crazy Bower kids:

bower install l10n-html

Bower will expose l10n-html as l10nHTML().

Explanation

l10n-html attempts to make localization of web pages a much friendlier experience. It allows you to write all of your code in your preferred language, without any need for a template language. Instead, any HTML tag that needs to be localized will have a data-l10n attribute, containing a key to access a translation from a JS object. I personally find this is nicer to develop on, since it's much easier to read over the source. This module is designed to be extended on, and can be easily integrated into modules that provide convenience layers over this, like automatically detecting the correct language from a web request.

Usage

HTML Format

<p data-l10n="hello.world">Hello, World!</p>
<!-- l10n-html supports dot and bracket notation. -->

Server

var l10n = require('l10n-html');

// The first argument may either be a string containing HTML, or a Cheerio object.
// The second argument is an object of the translations.
// The third argument is an object of additional options.
var translated = l10n('<p data-l10n="hello">Hello!</p><p data-l10n="nested.everyone">Everyone.</p>', {
    hello: 'Bonjour!',
    nested: {
        everyone: 'Tout le monde.'
    }
}, {
    returnCheerio: false,
    stripDataAttributes: true
});
// By default, l10n-html returns a string of the parsed HTML, but may also return the Cheerio object if the option is provided.
// l10n-html will strip the data-l10n attribute by default, but can be configured not to.
// translated would return: "<p>Bonjour!</p><p>Tout le monde.</p>"

Browser

var l10n = require('l10n-html');

// The first argument is an element list. Use a list from document.querySelector().
// The second argument is an object of the translations.
var translated = l10n(document.querySelector('body'), {
    hello: 'Bonjour!',
    nested: {
        everyone: 'Tout le monde.'
    }
});
// l10n-html in the browser will return an element list from querySelectorAll(). It will automatically update the page.
browserify browser.js > bundle.js

Testing

[sudo] npm install -g tape testling
make test # tests the server version
make browser-test # compiles and opens the browser test
npm loves you