be-intl
be-intl ()
Format numbers, dates automatically and semantically.
<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'></data>emits
<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'>123.456,79 €</data>The output element provides identical support.
<time lang="ar-EG" datetime=2011-11-18T14:54:39.929Z be-intl='{ "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }'></time>emits
<time lang="ar-EG" datetime="2011-11-18T14:54:39.929Z" be-intl="{ "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }">الجمعة، ١٨ نوفمبر ٢٠١١</time>We can also employ more semantic syntax:
<data value=123456.789 lang="de-DE" be-intl-style=currency be-intl-currency=EUR></data>Locale resolution
The examples above put lang right on the formatted element, but that isn't required.
be-intl uses the element's effective language, resolved the same way the browser's
:lang() selector works:
- the nearest ancestor with a
lang(orxml:lang) attribute — crossing shadow-root boundaries via the host element; - otherwise
<html lang>; - otherwise the browser's own
navigator.language.
So in practice you set lang once, high up:
<html lang="de-DE">
...
<data value=123456.789 be-intl-style=currency be-intl-currency=EUR></data>
<!-- emits 123.456,79 € -->Changing the formatted element's own lang after it has been enhanced re-formats it only
if you opt in with be-intl-observe-lang (🌐-observe-lang); changes to an ancestor's lang
after enhancement are not tracked.
Announcing updates to assistive technology
be-intl writes the formatted string into textContent on first render and again whenever the
bound value or the effective locale changes. By default it leaves ARIA untouched — most
formatted <data> / <time> elements are static readouts, and turning every one into a live
region (especially for a locale switch that only changes presentation, not the value) is
usually just screen-reader noise.
When a particular value is something the user is watching change, opt that element in with
be-intl-announce (🌐-announce):
<output be-intl be-intl-announce></output>
<data be-intl be-intl-announce value="0" id="unread"></data>With the attribute set, be-intl — after the element's first render, so the initial value
isn't spoken on load — marks it as a polite live region:
aria-live="polite"(skipped for<output>, which is already an implicit polite live region), andaria-atomic="true", so multi-token output such as a formatted date is announced as one phrase rather than word-by-word.
Later re-formats then mutate an already-registered region and are announced. assertive is
intentionally not offered — interrupting the user to read out a reformatted number is almost
never the right call.
Alternative names
The semantic example above involves a lot of keyboard tapping of the letters "be-intl". To avoid blisters on your itty bitty fingers, we provide an alternative base attribute you can use:
<time lang="ar-EG" datetime="2011-11-18T14:54:39.929Z"
🌐-weekday=long 🌐-year=numeric 🌐-month=long 🌐-day=numeric></time>Viewing Demos Locally
- Install git
- Fork/clone this repo
- Install node.js
- Open command window to folder where you cloned this repo
git submodule add https://github.com/bahrus/types.git types
git submodule update --init --recursive
npm install
npm run build
npm run serve
- Open http://localhost:8000/demo/ in a modern browser
Running Tests
> npm run test