縦書き組版JavaScript「涅槃」

July 7, 2010
nehan_img.jpg

縦書き文庫さんのサービスで使用されているJavaScriptでサイトを縦書き表示にする「涅槃(ねはん)」をWordPressで試してみました。

涅槃で縦組みにしたWordPressのページ

涅槃の縦書きの表示

涅槃の縦書きの表示

実際の導入したWordPressのページは下記からご覧ください。

KYS-WP* - 縦書き組版「涅槃」をWordPressで試してみました

涅槃のダウンロードと解説

ダウンロードはGoogle Codeから最新のバージョンがダウンロードできます。

nehan - Project Hosting on Google Code

「涅槃」のブログでの導入の仕方は、いたって簡単です。下記ページで説明されています。

縦書き文庫の開発日誌 カンタン!縦書きブログの作り方

上記ページにも解説ありますが、WordPressでは、縦書き表示にさせる箇所を <div> で囲むと改行がおかしくなったので、 <pre> で囲み、 noBR を true にました。

<script type="text/javascript">
  Nehan.LayoutMapper.start("pre", { //divのかわりにpre
    charImgRoot:"http://○○○/img", //約物のイメージフォルダへのパスを記述
    fontFamily:"IPA明朝, MS 明朝, Osaka-Mono, Hiragino Mincho Pro",
    filter:"direction",
    noBR: true,  //trueに変更
    onSeek: function(groupName, seekPercent){ },
    onComplete: function(groupName){ },
    onCompleteAll: function(){ }
  });
</script>

画像の回り込みは、imgタグに

 align="top"
を追加するだけ。


また、ルビふりや縦中横も

<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>で、ルビがふれます<pack>!!</pack>

タグを入れてあげれば可能。

縦書き用の約物は、最適な画像が自動で挿入されます。いや、すごいですね。

あとは、cssで見栄えを調整すれば、縦組み表示のブログが完成です。

ちなみに、リンクテキストにアンダーラインを入れていたら、文字と文字の間に線が入って、こんな感じになっちゃうんで、

涅槃上のアンダーライン

cssで、はずしておいたほうがいいですね。

ePubの縦書きは?

最近話題の電子書籍のフォーマットの一つであるePubにしろ、縦書きや禁則処理やレイアウトが問題視とされていますが、CSS3で日本語の組版をするための拡張案も出ていますね。期待したいところです。

EPUB仕様の日本語組版拡張を目指して(Version 0.8)

STAFF_01 [KYS-LAB]: ページが見つかりません。