この記事は フューチャー Advent Calendar 2025 の 16 日目の記事です。
はじめに
こんにちは。TIGの後藤です。
普段の業務では主にWebアプリケーションの設計開発を行っています。
今回は、ある課題の対応のために、「Web技術を使った日本語の縦書き」とくに「文字の見た目が回転するかどうか」について調べる機会があり、折角なので調べたことを技術ブログに残そうと思います。
縦書きで文字の見た目が回転するかどうか、と言われてもピンとこないかもしれませんが、例えば日本語の縦書きの書籍で、英文を記載するときに、文字が横倒しになって表示されているのを見たことがあるかと思います。
Web技術ではこの、縦書きと横書きでの文字の表示の違いをどのように切り替えているのか、その仕組みを調べてみました。
Webの縦書きは技術的にも難しく、様々な技術の組み合わせでできており、今回の内容で全て網羅できているわけではありませんが、「こんな感じなんだ」というのを大づかみに伝えられたらと思います。
CSSでの縦書き指定
何気なくWebを使うとき、私たちは当たり前のように日本語を「横書き」で左から右に読み書きしていると思いますが、日本語は縦書きと横書きどちらでも記述される言語なので、Webでも縦書きの表現をする方法が用意されています。
HTML・CSSを用いて日本語のような縦書きをWebで表現するためには、デフォルトで横書きに描画されているテキスト要素に、CSSのwriting-modeやtext-orientationなどのプロパティを指定をすることで、縦書きを表現できます。
writing-mode プロパティ
writing-modeプロパティでは、そのテキストが縦書きか横書きかを指定します。
MDN Web Docsでは以下のように説明されています。
writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。
writing-mode - CSS - MDN Web Docs
writing-modeに設定できる値の中で、縦書きに関わるものをピックアップして見ていきます。
horizontal-tb
writing-mode: horizontal-tb;
私たちがよく見るWebの横書きはこの指定です。というのも、writing-modeプロパティの初期値にもなっているのがhorizontal-tbだからです。
writing-modeにhorizontal-tbを指定すると、日本語の横書きや英語のように左から右に書く言語では、文字が1文字ずつ、左から右へ順に並べられて表示されます。次の行は、前の行の下に配置されます。
vertical-rl
writing-mode: vertical-rl;
英語や日本語でvertical-rlを指定すると、テキストは上から下に向かって縦並びになり、次の行は、前の行の左側に配置されます。
日本語を縦書きにしようと思ったら、vertical-rlを指定する必要があるということですね。
※writing-modeには他にも指定できる値があり、左から右に書く言語（アラビア語等）の設定もできるのですが、今回は日本語のWebの縦書きにフォーカスしたいので、他の説明は割愛します。
text-orientation プロパティ
writing-modeプロパティで行の向きを縦書きに指定したら、次はtext-orientationプロパティで、表示される1文字ずつの文字の向きを指定します。
text-orientationプロパティは、MDN Web Docsでは以下のように説明されています。
text-orientationはCSSプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-modeがhorizontal-tb以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。
text-orientation - CSS - MDN Web Docs
mixed
text-orientation: mixed;
text-orientationの初期値です。日本語の一般的な縦書きはこの指定になります。
mixedを指定すると、漢字やひらがななどの文字は、横書きと同じ向きのままで表示されます。一方で、アルファベットや数字などは、時計回りに90度回転して表示されます。
日本語の縦書きの書籍で、英文が回転して表記されているときのような、縦向きと横向きが混在する表示ですね。
upright
text-orientation: upright;
基本的に文字を回転させず、直立して表示する指定です。
uprightを指定すると、アルファベットや数字も回転せずにそのままの向きで縦に並びます。
小学校の作文で原稿用紙を使ったときは、どちらかというとこれに近い書き方をしたと思います。
※text-orientationプロパティについても、sidewaysなど他に指定できる値がありますが、今回はWebの縦書きにフォーカスしたいので、こちらも残りは割愛します。
回転する文字、しない文字
text-orientationを、mixedとuprightそれぞれの指定で「フューチャー」と「Future」を表示してみると、こんな表示になります。
1文字ずつ見ていくと、まずアルファベットの「Future」の部分は、mixedとuprightとで、90度回転するかどうかが変わっています。
日本語の「フュ」や「チャ」はどちらの指定でも回転していませんが、その一方で伸ばし棒「ー」は、mixedとuprightどちらでも、90度回転して、横棒ではなく縦棒として表示されています。
つまり、CSSの指定だけで文字ごとの回転が決まるわけではなく、どこかに「文字ごとに、見た目が回転するかどうか」を決めている仕組みが存在するはずなのです。
改めて、MDNのtext-orientationのページを見てみると、「仕様書」のセクションがあり、CSSのWorking Grupのtext-orientationの仕様書へのリンクが貼られていました。
5.1.2. Mixed Vertical Orientations
[UAX50] defines the Vertical_Orientation property for the default glyph orientation of mixed-orientation vertical text. When text-orientation is mixed, the UA must determine the orientation of each typographic character unit by its Vertical_Orientation property: typesetting it upright if its orientation property is U, Tu, or Tr; or typesetting it sideways (90° clockwise from horizontal) if its orientation property is R.
CSS Writing Modes Level 4 # text-orientation
ここを読んでいくと、UAX50というドキュメントに文字ごとの定義がありそうですね。ということで、今度はUAX50を読んでみます。
Unicodeの縦書き指定
UAX50とは、Unicode Standard Annex #50の略称だったようです。UAX #50: Unicode Vertical Text Layoutには、Unicodeの縦書き表示に関する資料がまとまっていました。5 Data Fileのセクションによると、Unicode Character Database（UCD）のData50に実際のデータがあるようですね。
5 Data File
Starting with Version 10.0.0 of the Unicode Standard, the data file listing the Vertical_Orientation property value assignments Data50 is formally included in the Unicode Character Database UCD. (In Revisions 17 and prior of this specification, the data file was provided in versioned directories under the following stable URL: https://www.unicode.org/Public/vertical/)
UAX #50: Unicode Vertical Text Layout
リンクを辿っていくと、最新バージョンのデータファイルVerticalOrientationに、文字コードごとに縦横変換するかどうかが、U,R,Tu,Trの4パターンで整理されていました。
- U：Upright
- 回転せずに、正立で表示される。多くの日本語の文字はUになっている
- R：Rotated 90 degrees
- 90度回転する
- Tu：Transformed typographically
- 単に90度回転するのではなく、横書きとは別の文字の見た目のデータが必要になる文字。変換できなかった場合は直立（U）にフォールバックする
- Tr：Transformed typographically
- 単に90度回転するのではなく、横書きとは別の文字の見た目のデータが必要になる文字。変換できなかった場合は回転（R）にフォールバックする
ここで定義された内容に従って、縦書きのときに文字の見た目を回転するかどうかを決めているようです。
回転したように見えるのは、Rの文字の場合、Tu・Trの文字で縦書き用に回転した文字の見た目になった場合、TrだけどRにフォールバックした場合ということになります。
ファイルの大半を占めるセクションでは文字コードやコード範囲ごとにRやUの指定がされていますが、その他にもファイルの先頭の説明部分では、私用領域やCJKで利用される領域などに関しては、個別に定義がない場合のデフォルト値をUにするなど、幅をもたせた定義になっているようです。
※CJKとは漢字文化圏の、中国語（英: Chinese）、日本語（英: Japanese）、朝鮮語（英: Korean）の文字のこと
Certain ranges of unassigned code points default to U. These ranges are mostly associated with CJK scripts and punctuation, or with a small number of other scripts which are predominantly Upright.
The private use areas also default to U, because of their most common use for CJK.
In the following list of explicit code points and ranges, all unassigned code points default to U:
逆に、上記のCJKや私用領域などの個別に範囲を指定されている領域以外の文字コード領域については、デフォルト値はRとしているようですね。
All other code points, assigned and unassigned, that are not listed explicitly in the data section of this file are given the value R.
UAX #50: Unicode Vertical Text Layout
フォントの縦書き用データ
では、日本語の縦書きでTrやTu指定の文字の場合、縦書きのときの文字の見た目（以後、グリフと表記します）は、どのようにして決まるのでしょうか。
調べてみると、OpenTypeフォントのGSUBテーブルというところに格納されている、vert（Vertical Alternates）やvrt2（Vertical Alternates and Rotation）というタグに、それぞれの文字の縦書き用のグリフがどれか、という情報が格納されているようです。
vert
Tag: 'vert'
Function: Transforms default glyphs into glyphs that are appropriate for upright presentation in vertical writing mode.
Registered features, u-z (OpenType 1.9.1) - Typography
このvertタグというところに、横書き用のデフォルトのグリフを、縦書き表示用の適切なグリフに、置き換えるための指定をするようですね。
また、vertのスーパーセットとしてvrt2が定義されています。
vrt2
Tag: 'vrt2'
Function: Replaces some fixed-width (half-width, third-width or quarter-width) or proportional-width glyphs (mostly Latin or katakana) with forms suitable for vertical writing (that is, rotated 90 degrees clockwise). Note that these are a superset of the glyphs covered by the 'vert' feature.
Registered features, u-z (OpenType 1.9.1) - Typography
'vrt2'は、'vert'のスーパーセットとして提供されていて、さらに半角英数字や半角カタカナなど、90度回転が必要な文字の置換もカバーできるタグのようです。横書き用のグリフを描画するときに回転させるのではなく、フォントが提供するあらかじめ縦書き用に用意されたグリフを定義できるのが、vrt2みたいですね。
また、以下の通りの記述があるので、フォントをつくる人はより包括的なvrt2のほうを優先して使うほうが良いようです。
The predecessor feature, 'vert', is ignored.
Feature interaction: Overrides the 'vert' (Vertical Writing) feature, which is a subset of this one. May be used in addition to any other feature.
フォントの中身を見てみよう
フォントファイルの中身と言われても実感がわかないので、今回は試しに、隅付き括弧の開き「【」の文字を例に、vertやvrt2がどのように利用されているのか、調べてみました。
「【」の文字（U+3010）は、VerticalOrientationではTrに指定されています。縦書き用の指定がされていることが期待されますね。
有名な日本語フォントNoto Sans JPをサンプルとして、フリーのフォントツールFont forgeで開いて、vertやvrt2にどんな情報が入っているのか、見てみました。
Noto Sans JPをFont forgeでひらき、隅付き括弧の開き（U+3010）の文字の編集画面（右上のダイアログ）から、エレメント > グリフ情報のメニューを開き（下側のダイアログ）、置換タブを開いた画像がこちらです。
vrt2のタグがあり、縦書き用の隅付き括弧の開き「︻」の文字（U+FE3B）の文字の見た目を変わりに使うように、という指定を見つけることができました。
※参考にさせていただいた、日本語でFont forgeでのフォント編集を解説してくれているサイト
FontForge 講座 - 縦書きについて
おわりに
今回色々調べてみたことで、Webで縦書きを表現するために、フォントや文字コード、CSSなど様々な技術や仕様が複雑に連動していることがわかりました。Webの縦書きが技術的に難しいと言われているのも納得です。
冒頭に書いた通り、この記事で縦書きに関する技術を網羅できているわけではなく、例えばCSSでrotate指定して文字を回転させたり、縦書きだと「㍿」や「㍍」のような組文字の文字の並び順が変わる仕組み、連数字の扱いなど、触れていない要素もあります。
Webの縦書きって大まかにこんな感じなんだ、というのを理解してもらえたら幸いです。