日本語
Web アプリケーションで RTL 言語レイアウトをサポートする
このブログ投稿では、Web アプリケーションで RTL (右から左) 言語サポートを効果的に実装するための基本的なステップを案内します。
Charles
Developer
Developer
このブログ投稿では、Web アプリケーションで RTL (右から左) 言語サポートを効果的に実装するための基本的なステップを案内します。
Logto は、カスタマーアイデンティティおよびアクセス管理 (CIAM) ソリューションのより良い選択肢です。これはオープンソースであり、活気のあるコミュニティに支えられています。最近、私たちのコミュニティ（クレジット @zaaakher）が Logto 管理コンソールと Logto サインインエクスペリエンスの両方へのアラビア語の翻訳を貢献し、アラビア語を話すユーザーにとってよりアクセスしやすくしました。
しかし、翻訳があるだけでは十分ではないことを理解しています。UI レイアウトが右から左 (RTL) 言語用に最適化されていることを確認する必要があります。このチュートリアルでは、RTL 互換性における一般的な課題について説明し、それらを Web アプリケーションでどのように解決するかを説明します。
左から右 (LTR) の Web アプリケーションでは、レイアウトは画面の左側から始まるように設計されています。コンテンツは左から右に流れ、スクロールバーは画面の右側にあります。対照的に、RTL Web アプリケーションは画面の右側から始まります。コンテンツは右から左に流れ、スクロールバーは画面の左側にあります。
Logto コンソールのスクリーンショットを例として示します：
LTR Web アプリケーションを RTL フレンドリーに変換する際には、以下のような課題に直面することがあります：
ここに、Logto を RTL フレンドリーにするために実施したいくつかのヒントとコツを示します：
dir="rtl" を使用する現在の言語がアラビア語または他の RTL 言語である場合、Web アプリケーションのルート要素に HTML 属性 dir="rtl" を適用します。
これはブラウザにコンテンツが RTL モードで表示されるべきことを理解させ、最初の 3 つの課題（テキストの配置、コンテンツの方向、スクロールバーの位置）を自動で調整します。ただし、カスタムスクロールバーを使用している場合は、位置を手動で調整する必要があるかもしれません。
言語が RTL の場合、CSS の transform: scaleX(-1); を使用してアイコンを水平に反転させることができます。これは React と TypeScriptで記述された例です：
このコンポーネントを使用してアイコンコンポーネントを包むと、RTL モードでアイコンを自動的に反転させます。
JavaScript の toLocalString 関数を使用して日付、時刻、数字をローカライズします。例：
また、date-fns のようなライブラリを使用して日付と時刻のローカライズを行うこともできます。
数字の場合、ar-u-nu-arab オプションで toLocaleString メソッドを使用してアラビア・インディック数字を表示することもできます。
説明
マージン、位置付け、ボーダー半径、その他の CSS スタイルを適切に調整する必要があるかもしれません。一般的なケースを以下に示します：
margin-left、margin-right、padding-left、padding-right を書く代わりに、margin-inline-start、margin-inline-end、padding-inline-start、padding-inline-end を使用して LTR および RTL モードの両方に対処することができます。
絶対位置指定を使用する際には、left と right の代わりに inset-inline-start と inset-inline-end を使用することができます。
ボーダー半径を使用する際には、border-start-start-radius、border-start-end-radius、border-end-start-radius、border-end-end-radius を使用して LTR および RTL モードの両方に対処することができます。
上記の方法で対応できない場合があるかもしれません。そのような場合、:dir() 擬似クラスを使用してテキストの方向に基づいた異なるスタイルを適用できます。
このチュートリアルでは、RTL フレンドリーな UI を実装する際の課題について説明し、Logto コンソールおよび Logto サインインエクスペリエンスでそれらにどのように対処したかを共有しました。上記のヒントとコツを適用することで、Web アプリケーションを RTL 言語ユーザーにとってよりアクセスしやすくすることができます。