ローカライゼーション

出典：Calcite Design System (Beta) - Localization

ローカライゼーション

言語タグとロケールは、Web の国際化のための基本的な構成要素の一つです。Calcite Components は、多くのロケールと右横書き言語（RTL）を双方向でサポートしています。

ロケール

Calcite Components は、lang 属性で設定されたアプリケーションで定義されたデフォルトの言語を自動的に使用します。

<!-- HTML lang attribute to set the locale to English -->
<html lang="en">

Input Date Picker などの一部のコンポーネントは、任意の言語や国のフォーマットに合わせて特定のローカライズを含んでいます。

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

ロケールを持つコンポーネント

ナンバリングシステム

ナンバリングシステムは、設定されたロケールの定義に従って、数字または記号を使用して一貫した形式で数字を伝えるものです。

ブラウザの不一致を防ぐため、アラビア語の番号は、デフォルトでラテン語に設定されています。numberingSystem プロパティを標準的な Unicode 数値システムに設定することで、デフォルト値を変更することができます。

numberingSystem プロパティの詳細については、MDN documentation を参照してください（利用可能な番号付けシステムのリストを含みます）。

<calcite-input numbering-system="arab" type="number" value="10"></calcite-input>

番号付けされたコンポーネント

ロケールサポート

Calcite Components は、以下のロケールをサポートしています。

  • 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)

右横書き言語(RTL)

また、Calcite Components は、アラビア語やヘブライ語などの言語を双方向でサポートしています。方向を変えるには、<html> タグまたは <body> タグで dir 属性を rtl に設定します。

<calcite-color-picker dir="rtl"></calcite-color-picker>

<html dir="rtl">
左から右へ(LTR) 右から左へ(RTL)
LTR RTL

ミラーリングアイコン

ナビゲーションに使用される左右のアイコンなど、他のコンポーネントの Icon を RTL 用にミラーリングすることができます。

<!-- Flip the componet's element direction to rtl -->
<calcite-icon flip-rtl icon="arrow-bold-left"></calcite-icon>

以下のアイコンはミラーリングしてください。

  • ナビゲーションの矢印
  • ランニングなど前進へ進む動きのもの
  • 音量等の調整に関してのもの

しかし、以下のアイコンはミラーリングしないでください。

  • ロゴおよびブランディング
  • 時計やリフレッシュ等、循環が時計回りで表現されるもの