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 ]
<i18n-format>
Text formatter with Unicode CLDR plural rules and choices (like gender) support.

Install
npm install i18n-format
Import
import "i18n-format/i18n-format.js";
Usage
Simple Template Format
<p>
<i18n-format>
<span>{1} element is effective for UI localization with {2}.</span>
<code>i18n-format</code>
<a href="https://www.google.com/">parameters</a>
</i18n-format>
</p>
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.
<p>
<i18n-format lang="{{lang}}">
<json-data>{
"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."
}</json-data>
<i18n-number lang="{{effectiveLang}}" offset="1">{{recipients.length}}</i18n-number>
<span>{{recipients.0.gender}}</span>
<span>{{sender.name}}</span>
<span>{{recipients.0.name}}</span>
<span>a gift</span>
</i18n-format>
</p>
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.
Demo
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
License
Install
Framework Support
Browser Independent
Install with
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