nehan.jsでは、組版エンジンを扱う入り口として、主にPageStreamというものを提供しています。
ただしこれは柔軟に扱える反面、はじめての利用者にとっては直感的じゃなかったかもしれませんでした。
そこで、nehan.jsのversion5.0.3からは、より扱いやすい抽象化としてPagedElementというものが利用できるようになりました。
Nehan.createPagedElement
で作成できるのですが、イメージとしてはdocument.createElement
に近いものです。
PagedElementはDOM elementを内包しますが、通常のDOMと違って内部に複数ページを持っていて、それらを切り替えられる点が異なります。
PagedElementの作成
Nehan.createPagedElement
で作成します。
var paged_element = Nehan.createPagedElement();
スタイルの設定
続いて、ページのサイズをsetStyle
でセットします。
setStyle
の第1引数は、セレクターです。
"body"がページのルートスタイルになります。
paged_element.setStyle("body", { "flow":"tb-rl", // 縦書きモード。横書きなら"lr-tb"にする。 "width":640, "height":480, "font-size":16 // fontSize(camel case)とは書けない。 });
cssのプロパティとして、camel caseが使えないことに注意してください(つまりfont-size
をfontSize
と設定することはできない)。
なおその他の要素のスタイルも、同じようにセットできます。
paged_element.setStyle(".my-header h1", { "font-size":"3em" });
ページ内容をセット
ページの内容はsetContent
でセットします。
setContent
した直後に組版が始まるので、上述のsetStyle
を先に済ませておく必要があることに注意してください。
paged_element.setContent("<h1>hello, nehan.js</h1>");
組版結果のDOMを取得
paged_elementによって組版されるDOMは、getElement
で取得できます。
var element = paged_element.getElement(); // 画面上のどこかにセット document.getElementById("result").appendChild(element);
次ページ、前ページの描画
次ページの描画はsetNextPage
で、前ページの描画はsetPrevPage
です。
// 次ページボタンをクリック document.getElementById("next-button").onclick = function(){ paged_element.setNextPage(); }; // 前ページボタンをクリック document.getElementById("prev-button").onclick = function(){ paged_element.setPrevPage(); };
組版の非同期コールバック
ページを組版している最中の状況(パーセントみたいなもの)が欲しい場合は、setContent
の第2引数にコールバックを指定します。
onProgress
とonComplete
が有効です。
paged_element.setContent("適当な内容", { onProgress : function(tree){ console.log("%d page(%d percent) is done", tree.pageNo, tree.percent); }, onComplete : function(time){ console.log("finish! %f time", time); } });
ページ数、アウトラインの取得
ページ数やアウトラインは、上記のonComplete
のタイミングで確定します。
なので次のように取得すると良いでしょう。
paged_element.setContent("<h1>適当な内容</h1>", { onComplete : function(time){ console.log("page_count = %d", paged_element.getPageCount()); console.log("outline element = %o", paged_element.engine.createOutlineElement()); } });
createOutlineElement
については、paged_element.engine
という内部エンジンを経由して呼んでいる点に注意してください。
またcreateOutlineElement
は、引数にコールバックオブジェクトを与えることができます。
それによって、アウトラインをクリックした時の挙動なども設定できるのですが、詳しくはnehan.jsのsection-tree-converterを参照してください。