Writing-modelとは?CSSのwriting-modelでテキストの縦書き・横書きを指定する方法

今回はHTMLを書く上で欠かせないテキストの向きの変え方のお話

CSSの writing-model プロパティで思い通りに文字の向きを変えたいと思っても・・初心者のうちは

・うまくテキストの向きの調整ができない!!
・向きの設定をしても、うまく反映されない!!

というふうに、悩んだ経験もあるはず。

今回は、そんなCSSの【writing-model】プロパティに関する

・基本的な使い方
・テキスト向きの変え方

について説明します。

【writing-model】とは

【writing-model】の読み方

CSSプロパティの writing-model はライティングモデルと読み、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかといった、書字方向全般の仕様が定義されています。

writing-model】の説明

属性値としては、主に horizontal-tb、vertical-rl、vertical-lrが挙げられます。

横書きの場合はその言葉の書字方向も影響し、左書き や右書き (ヘブライ語やアラビア語) のどちらかになります。

また、一部のブラウザでは非対応なのでご注意ください。

【writing-model】で利用できる値

writing-model】では以下の値を使うことができます。

説明
horizontal-tb ltr の言語→コンテンツは左から右へ水平に流れます。
rtl の 言語→コンテンツは右から左へ水平に流れます。
次の水平の行は、前の行の下に配置されます。
vertical-lr ltr の言語→コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。
rtl の言語→コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
vertical-rl ltr の言語→コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。
rtl の言語→コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
sideways-lr ltr の言語→コンテンツは上から下へ垂直に流れます。
rtl の言語→コンテンツは下から上へ垂直に流れます。
垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
sideways-rl ltr の言語→コンテンツは下から上へ垂直に流れます。
rtl の言語→コンテンツは上から下へ垂直に流れます。
垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。
注意
IEをはじめとする、ブラウザは非対応です。また、“sideways-lr”と”sideways-rl”Firefox以外は非対応なのでご注意ください。

対応ブラウザ

対応ブラウザは以下の通りです。

■horizontal-tb、vertical-rl、vertical-lr

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  非対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet  非対応

■sideways-lr、sideways-rl

PC用ブラウザ 対応状況
Chrome 非対応
Edge 非対応
Firefox  完全対応
Internet Explorer  非対応
Opera 非対応
Safari 非対応
スマートフォン用ブラウザ 対応状況
Android webview 非対応
Android版Chrome 非対応
Android版Firefox 完全対応
Android 版 Opera 非対応
iOS版Safari 非対応
Samsung Internet 非対応

 【writing-model】の基本的な使い方

【writing-model】の使い方

ここでは、writing-modelプロパティの基本的な使い方について説明していきます。

各属性値の設定の仕方も合わせて説明していきます。

HTML

CSS

      ⬇

まとめ

いかがでしたか?

今回はwriting-modelプロパティの基本的な使い方を説明しました。

これで、writing-modelプロパティを使って、文字の向きを自在に変更できますね!

文字の向きを変えるだけでも、Webコンテンツの表現の仕方も大きく変わるものです。

閲覧者が見やすいように、工夫してみてください!!

この記事がお役に立てれば幸いです。

参考文献:https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?