anchor
縦書き文庫で使用されている組版エンジン、『涅槃』を試してみたぞ
JavaScriptでwebサイトやブログを縦書き表示にする「涅槃（ねはん）」を試してみた。
nehan.js
（Freeware)
涅槃 ねはん 振 ふ り
仮名 がな 、
傍点 、
アクセント 、
太字 、
部分色替え 、
リンク 、
大きい文字 、
小さい文字 、改ページの差し込み、字下げ、横書き、しおり、禁則処理、縦中横、画像の差し込み、
動画の埋め込み などをサポートしているそうだ。ここらはソースコードからコピペだが、簡単なタグでこれらの約物が実現できる。
またこの行アタマの行回り込み等のレイアウト表示の可能性にも注目だ。
これらの表示は日本語の縦書き表示をサポートする縦書きエンジンを使ってJavaScriptでサイト上に表示できる。
コード自体は非常にシンプルなので、既存のブログにも導入が可能。
涅槃（nehan.js） のフィールド内ではこのように画像を組み込んでそこに文字の周り込み等も表現できる。
日本語はやはり縦書きで読むのが良いという人は、多いと思うのでこの組版エンジンの簡単さは魅力だと思う。
この縦書きに指定したフォールド内では改行は<br>などの強制改行コードを打たなくても普通に改行するだけでその通りに表示される等、表現もシンプルになっている。
エリアの中でアイコンにハイパーリンクを埋める方法が今のところ分からない。このサイトはスタート以来アプリのアイコンをクリックするとその作者のサイトに飛べるというリンクレイアウトにこだわってきたので、これが何とかなるならこのサイト自体を縦書きに変えてみいいかなと思い始めている。この通り改行無しで詰まった文章を書くと、通常のwebの横書きでは非常に読みづらい文章になってしまうが、縦書きならそんなに苦痛ではない。
本当に縦書きに移行してしまおうかしら？
という感じで縦組、横組が同居するサイトが構成できる。
この縦書き組版エンジン「nehan（涅槃）」のコードはこちらで入手できる。nehan - Project Hosting on Google Code
さらにスタートアップの方法の解説はこちら。縦書き文庫の開発日誌 カンタン！縦書きブログの作り方
この導入は非常にシンプルで、手順は以下の通り。
例えばこの場合nehan.js はここに置いた。path/to/nehan.js path/to/img
nehan.js というファイルと
あとはサイトのヘッダに以下の一行をコピペする。
<script charset="utf-8" type="text/javascript" src="path/to/nehan.js ">
</script>
この一行は<head>から</head>の領域の間にペーストするが、何かあった時に対処しやすいように</head>の直前に置くのがいいようだ。
次にbody領域の一番最後、</body>の直前に以下の文字列をコピペする。
<script type="text/javascript">
Nehan.LayoutMapper.start("div", {
charImgRoot:"path/to/img ",
fontFamily:"IPA明朝, ＭＳ 明朝, Osaka-Mono, Hiragino Mincho Pro",
filter:"direction",
noBR: false,
onSeek: function(groupName, seekPercent){ },
onComplete: function(groupName){ },
onCompleteAll: function(){ }
});
</script>
<div class="lp-vertical lp-width-630 lp-height-300 lp-font-size-16">
ちなみにこの「width」は私のサイトはテーブルで横幅は650に制限しているので、それより少し少なめの数字にした。
このタグのままだと一瞬領域の文字が横書きで表示されたりするので、それを隠すタグとか本当は、もっといろいろ付け加えるべきコードがあるのだが、それは作者さんのサイトで確認してもらいたい。
これらの縦書きの表示はSafari とForefox で表示確認した。
ということはwebkit系のGoogle Chorome 、iCab 、GeckoエンジンのMinefield 、Camino などで問題なく表示できるということだ。
Trident/Internet Explorer でもちゃんと表示できるかどうかは知らない。Internet Explorer をサポートしていないので、Internet Explorer できちんと表示できるかどうかは確認する気がない。
2010年4月30日
涅槃（nehan.js）のフィールド内ではこのように画像を組み込んでそこに文字の周り込み等も表現できる。
日本語はやはり縦書きで読むのが良いという人は、多いと思うのでこの組版エンジンの簡単さは魅力だと思う。
