مرحبا هناك كيف حالك ؟ ؟

先日、Webサイトのアラビア語対応というものをしたので覚え書き。

今後アラビア語サイト対応するか分かりませんが、いつか石油王あたりから制作案件が舞い込んでくるかもしれないので覚えておいてもよさそうです。

アラビア語サイトってどうなってる?

アラビア語対応が初めてだったので、まずはアラビア語サイトを見るところから始めました。

スターバックス

スターバックス英語版

スターバックス中東版

スマートフォンサイズにした時のハンバーガーメニューの位置も左右入れ替わってます。

マクドナルド

マクドナルド英語版

マクドナルド・サウジアラビア

世界各国のWebデザインと日本のWebデザインの特徴

英語は左から右に読んでいくのに対し、アラビア語は右から左に読んでいきます。

それに伴い「右にあったものは左へ、左にあったものは右へ」と文字だけでなく全体的に反転しているのが分かりました。

対応したこと

以下、具体的にやったことです。

direction: rtl

これをやらなきゃ始まらないです。文字表記の方向を右から左にしてくれます。

body {
  direction: rtl
}

これを指定すれば文字表記の方向だけでなく、::before/::afterも反転してくれます。アラビア語サイトも英語や数字が混ざっていて、英語や数字は反転されません(位置は変わる)。

inline-block要素で横並びになっているものは、要素の順番で右から並べてくれます。inline要素の場合は中身によって変わるみたいで、よく分からないです。。。

また、IEに限ってですが、これを指定するだけでスクロールバーの位置も反転します。

他のブラウザはならないので、これがいいのか悪いのかは分かりませんが、IE独自に配慮しているようです。(他に配慮するとこあるだろIE!)

float/position

direction: rtlでけっこういい感じになりますが、floatやpositonで配置しているところは逆に指定しなおす必要がありました。

floatで並べてるメニューは逆向きに、右下にposithin:fixedで固定してるトップへ戻るは左へといった感じです。

margin/padding

左右の余白も要チェックです。

例えば、見出しの左にアイコンがあって、アイコンに右マージンを付けて見出しとアイコンの間隔をとっていたとします。

反転すると、見出しの右にアイコンが移動しますが、アイコンには右マージンが指定されてるので、見出しとアイコンの間は詰まってしまいます。

気をつけること

アラビア語マジ分からん

アラビア語はこんなのです。

مرحبا هناك هو طقس جيد اليوم . طوكيو هو حار جدا ومشمس .

もう暗号か落書きにしか見えません。

表示に不安があるときにはGoogle先生に翻訳してもらったり、デベロッパーツールでdirectionを切ったり付けたりしながらすすめましょう。

矢印アイコン

左右の矢印アイコンを使っている場合、左右の位置が入れ替わって終わりではありません。

矢印の向きが大丈夫か確認しましょう。translate使えるならrotateで回転させるのが楽そう。

ドロワーがちょっとめんどい

今回の案件で右から出てくるドロワーメニューがありましたが、それをアラビア語サイトでは左から出てくるようにしました。左右入れ替えるような物は、まあまあCSSの修正が入ってめんどいです。

タブの順番も右から

タブも左右順番入れ替わってるか見直しましょう。タブの見出しがアラビア語だと左右入れ替わったか分からないので見落としがちでした。

floatの解除はbothで

floatの解除はclearを使いますが、left/right/bothありますよね。

未だにleftとrightの使い道が分からないんですが、今回ソースコードを引き継いだ時にはすでにleft or rightを使って解除されてました。

そうするとfloatを逆にするたびに、clearもいちいち指定し直さないとダメです。bothだったらその手間はありません。

よく分からなかったところやメモ

  • スライダーも右から左に流れるものなの?この辺アラビア語圏の人の感覚知りたい
  • スクロールバーの位置は左が自然なの(IEはdirectionプロパティでやってくれるけど)
  • 2カラムのサイトとかってカラムごと入れ替えるのか??たぶん入れ替えるんだろう
  • 画像の反転ってどこまで気にしたらいいのか?今回は左右の矢印は気にしたけど、他の左右対象でないアイコンも入れ替えなきゃだめなのか?
  • ブラウザごとに大変だったことは特になし
  • 今回既存のCSSに上書きしないとダメだったけど、最初からアラビア語対応するのがわかっていれば設計次第で手間はかからなさそう。
  • アラビア語圏ってブラウザのシェアどうなってるの?
  • アラビア語

さいごに

今回手探りで対応したので、間違ってるとこあったら教えてください。 アラビア語まじ分からん