i18n-format
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
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2019-03-20
- Maturity
- IMPORTED
- License
- BSD 2-clause "Simplified" License
Compatibility
- Framework
- Polymer 3.0+ in 3.0.1
- Polymer 2.0+ in 2.0.1
- Polymer 1.0+ in 1.0.0
- Browser
- Browser Independent
i18n-format - Vaadin Add-on Directory
Text Formatter with CLDR Plural rules and Gender support for I18N
i18n-format
parameters
i18n-format
element is effective for UI localization with parameters.
You (James) gave her (Alice) and one other person a gift.
``` [`