ライティングモードとは

　ライティングモードは、Webページのスタイルを指定するための言語であるCSS（Cascading Style Sheets；カスケーディング・スタイル・シート）のうち、テキストの進行方向（横書き、縦書き）を定義するもので、正しくはCSS Writing Modes Module Level 3とよばれる。

　日本をはじめとする東アジア圏の縦書きや、横書きにおける左から右（ラテン系やインド語系の文章）、右から左（ヘブライ語やアラビア語の文章）、双方向（左から右と右から左が混在する場合）など世界各国の様々な書字方向を定義する。

もっと詳しく！

　CSS3は、非常に広範囲に渡るため、あるまとまった機能ごとにモジュール化されており、その中に具体的なプロパティとよばれる各要素がある。Writing Modesもモジュールであり、縦横を定義するwriting-mode、文字の向きを定義するtext-orientationなどのプロパティから構成される。

　縦書きレイアウト特有の表現には、Writing Modesだけでなく、複数のモジュールを組み合わせて利用する必要があり、圏点・傍線、禁則、均等割り、ルビなど文字装飾に関するプロパティもおさえておくとよい。

仕様解説

　Writing Modesでは、行の進行方向、文字の進行方向、文字の向きなどの書字方向全般の仕様が定義されている。

・writing-mode

　レイアウトを縦にする場合は、既存の横書きのHTML文書に、このプロパティを加えるだけでよい。具体的には、bodyに対して writing-mode: vertical-rl を指定するだけで、右上起点の縦書きレイアウトとなる。vertical がテキストの縦方向を指定し、rl は right to left と右から左への進行方向を指定する。何も指定しなければデフォルトでは横書きだが、明示的に指定する場合は、horizontal-tb と記述する。

・text-orientation

　縦書きにしただけでは、英字や数字が横に寝たままとなる。文字を正立させるには text-orientation プロパティを使用する。デフォルトの値は mixed で、英字は横倒し、日本語は正立、記号類はそれぞれ適切な向きに自動で配置される。向きを指定する場合は、upright または sideways の指定が可能。upright を指定すると、英字や数字が日本語のように正立し、sideways を指定すると、mixed で自動で正立になるような記号を欧文と一緒に横倒しにして表示する。

・text-combine-upright

　縦書きにおいて、年齢や年代のように数字のみを横書きで表示する方法を、縦中横という。text-combine-upright プロパティを使用すると、数字、記号、漢字などを縦書き中で横組みにし、1文字分の四角形として扱われ、幅は1文字分に圧縮される。

　以下、CSS Writing Modesの標準化と普及を推進する「次世代Webブラウザのテキストレイアウトに関する検討会」により、「CSS Writing Modesの仕様解説」が公開されている。

ライティングモードと標準化

　Writing Modesは、Webの標準化団体であるW3C（World Wide Web Consorcium） CSS Working groupにおいて仕様策定が進行中のCSS3のドラフト仕様を、電子出版の標準化団体であるIDPF（International Digital Publishing Forum）が先取りしてEPUB3に取り込んだことを契機に、標準化をすすめる議論が活発化した。

　また、標準化の手続きと並行してChromeやSafariといったWebブラウザが採用する描画エンジン Webkitが率先してこれらの仕様の実装をすすめたことから、Writing Modesを含む縦書きレイアウトの表示が可能となった。このWebkitを描画エンジンとして組み込んだ電子書籍ビューワが次々に登場し、日本における電子書籍市場の立ち上がりを加速した。

　2019年12月、W3C はWriting Modesを正式にW3C勧告とすることを発表し、縦書きレイアウトにかぎらず、多様な言語の表現が可能となった。