Follow Us.RSS

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

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

  • (2010年4月24日(土) 午前0時56分19秒 更新)
  • このエントリーをはてなブックマークに追加TweetBuzzurlにブックマーク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」は 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。

コメント

約物とUnicode

涅槃の紹介ありがとうございます!

縦書きの約物がUnicodeで割り当てられるとは知りませんでした。貴重な知識をありがとうございました。

音引きについては僕もダッシュに変換していますが、不評なようで悩ましいです。やっぱり画像を作ることになりそうです。

縦書き文庫http://tategakibunko.blog83.fc2.com/ (2010年4月24日(土) 午前7時33分5秒)
タンジェリン-ニコリン

縦書き文庫さん、こんにちは。ご存知かどうかわからなかったので、まわりくどい方法でお知らせしてみましたw。何かのお役に立てましたらうれしいです。

(うちも Google さんに CMONOS を話題にしているブログを RSS で教えてもらったりしていますので、もしかしたら、、、と思ってました(^^;。)

音引きはむずかしいですね。画像化するとアンチエイリアスかかる環境とそうでない環境とで違和感がありますし。。。ただ、その点でも JavaScript の方が条件分岐などができて有利だと思いました。

作っている方は、縦書きってやっぱり日本語文章に合うし、おもしろい機能だと思ってるんですけど、うちの場合あんまり使ってもらえなくて、若干放置気味でした。コピペができないことなんかも問題になるようです。

でも、縦書き文庫さんのサイトを見て、縦書きファンがたくさんいらっしゃることに勇気をいただきました。これからは縦書きの時代が来そうな気がします!

僕自身は趣味で漫画を描いていたりしますが、「涅槃」は小説や詩などの文学系創作の公開にとても役立つと思います。創作活動文化にとっても有意義な、すばらしいツールの公開、(創作を趣味とする者の一人としても)心より感謝いたしますm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年4月24日(土) 午後1時49分37秒)

トラックバック

関連記事

[画像]

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

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

CMONOS.JP | 開発者ブログ | ついに WebKit が縦書きの実装に着手!

2010年11月25日 ...縦書き CSS の仕様が固まりつつあることを受けて、最新の WebKit Nightly Build が ついに縦書きを実装しました。まだまだ実験的な実装ですが、WebKit が縦書きを サポートする意志を明らかにしたことの影響はかなり大きいと言えるでしょう。
https://cmonos.jp/blog/2010112501/1.shtml
[画像]

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

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

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

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

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

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

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

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

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

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

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

2011年4月26日 ... 竹取Web」は、JavaScript 非依存なので、iPhone など非力な環境でも縦書き化でき ます。 ... 一行文字数や文字サイズを調整したブックマークレットを作りこんでおけば、 iPhone などでも読みやすい縦書き表示でサイトを閲覧できるのではない ...
https://cmonos.jp/blog/2011042602/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 | 開発者ブログ | 簡単スマートフォン対応

2012年1月6日 ... iPhone の Safari には一つだけ大きな弱点があります。それは、未だに ... まず、 iPhone の Twitter アプリで、画像をアップロードする写真共有サイトを選択します。写真 共有サービスの .... iPhone や Android 携帯でも縦書き. 「竹取Web」 .
https://cmonos.jp/blog/2012010600/1.shtml

更新情報

最近の記事

RSS

NEXT>>

PC 向けページに移動する