CSSのwriting-modeは縦書きの飾りにせず読ませる範囲と横書きへ戻す条件を決める

CSSのwriting-modeは、文字を縦に見せる飾りだけの指定ではありません。文章が並ぶ向きと、blockが積み重なる向きを変える指定です。見出し、短い銘、書名のように縦書きが内容を支える場所では使えますが、問い合わせ、料金、手順、長い説明まで一律に縦書きへ替えると、読者が比較や操作をしにくくなります。まず、縦書きで読ませる範囲と、横書きへ戻す条件を決めます。

CSS Writing Modes Level 3は、左から右、右から左、横書き、縦書きなどのwriting modeを扱います。writing modeはwriting-mode、direction、text-orientationと関係し、文字の並びとblock flowの向きに影響します。つまり、文字だけを90度回転する設定とは違います。幅、高さ、余白、画像、link、table、mobile画面の確認まで必要になります。

縦書きにする文章と操作する情報を分ける

縦書きが合うのは、短い題名や、読ませる順序をゆっくり作りたい文章です。たとえば、和風の商品名、季節の挨拶、展示の題名のように、縦に並ぶこと自体が内容の印象を助ける場合があります。一方、電話番号、URL、価格、日付、受付時間、formの説明は、読者が探し、比較し、入力する情報です。見栄えより、読み取る速さと間違えにくさを優先します。

説明用の仮例として、催しの案内pageを考えます。pageの題名だけを縦書きにし、日時、会場、申込み方法は横書きにすると、題名の雰囲気と手続きの読みやすさを分けられます。反対に、日時や電話番号まで縦書きの中へ入れると、数字を追う方向が分かりにくくなります。縦書きにする要素を小さな範囲へ限る方が、読者は必要な情報を見つけやすくなります。

縦書きにした見出しの下に横書きの本文を置く場合も、二つを同じ文章の一部として扱わない方がよいでしょう。見出しが何を示し、本文がどこから始まるかを、余白、見出しの階層、文字量で明らかにします。縦書きの見出しだけが目立ち、本文の入口が分からなくなれば、装飾が案内を邪魔します。

縦書きは日本語だけの問題でもありません。本文に英字のservice名、mail address、URL、商品番号、数字が混ざることがあります。どの文字を縦の流れに沿わせ、どの文字を横向きに見せるかは、text-orientationの扱いとも関係します。文字が表示できるかだけでなく、読者が意味を取り違えず読めるかを見ます。

writing-modeとtext-orientationの仕事を分ける

writing-modeは、文章の流れる向きとblockの積み重なり方を決めます。text-orientationは、縦書きの中で文字をどの向きに置くかに関係します。二つを一緒に変えてしまうと、どちらが文字の向きやlayoutへ影響したのかを調べにくくなります。まず文章の流れを決め、次に混在する文字が読めるかを確認します。

短い英字や数字を含む見出しでは、縦書きの見え方が意図と違う場合があります。CSSの画面だけで直そうとする前に、そもそも英字を縦書きの題名へ入れる必要があるかを考えます。サービス名を本文で正式に示し、見出しは日本語の短い語にする方が、読者が読みやすい場合もあります。codeで無理に整形することと、文章を整えることは別です。

directionは、左から右、右から左というinline base directionに関係します。言語の方向を見た目の都合だけでCSSから上書きするものではありません。W3Cの仕様は、HTMLの文書では方向性を伝えるmarkupの機能を使い、CSSで上書きしないよう勧めています。日本語のpageへ外国語の住所や引用を載せる場合も、文字を回転させて見せる前に、元の表記と読む順序を守ります。

たとえば、英語のcompany nameを縦書きのside titleへ置くとします。文字を一文字ずつ縦に並べるのか、横向きの単語として扱うのかで、読み方は変わります。logoを画像で置くのか、textとして読む必要があるのかでも判断は異なります。designの意図だけで決めず、search、copy、screen reader、更新作業に必要なtextをどこへ残すかを確認します。

desktopだけでなくmobileで読む順を確かめる

縦書きは、広いdesktop画面では余白の一部として収まっても、mobileでは本文を狭くすることがあります。小さな画面で縦書きのcolumnを残すと、本文の幅が足りない、横scrollが出る、linkが押しにくいといった問題が起きます。desktopの見本だけで採用せず、最初からmobileで横書きへ戻す条件を決めます。

確認するのは画面幅だけではありません。タイトルが二行以上になったとき、文字数が増えたとき、英数字を含むとき、fontの読込みに失敗したとき、拡大表示したときも見ます。短い仮の題名で収まっていても、公開直前に長い固有名詞へ替わればlayoutは変わります。画像のように固定した文字ではなく、後で増減する文章として試します。

mobileで横書きに戻すなら、縦書きのために指定した幅、高さ、余白、positionも一緒に見直します。writing-modeだけを解除しても、縦書き用の固定寸法が残れば本文を押し下げることがあります。変更するstyleを一か所へまとめ、desktop用とmobile用で何を戻すかを書き出します。

制作を頼む場合には、「縦書きにしてください」だけでは判断できません。会社側は、縦書きにする文言、横書きへ戻す画面幅、英数字の扱い、更新時に文字数が増える可能性を渡します。制作側は、対象page、PCとmobileの確認画面、変更したCSSを返します。見た目を作る人と、文章を替える人が違うなら、どちらが縦書きの適用範囲を決めるかも明らかにします。

読めない場合は縦書きを外す

縦書きは、すべてのbrowserやfontで同じ印象になるとは限りません。対応状況を細かく追うことより、読めない場合に横書きの内容へ戻れるようにしておく方が重要です。本文そのものを画像化して縦書きにすると、文字を選べず、更新や拡大もしにくくなります。必要な文章はHTMLのtextとして残します。

縦書きを使う範囲が小さければ、問題が起きたときに横書きへ戻す判断もしやすくなります。header全体やmain全体を一度に縦書きへ替えると、menu、form、table、error messageまで影響します。まず一つの見出しや紹介文で試し、読者が本文へ進めるかを確かめます。効果を狙ってpage全体へ広げる前に、対象を限定します。

最初の一手は、縦書きにしたい文章を一つ選び、その横に「横書きでは伝わらない理由」を書くことです。理由が題名の印象だけなら、その題名を読んだあとに必要な情報を横書きで示せるかを確認します。writing-modeは文字を回すためではなく、文章の流れを設計するために使います。