縦書きテキストウェブってどうしたらいいですか？
この記事は、「AIへの質問を公開記事のつもりで書けば、文脈が伝わりやすくなって回答の質が上がるのではないか」というアイデアで書かれました。
あまねけ！では、lilyカテゴリの多くの記事（縦書き表示に向いている小説作品）について、「縦書きで表示」ボタンから記事を縦書きで表示できます[1]。これは主にCSSの高機能化によって実現できている挙動で、具体的には writing-mode および text-orientation を利用しています。
writing-mode を vertical-rl に設定すると、テキスト全体の向きを日本語の縦書きのように変更できます。つまり、コンテナの右側から文字を上から下に向かって配置して、コンテナの最下部まで埋まったら、前の行の左側に新しい行を配置します。スタイルシートにたった1行記載するだけで、大まかな縦書き表示を実現できるわけです。
しかし、このままではいくつか表示に問題が残ります。通常、もともと横書きでの利用を想定した文字（いわゆる半角英数記号など）を縦書きで表示したい場合は、右に90°回転させて横倒しにします[2]。これは、比較的長い英単語では読みやすく感じられる一方で、短い単語や略語なら1文字ずつ正立させて表示した方が読みやすいでしょう。
簡単な対応として、これらを全角文字に変更すれば強制的に正立させることができます。ダムなどの古い記事、または元々縦書きの印刷物やPDFで発表していた作品を移植した記事では、この効果を意図した「Ａ子」や「Ｂ子」のような全角英数字が残ったままです。ただし、この手法では横書きで表示した際に間延びした印象が強くなってしまうため、最近は text-orientation を利用して同様の表示を実現しています。
text-orientation を upright に設定すると、横書き用の文字を文字通り正立させることができます。これにより、「SNS」のようなごく短いアルファベットを含む文字列が読みやすくなります。アルファベットに限らず、半角記号類や半角スペースも正立し、特に半角スペースの見た目は全角スペース分の幅に変わります。
ただし、前述の通り全ての文字を正立させたいわけではありません。そのため、あまねけ！では、長めの英単語やイディオムに対する付与を意図した norotate というクラスで text-orientation の指定を無効化[3]しています。今のところ、本文で横倒し表示にしたい箇所については手動でマークアップしていて、一部の記号類については出力時に自動変換をかけています。
この自動変換の対象は大きく分けて2つあります。まずは半角スペースを全角幅で表示したくない箇所です。あまねけ！では、強調のためのマークアップである <em> と <strong> を記載する際に、前後に半角スペースを入れるというルールで運用しており、そのまま縦書きで表示すると本来は半角幅が空くところが全角幅になってしまうのです。現在はこれを直接 norotate な <span> で覆っています。実際のところ、全角幅で表示すべき半角スペースなんてないのかもしれませんが、影響範囲を小さく保っている状態です。
もう1つは、フォントや環境の違いによって意図した表示と90°ずれてしまう可能性がある箇所です。縦書きHTMLにおける文字の向きはどのように定まるかやUTR50（Unicode縦書きの文字の向き仕様）で注意を要する文字などによれば、その記号文字のVO属性とフォントが持つ縦書き用グリフの有無、そこにブラウザの親切心が作用して、期待外れの向きで表示されてしまうことがあります。あまねけ！で問題になったのは、text-orientation: upright; な … と ― の表示がSafari（実際の原因はおそらく縦書きグリフがないヒラギノ）のみ崩れてしまうという現象でした[4]。
このような箇所について、あまねけ！では … と ― に対する norotate の付与、つまり text-orientation を mixed にして対応しています。ただし、この設定では横書きのベースラインに合わせた … と ― を回転させているわけで、実はほんの少しだけ中心からずれているのが分かるでしょう。 upright であれば中心に揃うのですが、今度はヒラギノでの表示が横向きになってしまいます。日本語の明朝体フォントファミリーのベストプラクティス[5]を真似るか、あるいはWebフォントで明示的に設定すればどちらも解決できるかもしれません。
また、縦書き対応からは少し離れていますが、段落を一字下げるべきかどうかの判定も今のところ明示的な自動変換で行っています。あまねけ！では横書き表示において段落の字下げを行っていませんが、縦書き表示では段落 <p> に対して text-indent による一律の字下げを設定しています。このとき、括弧類 （〔［｛〈《「『【｟〘〖«〝‘“ で始まる段落は字下げの対象にならないよう、例外的に norotate を付与しています。こちらは括弧をほぼカバーできているので問題ない認識です。
なお、縦中横を実現できる text-combine-upright については、現在あまねけ！での利用箇所はありません。ほとんどの作品で漢数字を使って数値を表現しているからです。縦中横での表記が効果的な小説作品が出てきた場合は、 rensuji のようなクラスを追加するかもしれません。
結局のところ、あまねけ！の縦書き表示はこのようなチマチマした応急処置の上に成り立っていて、恒久的かつ網羅的な対応はできていません。脚注や例外的なケースでの表示が微妙なところも多く残っている中で、実験中の機能と称して3年以上誤魔化しているのが現状です。
さて、必要な質問をまとめます。
- 記号類を縦書きに適した向きで表示する信頼性の高い方法はありますか？
- 縦書き表示で全ての半角スペースを一律で横倒しにしていいと思いますか？
- CSSのみを用いて縦書き紙面のページネーションを実現することはできますか？
回答をお願いします。
AIによる回答はあんまり役に立たなかったので省略されました。
転載元の「縦書きテキストウェブってどうしたらいいですか？」はCC-BY 4.0(https://creativecommons.org/licenses/by/4.0/)でライセンスされているため、この記事についても同じライセンスが適用されます。
Discussion