HTMLで縦書きを実現するJavaScriptライブラリまとめ

縦書きのWebサイトを作ることになりそうなので、HTMLで縦書きを実現するJavaScriptライブラリをまとめてみた。

JavaScriptライブラリ

現在フリーで配布されている有名な縦書き用JavaScriptライブラリとして、以下の2つがある。

どちらも非常に使いやすいライブラリなので、用途に合わせて使い分ければよいと思う。

1. 竹取JS

f:id:nemousucom:20121112082937p:plain

竹取JSは、株式会社CMONOSが提供している縦書き用JavaScriptライブラリ。

竹取 JS

単純なテキストだけでなく、リストや装飾等HTML全般に対応しているという特長がある。

また、フォントやマルチカラム、キャッシュ、ダブルクリックによる縦書き/横書き切り替え等、様々な設定が可能となっている。

動作については、任意のWebサイトを縦書き表示に変換する竹取Webを試してみるといいと思う。

コード例

<script type="text/javascript" src="taketori.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
(new Taketori()).set({設定項目:値,設定項目:値}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);
//]]>
</script>

2. nehan

こちらは（おそらく）個人により開発されているライブラリ。

nehan - dynamic layout engine written in JavaScript. - Google Project Hosting

最新版は3.0.5（執筆時現在）で、現在も開発が行なわれているらしい。

nehanの特長として、開発者のブログにあるようにページングにも対応している点がある。

なお、nehan開発者が運営している、nehan利用サービスとして以下の縦書き文庫がある。利用例について見てみたい方はぜひ。

縦書き文庫 | 縦書き小説の投稿サービス

コード例

// source text
var text = "hello, nehan3";

// layout definition
var layout = new Nehan3.Layout({
  direction:"horizontal", // or "vertical"
  width: 640,
  height: 480,
  fontSize: 18
});

// create page generator
var generator = new Nehan3.PageGenerator(text, layout);

// yield page 1
var html_page1 = generator.yieldPage();
$("#page1").html(html_page1);

// yield page 2
if(generator.hasNext()){
  var html_page2 = generator.yieldPage();
  $("#page2").html(html_page2);
}