nehan - Japanese dynamic layout engine written in JavaScript. 
[ 2010/04/29 ]
Nehan is dynamic layout engine for Japanese text format written in JavaScript.
It's support Japanese vertical layout, and horizontal layout, ruby, bold, blockquote, image processing also available.
Tested on IE6-8,Firefox3.5-3.6,Google Chrome, Opera, Safari4
No third party libraries are needed.

Getting Started

1. Upload nehan.js and image files of charactor

Suppose that you upload nehan.js to "/path/to/nehan.js", and all image files of charactor to "/path/to/char-img-root"

2. header definition

<script charset="utf-8" type="text/javascript" src="/path/to/nehan.js"></script>
<script type="text/javascript">
window.onload = function(){
Nehan.LayoutMapper.start("div", {
charImgRoot:"/path/to/char-img-root"
});
};
</script>
3. vertical (or horizontal) section in your article

vertical section like this.
<div class="lp-vertical lp-width-400 lp-height-300 lp-font-size-16">
your "vertical" article here..
</div>
horizontal section like this.
<div class="lp-horizontal lp-width-400 lp-height-300 lp-font-size-16">
your "horizontal" article here..
</div>
Markup help

ruby

<ruby><rb>日本語</rb><rt>にほんご</rt></ruby>
bold

<b>bold</b>
<strong>bold</strong>
link

<a href="http://google.com">link 1</a>
<a href="http://google.com" target="_blank">link2(new window)</a>
<a2 href="http://google.com">link3(new window)</a2>
image

Both width and height must be described, align property(top,bottom,left,right) is optional.

<img src="/path/to/img" width="200" height="300" />
<img src="/path/to/img" width="200" height="300" align="top" />
force turn page

previous page tail
<end-page>
next page head
blockquote

<blockquote indent="2">text</blockquote>
multi charactor in on charactor space

this is it<pack>!!</pack>
font scale

<font scale="1.6">BIG</font>
<font scale="0.8">SMALL</font>


※ ネーミングは好みではありませんが、nehanはJavaScriptで書かれたオープンソースです。

日本語を縦書き表記で読みたいと思う方は多いはずですね。縦書きは、今後の日本での電子書籍の成長を左右するかもしれない大切な技術です。

そのうちに縦書きを考慮したHTMLエディターも沢山登場するでしょうし、いつもの様にテキストエディターで横書きでHTMLを記述して、表示の時だけnehanにお願いすることになる訳で、当初は表記をイメージする戸惑いはありますが、なれれば全然問題になりませんでした。

私は、Safari4とirefox3.6で表示させてみましたが、classの中に、幅、高さ、フォントのサイズなどを指定するだけでOKでした。

さらに縦書きでも横書きでもルビが打てました。これも万人が喜ぶ技術ですね。今日は久々にうれしくて、きっと多くの方が喜ばれると思いレポートしました。Thanx cool G !!


出典 / 関連リンク : https://code.google.com/p/nehan/




ICET - Center for International Cultural Exchange of Technology
Nagoya, Japan and Berkeley, California