縦書きでは、揃える方向が入れ替わる
背表紙の文字が中央に来ませんでした。原因は、縦書きにしたことで軸の意味が90度回っていたことです。
紙の本のカバーを、HTML と CSS で作っています。表4・背・表1を1枚に並べた PDF を生成する形です。日本語の本なので本文も表紙も縦書きにしています。
背表紙の文字が中央に来ない
生成した PDF を見ると、背表紙の書名が中央ではなく片側に寄っていました。CSS には中央揃えの指定が入っています。指定は効いているのに、結果が中央ではありません。
原因は、縦書きにすると軸の意味が入れ替わることでした。横書きでは、文字が流れる方向が横で、行が積まれる方向が縦です。縦書きにすると、文字が流れる方向が縦になり、行が積まれる方向が横になります。CSS の並べ替えの指定は、この論理的な軸を基準にしています。
つまり、横書きのつもりで「交差軸の先頭に揃える」と書いた指定は、縦書きでは横方向の端に揃えるという意味になります。中央揃えのつもりで書いた「先頭揃え」が、そのまま端寄せとして効いていました。中央にする指定へ直したところ、意図どおりになりました。
似た罠がもう1つありました。文字の揃えと余白の自動配分を組み合わせる、横書きでは定番の中央揃えの書き方です。縦書きでは横方向の中央揃えにならないため、並べ替えの仕組みを使う形に書き換えました。
1冊で見つけたら、全部にあった
この誤りは、最初に見つけた1冊だけの問題ではありませんでした。同じ作りの他の本にも、同じ指定がそのまま入っていました。カバー生成のコードを複製して使い回していたためです。
1冊直して終わりにせず、同じ指定を全冊で検索して直しました。複製から始まったコードは、バグも複製されているという前提で探すほうが早く済みます。
画面では気づけない種類の誤り
この問題は、ブラウザでプレビューしているあいだは目立ちませんでした。カバーは印刷用の実寸で作るため、画面では縮小して見ています。数ミリのずれは、縮小表示では気づけません。PDF にして原寸で確認して、初めて分かりました。
印刷物には、画面の仕事には無い制約が並びます。実際に扱っている数値を挙げます。
- 背幅はページ数で決まる。 用紙の種類ごとに1ページあたりの厚みが決まっていて、それを掛けて算出する。紙の色が違うだけで数値が変わる
- ページ数が少ないと、背表紙に文字を入れられない。 薄い本は背が細すぎて印刷できないため、下限が決められている
- 背の端から文字までの余白にも下限がある。断裁の誤差を吸収するため
- 裁ち落とし（断裁で切り落とされる余分）を外周に付ける。ここに文字が入ると切れる
安全余白は、規定の下限より厚く取っています。下限ぎりぎりに設計すると、断裁が数ミリずれただけで文字が切れます。規定を満たすことと、仕上がりが無事であることは別です。
学んだこと
縦書きは「横書きの文字を縦に並べたもの」ではありません。レイアウトの座標系ごと回転しているので、横書きの経験がそのままでは通用しない箇所が出ます。中央揃えのような基本的な指定ほど、無意識に書いてしまうぶん危険でした。
縦書きのレイアウトを組むときは、指定を「上下」「左右」で考えず、文字が流れる方向と行が積まれる方向で考えると間違えにくくなります。
この記事の元
この記事は、書籍のペーパーバック版カバーの制作で実際にやったことから書き起こしています。 方針そのものは運営方針にまとめています。