とある日の出向先にて
お客様 : 平井さん、(ウェブの技術で)アラビア語対応ってできる？
ひらい : アラビア語対応……ですか…… 🤔
※ グローバル展開されているプロダクトを開発していました。
ということでアラビア語対応やってみました〜✈️🏜️🐫
アラビア語って？
فإنه العربية
こんな言語です。どうやらアラビア語は右から読むらしい。
他にもヘブライ語とかも右から読みます。
עברית
appleのサイトのサウジアラビア版
https://www.apple.com/sa-ar/
フッターの箇所が顕著に特徴が現れていますね。
ではどう実装するのか？
見ていきましょう......✨
実装方法
HTMLのdir属性
要素の属性にdir属性というものがあります。
dirはDIRectionつまり(読む)方向を決める属性です。
参照URL : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
ある程度の文章の向きは、
ユーザーエージェントが自動で言語を読み取っていい感じにはしてくれるらしい。
因みにltrはLeftToRight、rtlはRightToLeftの略です。
ただ…… Edge と Internet Explorerがサポートされておらず
断念 😇
クラスを付ける
これが一番無難な方法でした。
実装方法は
- is-rtl(みたいな)クラスをbodyに付ける。
- JavaScriptでクラスの付け替えを行う。
- rtl用のCSSを用意する。
- rtl用のCSSで上書きしていく。
こんな感じ。
因みになぜ言語ごとにHTMLを分けなかったかと言うと、
- デザイン変更があったときにすべて言語ののHTMLを見直すのは大変
- 文言を入れる箇所は各国の翻訳されたJSONファイルを使用していたため、分ける必要がなかった
一見簡単そうに見えますが、初期段階のCSS設計を間違えてしまうと
一気にCSSがスパゲッティ化してしますので注意が必要です 💡
CSS的解決
文字の位置を右寄せに変更
これは簡単。
text-align: right;
と入れるだけ。
文字の読む方向を右からにする
上とニュアンスは似ているかもしれませんが、text-alignの役割は文章を右に寄せるだけです。
読む方向も右からに指定する必要があります。
directionといプロパティなのですが、上に挙げたHTMLのdir属性とは異なります。
こちらはEdge も Internet Explorerも対応されているので心置きなく使えます💡
左から右指定
direction: ltr;
結果
右から左指定
direction: rtl;
結果
お分かりいただけただろうか。
横並びの要素をどうするか
ここが少し悩みどころでした。 まず、横並びにするプロパティを挙げてみましょう 📝
display
- inline
- inline-block
- table, table-cell
- flex
- inline-flex
- grid
- inline-grid
float(+ 親に clearfix or overflow: hidden)
- left
- right
この中で、CSSだけで並び順を変更できるのは
- display: flex
- display: inline-flex
- display: grid
- display: inline-grid
- float
です。
実装結果はこんな感じ
See the Pen comparing CSS rtl properties by saeka-hirai (@saeka-hirai) on CodePen.
更に絞り込むと、 flexboxが1番適任だと思い、採用 🎉
flexbox採用理由
flexboxのpropertyで使用する
- flex-direction: row-reverse
- flex-direction: column-reverse
が明瞭(reverseって言ってるから直感的)でかつ書くソース量が少ない。
とてもスマート。素晴らしい😘
他の方法を不採用にした理由も併せて書いておきますね 📝
grid不採用理由
- gridはorderで要素一個ずつに対して順番を指定する必要があるため、柔軟性に欠ける
(要素が増える度CSSの記述を変えないといけない) - Internet Explorerが対応されてなかった(当時は)
float不採用理由
- clearfixやoverflowなど前後間の要素に対するケアが必要になってくるので、
堅牢性が落ちてしまう - floatを扱えるエンジニアが少ない w (まだflexのほうが事故りにくい)
因みにflexとinline-flexの違いはblockとinlineの違いと似ているので
使用箇所によってうまく使い分けましょう〜！
まとめ
アラビア語対応するときは、
- text-align: right;
- direction: rtl;
- flex-direction: row-reverse;
を上手く組み合わせて実装していきましょう😘
ブラウザによる実装レベルを知りたい場合は
caniuseというサービスを使うとわかりやすいですよ〜！