Chromeがいつの間にか縦書きを実装し始めていた

注意：ここに示したCSSは、実用的な目的には、まだ使ってはならない。何故ならば、-webkitベンダープレフィクスを使っているからである。。これは、webkitの実装がまだ完全ではないことを意味する。

Chrome（というよりもwebkit）がいつの間にか、縦書きを実装し始めていた。つまり、CSS3のwriting-modeプロパティのvertical-rlとvertical-lrをサポートしているのである。まだ、ベンダープレフィクスが必要なので、完全な実装ではないのかもしれないが、少なくとも、ある程度は動くようだ。

例えば、以下の様なマークアップが、

<p style="
writing-mode : vertical-rl ;
-webkit-writing-mode : vertical-rl ; 
font-family : '@ＭＳ 明朝' ;
font-size : 16pt ;
height : 30em ;
">
本分
</p>

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

このように、見事な縦書きになる。（Windows上のChromeで動作を確認）

ただし、現状のChromeの実装には、いくつか問題がある。まず、通常の横書きのように、word wrapがきかないという問題だ。そのため、上の例では、仕方なくheight propertyを使用している。また、フォントの問題もある。頭に@のつくフォント名は、実際のフォントではなく、Windows独自の機能である。そのため、このマークアップは、Windows以外では動かないだろう。

また、フォントの描画が、何か微妙におかしい。

禁則処理もされていないので、改行が不自然だ。その他、あらゆる日本語の組版の常識が欠けている。

そのため、この縦書きは、まるで画像を貼り付けたようにみえる。何もかもが固定、環境依存で、あまり使いやすくはない。

追記：ルビのせいで、行間がまばらになるという指摘があったので、とりあえず修正した。行間は、CSSのline-heightプロパティで修正可能である。実用的に行間を調節するには、ルビのrt要素のスタイルも調整する必要がある。ブログのようなサイトにおいて、この調整を記事単位で可能にするために、style要素のscoped属性を、早くサポートしてもらいたいものだ。

追記2:現行のChromeでは何故か、vertical-lrがvertical-rlと同じように動く。まだ不完全である。

追記3:縦書きをマルチカラムレイアウトと組み合わせてみた。本の虫: Chromeで、CSSによる縦書きとマルチカラムレイアウトの合わせ技を試す。この縦書き表示に感動した人は、これを見ると、もっと感動できるはずだ。

追記4: 青空文庫を縦書き化できるChrome extensionを作りました。青空縦書きリーダー - Google Chrome extension gallery

CSS Writing Modes Module Level 3