ホームページで縦書きが利用できる「涅槃」

「縦書き文庫の開発日誌」で紹介されているホームページで縦書きができる涅槃を組み込んだ。js製組版エンジンのnehan3で、ページ送りで表示できるビューアーが表示できる。
利用方法はHTMLファイルの<head>・・・</head>部分に以下のスクリプトを記入するだけ。
WordPressならheader.phpファイルの<head>・・・</head>部分に同様に以下のスクリプトを記入すればよい。

<charset="utf-8" rel="stylesheet" type="text/css" href="http://nehan.googlecode.com/hg/nehan3.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script charset="utf-8" type="text/javascript"
 src="http://nehan.googlecode.com/hg/nehan3-min.js"></script>
<script type="text/javascript">
$(function(){
  Nehan3.config.system.nobr = false; // BRタグを無視する
  Nehan3.config.system.conv_br = true; // BRタグを\nに変換する
  Nehan3.Pagerize.map({
    direction: "vertical", // 横書きなら"horizontal"に
    width:560, // ページの横幅
    height:400, // ページの高さ
    fontSize:18 // フォントサイズ
  });
});
</script>

そして、縦書きにしたい部分を以下のようにで囲むだけ。

<pre class="nehan3-pagerize" style="display:none">
 眠りから覚めて目を開くまでの時間は、ごく短い。二秒ないだろう。
 目を覚ましたぼくは、自分が寝ている場所の香りにあらためて気づき、
いつもの自分の場所ではないところに自分が眠っていたことを認識しなおした。
 ぼくは、目を開いた。天井が見えた。見なれない天井のたたずまいに、
部屋の香りはよく似合っていた。香りというよりも、匂いだろうか。
 ベッドに違和感があった。なれた自分のベッドではなかった。
 あおむけになっていた体を横にむけつつ、ぼくは上体を起こした。
ベッドの縁にすわり、両足をフロアに降ろした。板張りのフロアの感触が、
足の裏に新鮮だった。
 青空文庫 片岡義男 時差のないふたつの島 より引用
</pre>

これで実際にこんな感じになる。

眠りから覚めて目を開くまでの時間は、ごく短い。二秒ないだろう。
 目を覚ましたぼくは、自分が寝ている場所の香りにあらためて気づき、いつもの自分の場所ではないところに自分が眠っていたことを認識しなおした。
 ぼくは、目を開いた。天井が見えた。見なれない天井のたたずまいに、部屋の香りはよく似合っていた。香りというよりも、匂いだろうか。ベッドに違和感があった。なれた自分のベッドではなかった。
 あおむけになっていた体を横にむけつつ、ぼくは上体を起こした。ベッドの縁にすわり、両足をフロアに降ろした。板張りのフロアの感触が、足の裏に新鮮だった。
 青空文庫 片岡義男 時差のないふたつの島 より引用

その他、カスタマイズ、テキストの記述に使えるタグについては、作者が用意してくれているマークアップヘルプを参照すればよい。

縦書きにこだわる人には最高の涅槃である。

正しく表示されなくなったため確認したところ、nehan5が最新バージョンとして提供されており、上記nehan3はgooglecodeで提供されなくなっているようす。
上記のjsファイルとcssファイルをそれぞれ「nehan3.js」「nehan3.css」から「nehan5.js」「nehan5.css」へ書き直すと再度、正しく表示されるようになる。



シェアする

  • このエントリーをはてなブックマークに追加

フォローする