❤
npm
Sign UpSign In

l10n-html

0.1.3 • Public • Published

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 

Readme

Keywords

none

Package Sidebar

Install

npm i l10n-html

Repository

github.com/remixz/l10n-html

Homepage

github.com/remixz/l10n-html#readme

Weekly Downloads

0

Version

0.1.3

License

MIT

Last publish

Collaborators

  • remixz
Try on RunKit
Report malware