Follow Us.RSS

2010年5月14日(金)縦書きWeb、再び

  • 今回リリースした「CMONOS.JP」の最新版では縦書き表示機能が強化されました。ルビや傍点にも対応しています。また、縦書き体験を広げるため、既存ホームページを縦書き表示する「竹取 Web」を公開しました。

  • (2010年5月15日(土) 午後2時2分25秒 更新)
  • このエントリーをはてなブックマークに追加
    BuzzurlにブックマークBuzzurlにブックマーク

CSS による縦書き表示の現状


CSSで縦書き表示を実現するプロパティ﹁writing-mode﹂については、CSS第三水準として以前から提案されいましたが、実際にこれを実装しているのはInternetExplorer5.5以降に留まっています。
ところが、最近になって新しい動きがあり、2010年5月5日、W3Cにおいて、縦書き関連の新しいEditor's Draftが公開されました。
︵︻追記︼CSSを利用するEPUBで縦書きを実現するためW3Cに対して働きかけがあったそうです。なるほど！︶
ただ、この新しいEditor's Draftでも、IEが先行して実装していた﹁block-progression﹂が﹁block-flow﹂に変更されるなどしています。
確かに﹁block-flow﹂の方が、より挙動を想像しやすい名前ですね。
ひょっとすると最終的に﹁writing-mode﹂の採用は見送られ、﹁direction﹂プロパティと﹁block-flow﹂プロパティの組み合わせで縦書きを表現することになるかもしれません。︵︻追記︼そんなことはなさそうです︵汗︶。︶
いずれにせよ、仕様が未だ定まらない現状を考えると、FirefoxやChorome、Safari、Operaなどで、CSS3による縦書きが可能となるにはまだしばらくかかるものと思われます。
縦書きを実現する仕様がなかなか実装されない要因としては
●約物やルビなど日本固有の処理が必要となること。
 ●縦書きを必要としている文化圏が少ないこと。
などがあるでしょう。
また、縦スクロール中心の横書きを前提としたインターフェイスに、横スクロール中心の縦書きブロックが出現するのは何かと混乱する、ということもありそうです。
話がそれますが、その点で、CSS第三水準の﹁multi-column﹂は縦書きにこそ役立つ気がします。
横書きでマルチカラムを使用する場合、一段がウィンドウの高さより長くなると、縦スクロールを行ったり来たりしなければならない可能性があり、ウェブページに向かない側面があります。
でも、縦書きの場合は、マルチカラムを使うことによって横スクロールをなくすことができますから、主要ブラウザ全てに縦書き関連プロパティが実装された暁には、﹁multi-column﹂が、縦書きを横書きベースの画面とうまくなじませるための必須プロパティとなるかもしれません。

日本語はやっぱり縦書き！


IT技術関連の文章が横書きでなければ読みにくいのは確かです。
でも、縦書きで読みたい日本語はやっぱりあります。特に詩や短歌などは、縦書きでなければ情感が伝わらないように思います。
そこで、今回﹁CMONOS.JP﹂の縦書き表示機能を強化しました。
また、﹁CMONOS.JP﹂の縦書き変換モジュール﹁竹取2﹂を利用した縦書き変換ツール﹁竹取Web﹂を公開しました。﹁竹取Web﹂スクリプトをダウンロードして自分のサイトに設置することもできます。
それにしても、青空文庫は本当に縦書き表示が似合いますね。
たとえば、中島敦の﹁山月記﹂など、これはもう縦書きでなければダメでしょう。
いつも楽しみにしている内田樹先生のブログもときどき漢語調の難しい言葉が出てくるので、縦書きの方が合うように思います。
見当違いの場所を縦書き化してしまう場合もありますが、けっこうちゃんと縦書き化してくれますので、いろんなサイトを縦書き化して楽しんでもらえればうれしいです。
それに縦書きが盛り上がれば、ブラウザの縦書き関連プロパティ実装も加速するのではないでしょうか。需要はきっとあるはずなのですが…。
ところでタイトルを﹁縦書きWeb、再び﹂としたのには理由があります。
実はずっと昔に同じような縦書き化CGIを配付していたことがあるんですね。でも今度の﹁竹取2﹂は、ル(ふり)ビ(がな)や傍点に対応するなど、かなり進化していますよ。
最後にそのあたりをちょこっとご紹介します。

中島敦の「山月記」を「竹取 Web」で縦書き表示したところ。

スタイルを無効化すると横書きに。

スタイルを無効化すると横書き表示になります。

スタイルを保とうとしないブラウザではテキストのコピー＆ペーストが可能。

コピー時にスタイルを保とうとしないブラウザではテキストのコピー＆ペーストが可能。IEやSafariでは、一文字ごとに改行されてしまいます。テキストをコピーするとき、できるだけスタイルを保とうとするのはなぜなんでしょう...。じゃまなときの方が多いんですが...。

縦書きにもある程度スタイルを適用できます


style属性にスタイルを指定することで、縦書き変換後にもスタイルを反映させることができます。
中央揃え
大きな字、小さな字、
強調
下線→傍線。
上線→左側に傍線。
上線・下線→両側に傍線。
右寄せ→下寄せ
リンクに背景色と余白を設定。
画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。
画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。画像の回り込み。
約物のうち﹁ー﹂や﹁〜﹂については、IEでは﹁writing-mode:tb-rl;﹂を指定し、他のブラウザ向けには﹁transform:rotate(90deg) scale(1.0,-1.0);﹂と指定して、90度回転させた上で左右反転しています。
前回、長音符の扱いが難しいと書きましたが、いつの間にかCSS3で解決できるようになっていました！
これ↓は<hr>。ちなみに矢印は時計回りに90度回転します。

<ul>もある程度再現します。
●リストです。リストです。リストです。リストです。リストです。リストです。
 ●リストです。
●入れ子のリストです。
 ●入れ子のリストです。
 ●リストです。
<ol>もある程度再現します。
(一)リストです。リストです。リストです。リストです。リストです。リストです。
 (二)リストです。
(一)入れ子のリストです。
 (二)入れ子のリストです。
 (三)リストです。
<dd>は字下げされます。
竹取
 縦書き化ツールです。
 CMONOS.JP
 カスタムフィールドCMSです。
いかがでしたか？　そこそこ表現力があるのではないでしょうか。より詳しくはマニュアルをご覧ください。
あくまでも主要ブラウザが縦書き関連CSS3を実装するまでのつなぎでしかありませんが、小説や詩を発表したいとき、あるいは、和のブランドイメージを大切にしたいとき、お役に立てるのではないかと思います。

【追記】検索エンジンにもひっかかるようです。

ちょっと心配だったのですが、検索エンジンにもちゃんと読めるようです。

検索エンジンにもひっかかります。

更新情報

最近の記事

RSS

カレンダー

2010年5月
日月火水木金土
1
2345678
9101112131415
16171819202122
23242526272829
3031
2010年4月
日月火水木金土
123
45678910
11121314151617
18192021222324
252627282930
このページのトップへ