【CSS】directionで文章を右から左へ書く方法

CSS

2021.08.262020.05.27

こんにちは朱夏です。

今回は、CSSで文字を右から左へ表示させる方法です。
通常、HTMLで書かれたテキストをブラウザで表示させると、左から右へ文章が表示されます。
しかし、古い日本語やアラビア語などの様に、右から左へ書く文章も存在しています。

この問題を解決してくれるのが「direction」プロパティです。

それではいってみましょう。

[もくじ]
テキストを右から左へ表示させる書き方
実行サンプル
あとがき

テキストを右から左へ表示させる書き方

コードはこちらになります。

HTML

<span class="test">こんにちは朱夏です。</span>

CSS

.test {
 direction: rtl;
 unicode-bidi: bidi-override;
}

書き方のポイントは2つです

「direction」プロパティに「rtl」を指定
「unicode-bidi: bidi-override;」を指定

1.「direction」プロパティに「rtl」を指定

テキストの表示向きを指定するプロパティです。
指定できる値は以下の2つ。

ltr：Left to Right
rtl：Right to Left

それぞれ頭文字をとっているので覚えやすいと思います。
ltrについてはほぼ使うことは無いと思いますが…

2.「icode-bidi: bidi-override;」を指定

インライン要素で右から左へテキストを表示させたい場合はこの一行を追加しておく必要がある様です。
特にIEではこれを付けていないと、右から左へ表示されなくなるようです。

私の環境（Chrome）では、この一行が無くても、テキストは右から左へ表示されました。

とはいえ、付けておくことで対応するブラウザの幅が広がるのであれば、書いておいて損は無いと思います。

実行サンプル

実行サンプルはこちらになります。

See the Pen
oNjRjrW by 朱夏 (@syunatsu1)
on CodePen.

左から右への表示を指定したパターンと、右から左への表示を指定したパターンの2つを書いてみました。
左から右への表示を指定したパターンの方は、何も指定しない場合と同じ様に表示されていますね。
めったに使うことは無いと思いますが、「ltr」というものもあるという事は頭の片隅に置いておくと良いかもしれません。