# be-intl > Format numbers, dates automatically and semantically. Latest version **0.0.51** (published 2026-09-03) · MIT license · 0 weekly downloads ## Install ```sh npm install be-intl pnpm add be-intl yarn add be-intl bun add be-intl ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.0.51 | | Published | 2026-09-03 | | First published | 2023-05-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 17.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | anderson.bruce.b@gmail.com | | Maintainers | bahrus | | Keywords | web-components, web-component, custom-element, custom-elements | ## Links - npm: https://www.npmjs.com/package/be-intl - npm.io page: https://npm.io/package/be-intl ## Dependencies (4) - [be-hive](https://npm.io/package/be-hive.md) 0.1.18 - [mount-observer](https://npm.io/package/mount-observer.md) 0.1.53 - [roundabout-lib](https://npm.io/package/roundabout-lib.md) 0.0.36 - [assign-gingerly](https://npm.io/package/assign-gingerly.md) 0.0.93 ## Recent versions - 0.0.51 (latest) — 2026-09-03 - 0.0.50 — 2026-09-02 - 0.0.49 — 2026-09-02 - 0.0.48 — 2025-01-06 - 0.0.47 — 2024-08-10 - 0.0.46 — 2024-08-09 - 0.0.45 — 2024-08-09 - 0.0.44 — 2024-07-21 - 0.0.43 — 2024-07-20 - 0.0.42 — 2024-07-14 - 0.0.41 — 2024-07-13 - 0.0.40 — 2024-07-08 - 0.0.39 — 2024-07-04 - 0.0.38 — 2024-07-02 - 0.0.37 — 2024-06-30 - … 37 more at https://npm.io/package/be-intl/versions ## README # be-intl (🌐) Format numbers, dates automatically and semantically. [![Playwright Tests](https://github.com/bahrus/be-intl/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-intl/actions/workflows/CI.yml) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-intl?style=for-the-badge)](https://bundlephobia.com/result?p=be-intl)

[![NPM version](https://badge.fury.io/js/be-intl.png)](http://badge.fury.io/js/be-intl) ```html ``` emits ```html 123.456,79 € ``` The output element provides identical support. ```html ``` emits ```html الجمعة، ١٨ نوفمبر ٢٠١١ ``` We can also employ more semantic syntax: ```html ``` ## 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: 1. the nearest ancestor with a `lang` (or `xml:lang`) attribute — crossing shadow-root boundaries via the host element; 2. otherwise ``; 3. otherwise the browser's own `navigator.language`. So in practice you set `lang` once, high up: ```html ... ``` 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 `` / `` 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`): ```html ``` 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 ``, which is already an implicit polite live region), and - `aria-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: ```html ``` ## Viewing Demos Locally 1. Install git 2. Fork/clone this repo 3. Install node.js 4. Open command window to folder where you cloned this repo 5. > git submodule add https://github.com/bahrus/types.git types 6. > git submodule update --init --recursive 7. > npm install 8. > npm run build 9. > npm run serve 10. Open http://localhost:8000/demo/ in a modern browser ## Running Tests ``` > npm run test ``` --- _Source: https://npm.io/package/be-intl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._