ウェブとフロントエンド · 中級
ヘブライ語とRTL:壊れるものと修正方法
一行でいうと: ほとんどのRTLバグは、beginとendの代わりにleftとrightを使うことと、一行に混在するテキストの衝突から来る。
基本
ドキュメントレベルで言語と方向を宣言する。そこから、マージン、ボーダー、ポジションにleftとrightの代わりにstartとendを使う論理プロパティを使う。明示的なleftが残っているすべての場所は、サイトの第二バージョンの将来のバグだ。
矢印のような方向性のあるアイコンは反転すべきだ。再生シンボルのような非方向性のものはそうではない。
混在テキスト
ヘブライ語、英語、数字を含む行は方向が混乱する場所だ。文末の句読点が飛び、バージョン番号が反転し、ウェブアドレスが壊れる。
解決策はアイソレーションだ:外国語やコードセグメントをその方向を宣言する要素で包む。これはほとんどのケースをトリックなしに解決する。
電話番号、識別子、技術的な文字列は、ヘブライ語の文中でも明示的に左から右に表示するのが好ましい。
他に確認すること
水平スクロールとスライダー、番号付き列のテーブル、軸が反転すべきグラフ、ファイルへのエクスポート——特にヘブライ語のサポートがコードレベルでなくフォントレベルで失敗することが多いPDF。
さらに深く
各リリースでヘブライ語だけでなく両方の言語でシステムをテストする。RTLの問題は一方向だけでテストされた外部コンポーネントを通じて入ってくる——そのため、サポートを宣言するライブラリを選び、残りを一箇所で動作を修正する独自のレイヤーで包む価値がある。