テキストをハコ組みする際のdivを計算して作ってみる

グラフィックデザインにおける文字組みはWebのように閲覧環境に左右されることがなく、トラッキングやカーニングによる文字間隔の調整もしやすいので、Webよりもずっと細かくデザイン設計ができます。
当然エディトリアルデザイン（雑誌や書籍などの編集デザイン）の場合はその傾向が顕著で、書籍や雑誌の誌面はかなり緻密に計算して文字を組んでいます。

グラフィックデザインでは “級（Q）・歯（H）” という単位を使って文字の大きさや文字間・行間などを設定します。QとHは写植時代からの日本固有の単位で、 1Qと1Hどちらも0.25mm です。
印刷物で文字の単位というと、一般的なのはポイント（pt）ですがプロのグラフィックデザイナーはあまりポイントでは作業しないと思います。 メートル法を長さの単位の基準にする以上、メートル法で端数となってしまうポイント（1pt=0.352778mm）では厳密な計算ができないから です。

QとHを使う場合、 文字の大きさをQ で、 文字間・行間をH で表し、たとえば「12Q0.5H詰め18H（じゅうにきゅう・れいてんごはつめ・じゅうはっぱ）」と言えば、本文Q数（大きさ）は12Qで、文字間が0.5H詰め、行間が18Hであることを意味しています。言葉で説明するよりもビジュアルで説明したほうがわかりやすいと思うので、図で表してみるとつまりはこういうことです（↓）。

ちなみに文字間を調整しない（詰めなしの）文字組みを “ベタ組み” と言います。

そして文字組みのためのボックス（箱）いっぱいに文字を流し込むことを一般に “ハコ組み” と言います。たとえば、12Qベタ組み18Hで1行あたり30文字×5行のテキストがぴったり収まるボックスを計算してみると、

• 幅は普通に 12（Q）×0.25（mm）×30（文字数）=90mm
• 高さは少し考えて 18（H）×0.25（mm）×4（行数）＋12（Q）×0.25（mm）=21mm

となります。IllustratorやInDesign、QuarkXpressなどのレイアウトソフトで、この大きさのボックスの中にカーニングもトラッキングも設定せずに12Qのテキストを流し込めば、30文字×5行分のテキストがぴったりと収まるはずです。

さて、ここから本題。

グラフィックデザインで文字間ベタのハコ組み用テキストボックスを作るときにやるこの計算って、Webデザインにも活用できるんじゃないかと僕は思うわけです。
もちろん、ＭＳ Ｐゴシックなどのいわゆる プロポーショナルフォント を使っている場合、文字間が勝手に調整されるので意図した通りの結果にはなりませんが。

で、さっそく実験してみます。本文12pxで1行30文字、line-height:1.5で5行のテキストをハコ組みする場合のdivの大きさは、上記の計算式に従うと、

• 幅が 12（px）×30（文字数）=360px
• 高さが 12（px）×1.5（line-height）×4（行数）＋12（px）=84px

となります。しかし、line-heightの場合はグラフィックデザイン（DTP）でいう行間とは少し違って、 行間が上下均等に割り当てられる点に注意 。文字が12pxでline-height:1.5の場合の行間は6pxですが、これが3pxずつ上下に割り当てられます。

だからこの場合、ボックスの上側に3px分スペースが生じるので3px分高さが足りなくなります。文字をボックス内に収めるためには84pxにこの3px分を加える必要があるので、

• 高さ 12（px）×1.5（line-height）×4（行数）＋12（px）＋3（px）=87px

となります。

さらに本文14px、本文16pxでも同様にベタ組みで1行30文字×5行のボックス（div）を作ってテキストを流し込んでみると次のキャプチャのようになります。

ＭＳ Ｐゴシックの場合（Windows XP・Firefox 3）

前述の通り、ＭＳ Ｐゴシックはプロポーショナルフォントなので文字間が勝手に調整されます。従ってベタ組みにはならず、幅360pxのdivの1行には30文字よりも少し多くの文字が入ります。まあ、大雑把に1行だいたい30文字という目安にはできるかな、と思います。
一方、5行分の行の高さについては計算通り、文字がぴったり収まるギリギリの高さになっています。

ＭＳ ゴシックの場合（Windows XP・Firefox 3）

等幅フォントのＭＳ ゴシックの場合は計算通りきれいにぴったり1行30文字になります。
text-align:leftのボックスなのに、ジャスティファイがかかっているかのように右端もほぼぴったり揃っています。これぞベタ組みです。

メイリオの場合（Windows XP・Firefox 3）

メイリオも等幅フォントなので計算通りきれいにぴったり1行30文字。

ヒラギノ角ゴ Pro W3の場合（Mac OS X・Firefox 3）

Mac OS X標準フォントのヒラギノ角ゴも等幅フォントなので計算通りぴったり1行30文字。

例文はすべて全角文字ですが、文章中には半角英数字が含まれている場合も考えられます。
半角文字は全角文字より文字幅が短い（また、等幅フォントの場合でも半角英数字はプロポーショナル扱いである場合がほとんどです）ので、上のボックス内に半角文字が含まれたテキストを流し込んだ場合は、当然想定したよりも多くの文字がボックス内に収まることになります。

その結果、等幅フォントであってもtext-align:leftの場合は、上のキャプチャのようにボックスの右端と文字のツラがぴったり揃う可能性は低くなります。CSSのtext-alignやtext-justifyプロパティを使ってdivの幅ピッタリにテキストの左右を合わせることも可能ですが、 text-justifyはSafariには効かない し、無理にテキスト幅を揃えようとすると文字間がすごく開いてしまうなど不自然な文字組みになってしまうことが多々あります。
このへんの細かい文字間の調整は残念ながらWebではできません。致し方ない。

将来的にはtext-alignやtext-justify、letter-spacingなどのCSSプロパティで、Webでももっと柔軟な日本語の文字組みが可能になるかもしれません。が、今現在Webで文字組み用のボックスを計算するとしたら、こんなところではないかな、と。

結論を言うと、何も考えずに文字組み用ボックス（主にdiv）の幅を決めるよりはマシかもな、という程度のお話です。
が、何も考えないでボックスを作るよりは、 テキストを流し込むボックスの幅は文字の大きさの倍数 というのを指標とすると値を決めやすいかもしれません。

ちなみに グラフィックデザイナー・工藤強勝氏監修の書籍『デザイン解体新書』（2006年・ワークスコーポレーション） は文字組みに関する入門的な基礎知識から雑誌・書籍のレイアウトデザインまで詳細に解説された良書で個人的にお薦めです。
Webデザインの場合、本文の文字組みについてはあまり深く考える必要がない（考えても仕方ない）かもしれないけれど、知識として文字組みの基本的なルールを知っておくのは悪くないはず。

最近はDTPやってる人もレイアウトソフト上で「何となく」文字組みをやっちゃっていて、基本をしっかり身につけていない人が多いような気も・・・。デザインセンスやバランス感覚とはまた少し違う理屈の部分ではあるけれど、デザインのプロであるならば最低限の知識は身につけておきたいところです。 他人の作った “フォーマット” をコピーしてレイアウトしてるだけ では・・・ね。