Localization

Language tags and locales are some of the fundamental building blocks of internationalization of the web. Calcite Components support many locales and right-to-left (RTL) bidirectional support.

Locale

Calcite Components will automatically use the default language defined in the application set by the lang attribute.

Use dark colors for code blocksCopy
<!-- HTML lang attribute to set the locale to English -->
<html lang="en">

Some components, such as Input Date Picker, also contain specific localization for desired language and country formats.

Use dark colors for code blocksCopy
<!-- Sets the component's locale to English -->
<!-- Dates are formatted MM/DD/YYYY -->
<calcite-input-date-picker locale="en"></calcite-input-date-picker>

<!-- Sets the component's locale to English - Canada -->
<!-- Dates are formatted YYYY-MM-DD -->
<calcite-input-date-picker locale="en-CA"></calcite-input-date-picker>

<!-- Sets the component's locale to English - UK -->
<!-- Dates are formatted DD/MM/YYYY -->
<calcite-input-date-picker locale="en-GB"></calcite-input-date-picker>

Components with locale

Locale support

Calcite Components has support for the following locales:

Arabic (ar)
Bosnian (bs)
Bulgarian (bg)
Catalan (ca)
Chinese Simplified (zh-CN)
Chinese Traditional - Hong Kong (zh-HK)
Chinese Traditional - Taiwan (zh-TW)
Croatian (hr)
Czech (cs)
Danish (da)
Dutch (nl)
English (en)
English - Australia (en-AU)
English - Canada (en-CA)
English - United Kingdom (en-GB)
Estonian (et)
Finnish (fi)
French (fr)
French - Switzerland (fr-CH)
German (de)
German - Switzerland (de-CH)
Greek (el)
Hebrew (he)
Hindi (hi)
Hungarian (hu)
Indonesian (id)
Italian (it)
Italian - Switzerland (it-CH)
Japanese (ja)
Korean (ko)
Latvian (lv)
Lithuanian (lt)
Macedonian (mk)
Norwegian (nb)
Polish (pl)
Portuguese (pt)
Portuguese - Portugal (pt-PT)
Romanian (ro)
Russian (ru)
Serbian (sr)
Slovak (sk)
Slovenian (sl)
Spanish (es)
Spanish - Mexico (es-MX)
Swedish (sv)
Thai (th)
Turkish (tr)
Ukrainian (uk)
Vietnamese (vi)

Right-to-left (RTL)

Calcite Components also provide bidirectional support for languages such as Arabic and Hebrew. To change the direction, set the dir attribute to rtl in the <html> or <body> tag.

Use dark colors for code blocksCopy
<!-- HTML dir attribute to set document direction right-to-left (RTL) -->
<html dir="rtl">

Left-to-right (LTR)	Right-to-left (RTL)

Mirroring icons

Icon and icons in other components can be mirrored for RTL, such as left and right icons used for navigation.

Use dark colors for code blocksCopy
<!-- Flip the componet's element direction to rtl -->
<calcite-icon flip-rtl icon="arrow-bold-left"></calcite-icon>

Icons should be mirrored for:

Navigation arrows
Forward movement, such as running
Slider movements for volume controls

However, icons should not be mirrored for:

Logos or branding
Clocks and circular directions of time, such as refresh

Calcite Design System (Beta)

Localization

Was this page helpful?

Was this page helpful?