Follow Us.RSS

2010年4月23日(金)縦書き文庫の「涅槃」がすごい!

  • 縦書き文庫さんが公開している MIT ライセンスの縦書き組版エンジン「涅槃」がとてもよくできていました。JavaScript で手軽に組み込めるのがいいですね!

  • (2010年4月24日(土) 午前0時56分19秒 更新)
  • このエントリーをはてなブックマークに追加
    BuzzurlにブックマークBuzzurlにブックマーク

JavaScript で縦書きを実現する日本語組版エンジン「涅槃」

MOONGIFT さんが「縦書き表記をサポートするテキストレイアウトエンジン『Nehan』」を紹介していました。

MIT ライセンス(!)で公開されている JavaScript 製日本語組版エンジン「涅槃」は、縦書き文庫さんのサービスで実際に使用されているものだそうです。

涅槃」では、禁則処理はもちろん、画像や object の回り込み、ルビの縦書き化まで実現しています。シンプルな HTML を用意するだけで、JavaScript が読みやすい縦書きに変換してくれるのがとても使いやすいですね。

気になったので、最終的に縦書きをどうやって実現しているのか、DOMツリーで見てみました。<table> タグで疑似的に縦書きにして、元の部分を置き換えているようです。ルビは専用の列を作って対応しているのですね! なるほど!!!

ちなみに、CMONOS.JP にも縦書き化モジュールは搭載されています。実はちゃんと名前があって、その名も「竹取」といいます。

縦書き文庫さんは2006年からサービスが始まっていたそうですが、「竹取」の方はさらに古く、なんと20世紀からありました(笑)。現存する縦書き化スクリプトの中では最古級の可能性も?

たしか、縦書きサービスを企画している方からの依頼がきっかけで作った気がします。すっかり記憶があやふやで、お名前も失念してしまいましたが、ご依頼主様、お元気にしてらっしゃるでしょうか(^^;。

あのころはフリーとして配付している CGI でも、ときどきお金を送ってくれる方がいました。中には万単位のお礼を送ってくださる人もいらっしゃいました。恐縮してお礼のメールを出したんですが、「あなたはそれだけの労力を払っているのだから当然です」というような返信をくださったのを覚えています。ずいぶん励みになったものです。

そういえば「ネチケット」なるものがまじめに言われてましたし、一般ユーザーにも「自分たち自身で新しい文明を立ち上げるんだ!」っていう矜持みたいなものがあって、ちょっといい時代でした(^_^)。

当時はまだ日本におけるインターネットの黎明期だったんでしょう。疑似縦書きなどインターネットの「日本化」がいろいろ試みられていたように思います。ブラウザでも縦書きやルビを実装する動きがありました。結局それほど普及せず、中途半端に終わってしまいましたが。。。

でも今は、ケータイや iPhone、iPad など、縦書き向きの端末が増えてきました (本のように手にとって扱う端末だと PC とちがって縦書きで読みたくなりそうに思うのですが、そうでもないでしょうか??)。縦書きが盛り上がるのはいよいよこれからなのかもしれませんね!

なつかしいアイコン!

思わずハードディスクの奥からひっぱりだしてきた「竹取 for McPL」。Vector の ID とパスワードをどこかへやってしまい、そのうえ当時のメールアドレスは消えてしまったので、すっかり放置しています(^^;。アイコンがなつかしいなあ...。

「竹取 for McPL」の設定画面

「竹取 for McPL」は HTML ファイルか、HTML ファイルの入ったフォルダをドラッグ&ドロップすると、縦書き HTML に変換する MacPerl ドロップレットでした。設定項目が CMONOS.JP の「縦書き」フィールドタイプとほとんど同じですね(^^;。

MacOS 9 までは、Perl で手軽に GUI つきのドロップレットが作れたので楽しかったです。

さて、そんな 20世紀生まれの「竹取」遺伝子は、今も CMONOS.JP の「縦書き」フィールドタイプに受け継がれているわけですが、「縦書き」フィールドタイプでは JavaScript を必要としない反面、疑似縦書き <table> タグを直接 HTML に書き込んでしまうので、場合によってはこの点が問題になるかも知れません。

一方、「涅槃」の場合は、HTML をシンプルに保ったまま、どんなツールから書き出した HTML でも JavaScript で縦書きにしてしまえるのが魅力です。

少々 HTML や JavaScript の知識が必要になりますが、もちろん CMONOS.JP に組み込んで使うこともできます。縦書き文庫さんの開発日誌「カンタン!縦書きブログの作り方」が参考になるのではないでしょうか。

縦書きにしてみたくなったら、「涅槃」、ぜひ試してみてください。

難問!縦書き約物!

ところで、縦書き化最大の難問が「縦書き約物(やくもの)」です。「涅槃」では、おそらく互換性を重視して約物を画像として処理していますが、かっこ類についてはそのほとんどが Unicode HTML エンティティで指定できます。

下記は縦書き約物があるあたりの Unicode 領域。

&#65072;
&#65073;
&#65074;
&#65075;
&#65076;
&#65077;
&#65078;
&#65079;
&#65080;
&#65081;
&#65082;
&#65083;
&#65084;
&#65085;
&#65086;
&#65087;︿
&#65088;
&#65089;
&#65090;
&#65091;
&#65092;
&#65093;
&#65094;

IE5.5-IE8.0、Firefox、Safariなど、主要プラットフォーム上の主要ブラウザではきちんと表示されます。ただ、IE6 だけ「MS Pゴシック」だと約物を表示してくれません。「MS ゴシック」を CSS で指定してやるとちゃんと表示します。IE5.5 ではちゃんと表示できるのに...、いつも謎な挙動をするブラウザです...。

また、IE5.5-6ではこれら約物が全角であるにも関わらず、半角文字として処理してしまうので、文字を中央に配置したとき位置がやや右にずれる不具合があります。

問題は長音符「ー」や波ダッシュ「〜」です。どうもこれらの縦書き文字には Unicode が割り当てられていないようなんです。そのため、CMONOS.JP の「縦書き」フィールドタイプでは、両方とも「|」に変換しています。

もし他に、もっといい方法あるいは代替文字がありましたら、ぜひコメント欄等でご指摘くださいm(_ _)m。

更新情報

最近の記事

RSS

カレンダー

2010年5月
1
2345678
9101112131415
16171819202122
23242526272829
3031
2010年4月
123
45678910
11121314151617
18192021222324
252627282930
2010年3月
123456
78910111213
14151617181920
21222324252627
28293031
このページのトップへ