[ 縦書き ] 行の文字数を揃える。

PC版へ 2011年02月11日

縦書きCSSに関して、質問をいただきました。

自動改行はできないのでしょうか？ 1センテンスが長いと、もの凄く縦長になってしまうのです。

結論から書きますと、うちの縦書きスタイルシートを使う場合、残念ながら自動改行(=決められた文字数、あるいは高さで自動的に折り返す)は出来ません。

縦書きCSSを使った縦書きレイアウトは、htmlソースで見ると、

というかたちになります。1行めの高さ(長さ)と2行めの高さ(長さ)を合わせるには、1行めの<div class="tate-line">〜</div>と、2行めの<div class="tate-line">〜</div>の内部の文字数を同じにするしかないのです。

ほんとは「見栄えの制御はすべてスタイルシートで」というのが作法的にも作業的にも美しいのですが、こればっかりは、1行あたりの文字数を物理的に合わせるしかありません。

手作業で文字数を数えるのは大変なので、コチラの横書き→縦書き変換スクリプトを使ってみてください。文字通り「横書きテキストに縦書きCSSを適用してhtmlコードを吐き出す」スクリプトです。一行あたりの文字数指定も出来ます。

横書きだったら、ボックスの幅を固定してやれば、その幅で勝手に折り返してもくれるのですが、

[ htmlソースの例 ]

<div style="width:12em;border: solid 1px red;">
たぶんこれで、全角12文字くらいで行が折り返されるはずですよ。
</div>

[ その表示例 ]

たぶんこれで、全角12文字くらいで行が折り返されるはずですよ。

高さに関しては、ボックスの高さを固定しても、デフォルトの動作では、溢れた分がはみ出して表示されるか、ボックスの高さが自動的に拡張されます。

[ htmlソースの例 ]

<div style="height: 1em; width:12em;border: solid 1px red;">
ボックスの高さを　1文字分にしてみました。
</div>

[ その表示例 ]

ボックスの高さを　1文字分にしてみました

というわけで、tate-area あるいは tate-line の高さを固定しても、その中身がスタイルで設定した高さをオーバーしてしまえば、その行はどこまでも下に伸びていってしまうのです。

横書きが基本の世界で、縦書き(に見える)レイアウトを実現させてみよう…という、ちょっと無茶なことをやっているので、このCSSを使うときにも、ちょっと面倒な作業が付いてまわってしまいます。

ちなみに青空文庫を縦書き表示でも、行の高さを揃えるために、文字数をカウントして分割 → 文字数を揃えた文字列を、それぞれ tate-line に当てはめる…という作業を行っています。