2011-03-18

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 : '@MS 明朝' ;
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

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.