ウェブとフロントエンド · 中級

ヘブライ語とRTL:壊れるものと修正方法

一行でいうと: ほとんどのRTLバグは、beginとendの代わりにleftとrightを使うことと、一行に混在するテキストの衝突から来る。

基本

ドキュメントレベルで言語と方向を宣言する。そこから、マージン、ボーダー、ポジションにleftとrightの代わりにstartとendを使う論理プロパティを使う。明示的なleftが残っているすべての場所は、サイトの第二バージョンの将来のバグだ。

矢印のような方向性のあるアイコンは反転すべきだ。再生シンボルのような非方向性のものはそうではない。

混在テキスト

ヘブライ語、英語、数字を含む行は方向が混乱する場所だ。文末の句読点が飛び、バージョン番号が反転し、ウェブアドレスが壊れる。

解決策はアイソレーションだ:外国語やコードセグメントをその方向を宣言する要素で包む。これはほとんどのケースをトリックなしに解決する。

電話番号、識別子、技術的な文字列は、ヘブライ語の文中でも明示的に左から右に表示するのが好ましい。

他に確認すること

水平スクロールとスライダー、番号付き列のテーブル、軸が反転すべきグラフ、ファイルへのエクスポート——特にヘブライ語のサポートがコードレベルでなくフォントレベルで失敗することが多いPDF。

さらに深く

各リリースでヘブライ語だけでなく両方の言語でシステムをテストする。RTLの問題は一方向だけでテストされた外部コンポーネントを通じて入ってくる——そのため、サポートを宣言するライブラリを選び、残りを一箇所で動作を修正する独自のレイヤーで包む価値がある。