入力欄とテキストエリアに `dir="auto"` を追加しよう
(mough.xyz)- HTMLの
dir="auto"属性 ひとつだけで、入力欄とテキストエリアでヘブライ語・アラビア語・ウルドゥー語のような RTL（右から左）言語 を自動サポート - これまでは文字検出用リスナーの作成、サードパーティライブラリの利用、
dir="right"への手動切り替えなど、手作業で複雑な方法 しか知られていなかった - "textarea rtl" の検索結果のどこにも
dir="auto"への言及がなく、直接手を入れる必要がある問題だと誤解 されてきた - 実際に適用してみると、別途低レベルな言語解析なしで すぐに正しく動作
- 小さな変更だが大きな違いを生み、世界中のユーザーがアプリを使えるかどうかを左右する 国際化（i18n）の重要要素
RTLサポートの難しさ
- Standard Notes では初期の頃からヘブライ語、アラビア語、ウルドゥー語など RTL言語のサポート 要望があったが、実装難易度が高そうに見えて先送りされてきた
- 検討するたびに、Unicode・ASCII などのエンコーディングを低レベルで扱う 言語解析作業 のように見えて避けていた
- 数か月ごとに同じ話題が繰り返されたが、毎回返ってくる助言は同じだった
- 文字パーサーを自作する
- サードパーティライブラリを使う
dir="right"を適用する
検索の限界
- "textarea rtl"、"textarea right to left" などで検索しても、結果に
dir="auto"がまったく出てこない - その代わり、
dir="rtl"をタグに書けという Stack Overflow の回答や、Twitter のサードパーティライブラリばかりが表示された - 検索結果の1ページ目だけを信じて 直接手を入れる必要がある問題だと決めつけ、優先順位で後回しになり続けた
解決策の発見
- 数週間前、再び検索していたところ、ある GitHub の投稿で「textarea に
dir="auto"を追加するだけでよい」というコメントを見つけた - 1年間解決策を探していた問題が、たった1行で解決 した
- 実際に適用してみたところ、不具合なく完璧に動作 した
適用方法
- 入力欄・テキストエリアに属性を1行追加するだけ
<textarea dir='auto'> שלום, עתיד. </textarea>
- 入力値に応じてテキスト方向が 自動判定 される
- 参考までに、MDN の
dir属性ドキュメントに関連説明がある
1件のコメント
Hacker Newsのコメント
入力欄やtextareaのテキストレンダリングを直す簡単な方法ではあるが、送信されたテキストを表示する要素にも同じ処理が必要になる
そして双方向テキスト、たとえばアラビア語の段落の中に英語の製品名が出てくるようなケースに出会うと、まったく別の複雑さが出てくる
Chromeには現在、
dir='auto'のある入力欄でRTLテキストのレンダリングに影響するリグレッションバグがあるが、修正はすでに展開されており、次のリリースに含まれる予定MDNはいつも助けてくれる: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
世界はアメリカの外にもあるが、サイトの性質によっては必ずしも対応が必要とは限らない
自分はアメリカ人でも英語ネイティブでもないが、自分が使うサイトの99%では、ユーザー名や投稿でRTL文字を許可しなくてもまったく問題ない
これがブラウザやOSのレベルで解決されていないなら、自分がそれをサポートする義務はほとんどないと思う
そしてこれは少数派を抑圧しようという話ではない
ざっと検索すると英語話者は8億4千万人ほどらしいし、1人で作る立場なら世界の1/10に使ってもらえるだけでもかなり悪くない
より多くの人をサポートしようと範囲を広げるのは良いことだが、必ずそうしなければならないわけではない
「Googleの最初の結果ページは決して嘘をつかない」とは、問題解決に役立つ話はあるが、先に座っておいたほうがいい。たぶん悲しくなるから
「Googleの最初の結果ページは決して嘘をつかない…」という表現は、その後に出てくる「Googleは入力欄のRTLサポートについて私たちに嘘をついてきた」という文から見ても、ほぼ確実に皮肉だったと思う
残念ながら、Webサイトと紐づいたCodePenはどちらもソースのレンダリングがかなりひどい。ピリオドの位置が間違っていて、レンダリングされたHTML自体は問題ない
これはUnicode双方向アルゴリズムがいつものように失敗したように見える
HTMLタグ、つまり
<と>の間全体を、内部的にはLTRの原子的な単位としてレンダリングしつつ、周囲の文字方向には影響しない特別なアルゴリズムが必要そうだこの例では、アルゴリズムは
.<シーケンスの途中で方向を切り替えられる必要があるソースコード断片の基本方向はLTRだが、ヘブライ語テキストのせいで方向が混在している
句読点は弱い方向性しか持たないため、ピリオドはRTL区間の終端に現れ、基本方向がLTRなのでその「終端」は右側を意味する
混在方向のコンテンツを正しくレンダリングさせるには、特定の方向区間がどこで始まりどこで終わるかを示す双方向制御文字を入れる必要があることが多い
ただしこの場合、それを入れると実際の入力例のレンダリングを壊してしまう可能性があるので、入れるのは適切ではない
関連して、ここ数年で論理プロパティ/値のサポートが成熟してきた
これは
top/left/bottom/rightのような方向ベースのプロパティの代替で、コンテンツやテキスト方向の切り替えに合わせて適応できるhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...
leadingやtrailingのようなものだWebにも入ってきたのはうれしいし、言語非依存のUIを作ることがずっと現実的な作業になった
textareaとBiDiテキストのほぼ思いつく限りの組み合わせで検索すると、https://www.w3.org/International/talks/1602-omanが上位リンクの1つに出てくるその中の「What if you don't know the direction in advance」セクションにもすぐ出てくる: https://www.w3.org/International/talks/1602-oman/#advance
問題は、筆者がこの分野に詳しくなく、ここでの検索語としてBiDiが正しいことすら知らなかったらしい点だ。これは「bi-directional text」の略で、特定の書字方向を指定したくないときに使う言葉だ
「検索結果が間違っていた」と考えたことも責めたくはない。RTLで検索したなら、その結果はその問いに対しては正しいが、この分野をもう少し知らないとそれはわからない
インターネット上の回答に頼ることの限界が出ている。インターネットは自分が何を知らないかを知らない
BiDiを長く扱ってきた人に聞けば、最初の質問の1つは「RTLのことですか、それともBiDiのことですか？」になる可能性が高い
可能ならソフトウェアより人に聞いたほうがいい。特にその分野に詳しくないときはなおさらだ
フォーム送信時にテキスト入力の方向性も一緒に含められる興味深い属性
dirnameへのリンクも追加してよさそう: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...ブラウザを作るなら、明示的な指定がない場合は
dir="auto"を前提にせよ、という公益広告を打ちたいユーザーが特定の言語で入力することがわかっているなら、それも最善のデフォルトではないかもしれない。もちろん、間違った指定をするよりはましだ
少し関連するが、最近Vimにはテキストを右から左にする
:set rlがあることを知った元に戻すには
:set norlを使えばよいvim -Aもある。どう使うのかは知らないが、何らかの入力メソッドを使うようだ:set tdはどうだろう?