Follow Us.RSS

2010年11月25日(木)ついに WebKit が縦書きの実装に着手!

  • 縦書き CSS の仕様が固まりつつあることを受けて、最新の WebKit Nightly Build がついに縦書きを実装しました。まだまだ実験的な実装ですが、WebKit が縦書きをサポートする意志を明らかにしたことの影響はかなり大きいと言えるでしょう。

  • (2010年11月25日(木) 午前8時58分35秒 更新)
  • このエントリーをはてなブックマークに追加TweetBuzzurlにブックマークBuzzurlにブックマーク

仕様が固まりつつある縦書き関連 CSS

ご存知でしたか? 今年はウェブ上の縦書きが大きく動いた年だった、ということを!

何度目かの電子書籍ブームとなった今年、CSS3 や EPUB3 の仕様策定に関わったさまざまな人の尽力によって、近未来のウェブや世界中の電子書籍端末で、縦書きを含めた美しい日本語表示が可能となる確かな道筋が見えて来ました。

この辺りの最新事情については、ぜひ現場におられる方々の報告をお読みください。

この10年まったく動かなかったことが、突然力強く動き出したことに、心底わくわくします。関係者の皆様の、未来を見据えた確固たる意志、粘り強い交渉、そして行動力には、本当に頭が下がります。

特に今回わざわざ来日して CSS3 Writing Modes ドラフト仕様 作成に多大な貢献をされた Elika J. Etemad 氏 (@fantasai) には、日本語を母語とする人間として心から感謝いたします。

なんでもほとんど手弁当状態でこれだけの仕事をされたとのことです。なんとか労に報いることができればいいのですが...。

さて、こうした熱意を受けて、この秋、とうとう WebKit に縦書きが実装されました。既に InternetExplorer には古い Editor's Draft を元にした縦書きが独自実装されていますから、WebKit が縦書きを実装する意志を明確にしたことで、ウェブに縦書きがやってくるのはほぼ確実となりました。

これからは日本語を使う立場からの具体的なフィードバックや支援が、ますます重要になってくることでしょう。

WebKit の縦書きとルビの実装に使われた参照画像。開発している方の趣味がわかるような...(笑)。

WebKit Nightly Build で縦書きを試してみよう!

せっかくなので、WebKit Nightly Builds で縦書きを試してみましょう! 縦書き指定はとても簡単です。縦書きにしたい要素(ここでは div#tate)に対して、次のように指定するだけ。

div#tate {
-webkit-writing-mode: vertical-rl;
}

InternetExplorer 向けの記述を追加すると次のようになります。期待を込めて他のブラウザ用の記述も書いておきました。

div#tate {
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
-moz-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
}

縦中横(ここでは span.tcy)は次のようにするとよいでしょう。

span.tcy {
-ms-writing-mode: lr-tb;
writing-mode: lr-tb;
-moz-writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-o-writing-mode: horizontal-tb;
}

で、下図は、竹取JS のページを「-webkit-writing-mode: vertical-rl;」で表示したところです。

うーん、なんだかいろいろおかしいですね。特にスクロールが必要になると、スクロール位置がおかしくなってしまい、全体を表示できません。また、<pre> では英字列が横倒しにならないようです。マルチカラムの指定も試してみましたが、まったく表示できませんでした。WebKit の縦書き実装は、まだまだ実験的な段階にあるようです。

縦書きと方向指定の悩ましい関係

ところで上のスクリーンショットを見て、何か気づきませんでしたか。「竹取JS」による縦書き化と見比べてみるとわかりやすいかと思いますが、余白が少し読みにくいかんじですよね?

実は、「-webkit-writing-mode: vertical-rl」を当てただけでは、段落(<p>)やヘッダ(<h1-6>)の前後の余白がなくなって、つまった感じになってしまいます。そのかわり上下に余白ができます。また、概要やブックマークレットへのリンクに使われている区切り線も本来は項目の間にあるべきですが、右側線になっています。

これは読む方向に関わらず物理的な方向指定(*-top,*-right,*-bottom,*-left)は堅持される、という CSS の原則によるものです。

しかしこれでは、縦書きに合わせて CSS を記述すると、縦書きをサポートしない環境では読みにくい表示になり、逆に横書きに合わせて CSS を記述すると、縦書きを指定したときにこれまた読みにくい表示となってしまいます。

現在この問題を解決するため、二つの方法が議論されているそうです。

一つは、上下左右(*-top,*-bottom,*-left,*-right)の物理的方向指定に加えて、前後頭末(*-befor,*-after,*-start,*-end)という論理方向指定を導入する案です。

もう一つは、書字方向に合わせて方向の定義(どちらを上、左とするか)を変える案です。縦書きの場合、方向指定が90°回転することになります。

竹取JS では、既存ページの縦書き化を目的としているため、後者の90°回転方式を採っていますが、90°回転方式では、方向の意味と実際の乖離(topが右になる)や他のCSSとの整合性が保てない問題などが指摘されています(IEの独自実装では回転しない。右から左に読む横書きでは左右反転して right が left になるべき?)。

一方前者の論理方向方式については、プロパティが増えることへの懸念が指摘されています。

いずれの方式にも一長一短ありますが、縦書きにとってとても重要な議論なので、注視していきたいです。

今定められつつある縦書きを含む CSS3 の仕様は、今後全世界の開発者が参照するものとなることでしょう。今現在存在する実装だけでなく、将来登場するソフトウェアの設計に大きな影響を与えるにちがいありません。

私には日本語組版に関する知識がありませんので見守ることしかできませんが、将来世代も納得の、よりよい仕様に仕上がればいいなあと思います。こうしている今も、錚々たる実力の持ち主が集まってがんばってくださっているのが本当に頼もしいですね!

竹取JS」でページの一部を縦書き化している例(くわしくはこちら)。こんなふうに JavaScript を使ったりしなくても、手軽に縦書き表示を組み込める日ももうすぐです!

コメント

おじいさん-ニッコリ

貴腐

ありがとう!やで見る

路人 (2012年5月30日(水) 午後2時57分50秒)

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | ウェブにも縦書きを!「竹取JS」公開

2010年7月5日 ... JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「Web」につづく縦書き応援企画第2弾です。中国語と韓国語の縦書き化にも対応し ています。
https://cmonos.jp/blog/2010070500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 日中韓ウェブをまるっと縦書き化

2011年9月14日 ... 既存ウェブサイトをどんどん縦書き化する無料ウェブサービス「竹取Web」が UTF-8 化。 中国語やハングルも文字化けせずに縦書き化できるようになりました。
https://cmonos.jp/blog/2011091400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 簡単スマートフォン対応

2012年1月6日 ... iPhone や Android 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも縦書き化できます。 あらかじめブックマークレットを登録し ておけば、縦書きしたいページを表示してから、ブックマークを開き、 .
https://cmonos.jp/blog/2012010600/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 導入事例の裏側大公開!「東龍」様 編

2010年11月25日 ... また「東龍」様の新しいサイトでは、竹取JSを利用して、一部縦書き表示となっています。 京都という立地や、東アジアを意識したデザインにぴったりマッチしていますね! 竹取JS は処理が重いことが難点ですが、この程度の長さの文章であれ ...
https://cmonos.jp/blog/2010112500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書き文庫の「涅槃」がすごい!

2010年4月23日 ...縦書き文庫さんが公開している MIT ライセンスの縦書き組版エンジン「涅槃」がとてもよく できていました。JavaScript で手軽に組み込めるのがいいですね!
https://cmonos.jp/blog/2010042300/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きもできるアクセスカウンター

2008年9月12日 ... CMONOS.JP のアクセスカウンターには、縦書き画像も用意されています。もちろん 自作の画像で縦書き画像を作成することも可能。GIF画像の特性を活かして毎回色を 変えられるなど、ユニークな機能がたくさんありますよ...
https://cmonos.jp/blog/2008091200/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きのススメ

2011年2月1日 ...WebKit への縦書き実装が着実に進み、ウェブ上で縦書きが読める日ももうすぐです。 そこで今から縦書きウェブの予習をしておきましょう。
https://cmonos.jp/blog/2011020101/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きWeb、再び

2010年5月14日 ... 今回リリースした「CMONOS.JP」の最新版では縦書き表示機能が強化されました。ルビ や傍点にも対応しています。また、縦書き体験を広げるため、既存ホームページを縦書き 表示する「竹取 Web」を公開しました。
https://cmonos.jp/blog/2010051400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | サイト丸ごと携帯対応「cmonos.m」

2011年2月1日 ... iPhone や Android 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも .... JP | 開発者ブログ | サイト丸ごと携帯対応「cmonos.m」 . 2011年2月1日 ... 2011年9月14日 ... iPhone や Android 携帯でも縦 ...
https://cmonos.jp/blog/2011020100/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | iPhone から画像をアップロードしよう

2011年4月26日 ...竹取Web」は、JavaScript 非依存なので、iPhone など非力な環境でも縦書き化でき ます。 ... 一行文字数や文字サイズを調整したブックマークレットを作りこんでおけば、 iPhone などでも読みやすい縦書き表示でサイトを閲覧できるのではない ...
https://cmonos.jp/blog/2011042602/1.shtml

更新情報

最近の記事

RSS

カレンダー



[日]
[月] 1
[火] 2
[水] 3
[木] 4
[金] 5
[土] 6

[日] 7
[月] 8
[火] 9
[水] 10
[木] 11
[金] 12
[土] 13

[日] 14
[月] 15
[火] 16
[水] 17
[木] 18
[金] 19
[土] 20

[日] 21
[月] 22
[火] 23
[水] 24
[木] 25
[金] 26
[土] 27

[日] 28
[月] 29
[火] 30
[水]
[木]
[金]
[土]

最近のコメント

RSS

最近のトラックバック

RSS

このページのトップへ

© CMONOS Co. Ltd.


PC 向けページに移動する