本文へ移動
uiify

国際化

サーバーレンダリングするページのロケール、方向、文字体系に応じた文言を設定します。

ドキュメントの言語と方向はサーバーで設定します。ルートの情報を使って<html lang={locale} dir={direction}>をレンダリングすると、支援技術、ブラウザーの双方向テキストアルゴリズム、:lang()のスタイルが初回描画から正しい値を参照できます。ハイドレーション後のクライアントコードでロケールを検出しないでください。

コンポーネントのラベル

翻訳した文字列をコンポーネントのlabelspropに渡します。件数が必要なラベルには"{index} of {count}"などの文字列テンプレートを使い、数値の書式設定にはlocaleを渡します。formatLabelは名前付きプレースホルダーを置換し、Intl.NumberFormatで数値の書式を設定します。

方向と配置

方向はDOM内の要素のdirから取得します。キーボード操作はresolveDirection(element)でその方向に従います。方向を明示するpropで上書きすることもできます。ポップアップのsideは物理方向(top、bottom、left、right)、alignは論理方向(start、center、end)で、書字方向に従います。

独自のキーボード処理

入力でIMEを使う場合は、文字の変換処理が終わってからナビゲーションキーを処理します。Enter、矢印キー、Escapeに応答する前にisComposingKeyEvent(event)を確認してください。変換終了後にキーコード229を報告するブラウザーにも対応できます。

タイポグラフィとフォールバック

スタイルシートは:lang()で文字体系に適したフォントと改行方法を選びます。アプリ独自のフォントを使う場合は、--font-sans-ja、--font-sans-zh-hans、--font-sans-arを上書きします。未翻訳の英語はlang="en" dir="ltr"で囲み、別のロケール内でも英語の発音、フォント選択、文字の順序を維持します。

このページは機械翻訳によるもので、レビューは未実施です。