Chromeで、CSSによる縦書きとマルチカラムレイアウトの合わせ技を試す

CSS Multi-column Layout Module

CSS3には、マルチカラムレイアウトが規定されている。これは、縦書きと組み合わせることができる。例えば、以下の様なCSSを使うと、

<div style="
    column-width: 15em ;
    column-gap: 2em ;          
    column-rule: thin solid black ;
    -webkit-column-width: 15em ;
    -webkit-column-gap: 2em ;
    -webkit-column-rule: thin solid black ;

    writing-mode : vertical-rl ;
    -webkit-writing-mode : vertical-rl ;
    font-family : '@ＭＳ 明朝' ;
    font-size : 16pt ;
    line-height : 2em ;

">
<p>
本分
</p>
</div>

以下のように表示される。

　趙（ちょう）の邯鄲（かんたん）の都に住む紀昌（きしょう）という男が、天下第一の弓の名人になろうと志を立てた。己（おのれ）の師と頼（たの）むべき人物を物色するに、当今弓矢をとっては、名手・飛衛（ひえい）に及（およ）ぶ者があろうとは思われぬ。百歩を隔（へだ）てて柳葉（りゅうよう）を射るに百発百中するという達人だそうである。紀昌は遥々（はるばる）飛衛をたずねてその門に入った。
　飛衛は新入の門人に、まず瞬（またた）きせざることを学べと命じた。紀昌は家に帰り、妻の機織台（はたおりだい）の下に潜（もぐ）り込（こ）んで、そこに仰向（あおむ）けにひっくり返った。眼（め）とすれすれに機躡（まねき）が忙しく上下往来するのをじっと瞬かずに見詰（みつ）めていようという工夫（くふう）である。理由を知らない妻は大いに驚（おどろ）いた。第一、妙（みょう）な姿勢を妙な角度から良人（おっと）に覗（のぞ）かれては困るという。厭（いや）がる妻を紀昌は叱（しか）りつけて、無理に機を織り続けさせた。来る日も来る日も彼（かれ）はこの可笑（おか）しな恰好（かっこう）で、瞬きせざる修練を重ねる。二年の後（のち）には、遽（あわた）だしく往返する牽挺（まねき）が睫毛（まつげ）を掠（かす）めても、絶えて瞬くことがなくなった。彼はようやく機の下から匍出（はいだ）す。もはや、鋭利（えいり）な錐（きり）の先をもって瞼（まぶた）を突（つ）かれても、まばたきをせぬまでになっていた。不意に火（ひ）の粉（こ）が目に飛入ろうとも、目の前に突然（とつぜん）灰神楽（はいかぐら）が立とうとも、彼は決して目をパチつかせない。彼の瞼はもはやそれを閉じるべき筋肉の使用法を忘れ果て、夜、熟睡（じゅくすい）している時でも、紀昌の目はカッと大きく見開かれたままである。ついに、彼の目の睫毛と睫毛との間に小さな一匹（ぴき）の蜘蛛（くも）が巣（す）をかけるに及んで、彼はようやく自信を得て、師の飛衛にこれを告げた。

これも、Windows上のChromeで動作を確認した。これは、私が手動で罫線を挿入したのではない。ブラウザーが自動でマルチカラムレイアウトを計算しているのである。

ただし、現在のwebkitにおけるマルチカラムレイアウトの実装は、かなり不完全である。他のCSSプロパティとの組み合わせがうまく動かないし、ボックスモデルの計算もかなりおかしい。特に、縦書きと組み合わせて、長い文字列を描画させた際に、描画がうまくいかなくなる。そのような未熟な実装だからこそ、まだベンダープレフィクスが必要なのだろう。