i18n-format | Vaadin

Text Formatter with CLDR Plural rules and Gender support for I18N

[ This description is mirrored from README.md at github.com/t2ym/i18n-format on 2019-05-22 ]

Build Status Coverage Status npm version Published on webcomponents.org


Text formatter with Unicode CLDR plural rules and choices (like gender) support.

Demo and API Docs


    npm install i18n-format


import "i18n-format/i18n-format.js";


Simple Template Format

    <span>{1} element is effective for UI localization with {2}.</span>
    <a href="https://www.google.com/">parameters</a>

This renders as follows:

<p><code>i18n-format</code> element is effective for UI localization with <a href="https://www.google.com/">parameters</a>.</p>

Compound Template Format

An appropriate template in json-data is selected by plural categories, gender, etc.

  <i18n-format lang="{{lang}}">
      "0": "You ({3}) gave no gifts.",
      "1": {
        "male": "You ({3}) gave him ({4}) {5}.",
        "female": "You ({3}) gave her ({4}) {5}.",
        "other": "You ({3}) gave them ({4}) {5}."
      "one": {
        "male": "You ({3}) gave him ({4}) and one other person {5}.",
        "female": "You ({3}) gave her ({4}) and one other person {5}.",
        "other": "You ({3}) gave them ({4}) and one other person {5}."
      "other": "You ({3}) gave them ({4}) and {1} other people gifts."
    <i18n-number lang="{{effectiveLang}}" offset="1">{{recipients.length}}</i18n-number>
    <span>a gift</span>

With these values for the parameters, the template path .one.female is selected from <json-data>.

Parameters Values
lang 'en'
recipients.length 2
recipients.0.gender 'female'
sender.name 'James'
recipients.0.name 'Alice'

So this example renders as follows:

<p>You (<span>James</span>) gave her (<span>Alice</span>) and one other person <span>a gift</span>.</p>

<i18n-number> specifies plural categories for CLDR plural rules.


Prerequisite for Building and Serving Demo

npm install -g polymer-cli

On-the-fly Build

# Serve at http://localhost:8080/components/i18n-format/demo/
polymer serve --npm --module-resolution=node -p 8080

Static Builds

  • Build
polymer build
  • Targets
target browser minify bundled
build/esm-unbundled es6,modules no no
build/esm-bundled es6,modules yes yes
build/es6-bundled es6 yes yes
build/es5-bundled es5 yes yes
  • Serve
# Serve at http://localhost:8080/
cd build/{esm-unbundled|esm-bundled|es6-bundled|es5-bundled}
python -m SimpleHTTPServer 8080 # or any HTTP(S) server




Link to this version
ImportedReleased 07 February 2019BSD 2-clause "Simplified" License
Framework Support
Polymer 3.0+
Also supported:
Polymer 1 (1.0.0)Polymer 2 (2.0.1)
Browser Independent
Install with
npm install i18n-format"@3.0.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.0.1