Every Pacem element speaks a language: its culture (the lang attribute), or else the page's <html lang>. Bind it, and dates, numbers and prices follow, formatted the way each locale expects.

<!-- one element in Italian, whatever the page says -->
<pacem-span culture="it-IT" text="{{ $pacem.currency(49.9, 'EUR', Pacem.Utils.lang($this)) }}"></pacem-span>

<!-- the whole page in German -->
<pacem-html-proxy attr="lang" value="de-DE"></pacem-html-proxy>

Usage

Pick a culture per element. culture sets the element's lang attribute, and changing it re-evaluates the element's bindings right away.

Read it in bindings. Pacem.Utils.lang($this) gives the element's own lang, else <html lang>, else the browser's language. Pass it to the $pacem formatters (date, number, currency, timespan): left alone, they use the browser's language.

<pacem-span culture="{{ #user.model.locale }}"
            text="{{ $pacem.date(#order.model.date, 'short', Pacem.Utils.lang($this)) }}"></pacem-span>

lang isn't inherited by Pacem.Utils.lang(): it reads the element's own attribute, then the page's. Set culture on the element whose bindings format, not on a container around it.

Switch the whole page. A <pacem-html-proxy> with attr="lang" writes its value onto <html lang>: every element without its own culture follows, the next time its bindings run. It works for any attribute of <html> (a theme, a layout flag), and an empty value removes it.

An element's own culture refreshes its bindings at once; a page-wide change only shows on the next evaluation (a new value, a tick).

Examples

One order, four locales

The same total and date, each row formatting with its own culture.

A page-wide language switch

<pacem-html-proxy> sets <html lang>: the clock has no culture of its own, so it follows at its next tick.