WordPressのテーマに入ってるrtl.cssってなに? -いるの、いらないの?- 「WordBench東京 12月勉強会」#wbtokyo

2016年12月18日(日) 東新宿のNHNテコラス株式会社にて、今年を締めくくるWordBench東京 12月勉強会が行われた。「Xmas &年末 LT 大会!」〜ピザとケーキとライトニングトーク〜、と題して終始がWordPressにまつわるライトニングトーク。もしかしたらケーキ出るかも?という期待とともに参加した。

Xmas &年末 LT 大会!

クリスマスを兼ねてまずは乾杯からスタート!つづくLT大会では、リリースされたばかりのWordPress4.7と最新テーマTwenty Seventeenはじめ、REST APIのようなテクニカルな内容や、ブログやメディアとしての活用、改ざんの事例、といった17の発表があった。
旬な情報やリアルな話題はWordBenchならでは。

wbt-xmas

ワプー5周年ケーキがかわいすぎる!

WordPressのテーマに入ってるrtl.cssってなに? -いるの、いらないの?-

ケーキにつられて私も登壇。以前から気になっていたrtl.cssについてまとめてみた。発表スライドはこちら。

rtl.cssは、最新のデフォルトテーマ「Twenty Seventeen」はじめ、公式ディレクトリの多くのテーマに入っている。とはいえ、日本語でWordPressを使う場合は、まったく関係がないので関心は薄れがち。

RTLとは

「Right To Left: アラビア語やヘブライ語のように右から左へ記述する言語」 WordPressdは現在7種類のRTL言語に対応している。

アラビア語のダッシュボード

サイトの言語は、ダッシュボードの[設定]-[一般]-[サイトの言語] より切り替える。アラビア語を選択すると、アラビア語のダッシュボードを見ることができる。

ダッシュボード

フロントページ

2カラム右サイドバーで作ったテーマが、アラビア語に切り替えると左サイドバーで表示される。HTMLタグにdir属性が付くため。dir=”rtl”となると、テキストの表示方向が右寄せになる。
Flexboxでレイアウトした2カラムがの左右も逆転する。rtlではFlexboxのカラムが右から順に表示される。cssの擬似要素 :beforeや:afterも左右が逆になる。HTMLとCSSはもともとRTLに対応している。

rtl.cssに必要なプロパティ

さらに調整を行うのがrtl.css。style.cssの中でfloat、text-align、border、margin、paddingなどを指定している場合は、左右逆の値をrtl.cssに書く。

rtlcss

RTL言語に対応しているテーマ

テーマディレクトリの[特徴で絞り込む]-[機能]-[RTL言語対応]で探すことができる。いま公開されているテーマ4384のうち601に「RTL言語対応」のテーマタグがついている。

rtl.css いるの、いらないの?

普段の業務ではいらない。テーマを配布する場合はあるとうれしい。私たちが日本語対応のテーマを探したり翻訳して使っているように、RTL言語の人たちも使いやすいテーマを探している。

ありがとうございました、ケーキおいしかったです!!

コメントを残す

メールアドレスが公開されることはありません。