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
  
1
2
<!-- 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
           
1
2
3
4
5
6
7
8
9
10
11
<!-- 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
  
1
2
<!-- HTML dir attribute to set document direction right-to-left (RTL) -->
<html dir="rtl">
Left-to-right (LTR)Right-to-left (RTL)
Map with Calcite Components left-to-right Map with Calcite Components right-to-left

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
  
1
2
<!-- 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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.