2011-03-19

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 : '@MS 明朝' ;
    font-size : 16pt ;
    line-height : 2em ;

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

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

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

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

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

No comments:

Post a Comment

You can use some HTML elements, such as <b>, <i>, <a>, also, some characters need to be entity referenced such as <, > and & Your comment may need to be confirmed by blog author. Your comment will be published under GFDL 1.3 or later license with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.