What is this?

Nehan is dynamic layout engine for Japanese written in JavaScript.

It's support Japanese vertical layout, and horizontal layout, ruby, bold, blockquote, image processing also available.

Easy to extend, and no third party libraries are needed.

Tested on IE6-,Firefox3.5-, Chrome4-, Opera10-, Safari3-

Demo

vertical and horizontal, layout map, layout map2 simple reader, dangumi reader, scroll reader, magazine style, inline-layout1, inline-layout2, rich viewer

Markup Help

ruby

<ruby><rb>日本語</rb><rt>にほんご</rt></ruby>
<ruby>日本<rt>にほん</rt>語<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>

toc

Nehan::PageProvider::getTocTable return toc object(title and pageNo) array.

<toc>summary</toc>
...

<toc>summary2</toc>

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

header

<h1>header1</h1>
<h2>header2</h2>
<h3>header3</h3>
<h4>header4</h4>
<h5>header5</h5>

indent

<indent before="2">text with previous space.</indent>
<indent after="2">text with following space.</indent>
<indent before="2" after="2">text with previous and following space.</indent>
<indent count="2">text with previous and following space.</indent>

blockquote

<blockquote>text with indent and small font size.</blockquote>

multi charactor in one charactor space

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

font

<font scale="1.6">BIG</font>
<font scale="0.8">SMALL</font>
<font scale="1.6" weight="bold">BIG BOLD</font>
<font scale="1.6" weight="bold" family="Meiryo">BIG BOLD Meiryo</font>

inline layout

horizontal in vertical. align attribute(top or bottom) is optional.

vertical text1
<layout direction="horizontal" width="400" height="300" align="top">
inline horizontal text
</layout>
vertical text2

vertical in horizontal. align attribute(left or right) is optional.

horizontal text1
<layout direction="vertical" width="400" height="300" align="left">
inline horizontal text
</layout>
horizontal text2