CSSでhtmlのdir=rtl属性を指定する（アラビア語対応）

そんなことある？って感じなんだけど、

サイトの多言語化対応で、英語・アラビア語のサイトを作っている。

アラビア語って、右から左に書く言語。

なので当然サイトが全部 dir="rtl" になるってワケ。

そりゃレイアウト崩れるとこも出てくる。

サイト全体のCSSに、アラビア語のページだけに適用されるCSSを書き加える。

WordPress プラグイン「Polylang」で多言語化を行なっている場合、

<!DOCTYPE html>
<html dir="rtl" lang="ar" data-loaded="false" data-scrolled="false" data-spmenu="closed">

という感じになっている。

これを利用して、CSSにこういう風に書くとよい

html[dir=rtl] .hoge{
  left:0;
  right:50px;
}

やわらかしかっけい