← Examples

Internationalisation — Portuguese + Arabic RTL

Two widgets on one page. The document stays lang="en"; each widget stamps its own lang. Type one letter to see the pluralised result-count announcement (try a query matching exactly 1, then 3 suggestions). The Arabic widget is dir="rtl" — the input sits on the right and the × renders before each label.

Português (locale: "pt")

العربية (locale: "ar", dir: "rtl")

View code 
<h2>Português (<code>locale: "pt"</code>)</h2>
<label for="tags-pt">Frutas favoritas</label>
<input id="tags-pt" type="text" name="frutas" />

<h2>العربية (<code>locale: "ar", dir: "rtl"</code>)</h2>
<label for="tags-ar">الفواكه المفضلة</label>
<input id="tags-ar" type="text" name="fakiha" />

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';
  import ptStrings from '../locales/pt.json' with { type: 'json' };
  import arStrings from '../locales/ar.json' with { type: 'json' };

  new Taga11y(document.getElementById('tags-pt'), {
    suggestions: ['Maçã', 'Banana', 'Cereja', 'Tâmara', 'Laranja'],
    i18n: { locale: 'pt', strings: ptStrings },
  });

  new Taga11y(document.getElementById('tags-ar'), {
    suggestions: ['تفاح', 'موز', 'كرز', 'تمر', 'برتقال'],
    i18n: { locale: 'ar', dir: 'rtl', strings: arStrings },
  });
</script>