nehan.js 5.4.0をリリースしました。
このバージョンから新しく追加された機能や、5.3.x系から消えた機能などがいくつかあるので、ご注意下さい。
変更点
Nehan.Document
が新たに定義されました。onPage
コールバックがサポートされました。Nehan.setup
,Nehan.createEngine
,Nehan.PageStream
が廃止されました。
Nehan.Documentについて
Nehan.Document
は、paged media用のdocument環境を抽象化したクラスです。
こういう風に使います。
var doc = new Nehan.Document(); var target = document.querySelector("#target"); // 表示先 // 内容をセット doc.setContent("<h1>hello, nehan.js!</h1>"); // ページサイズやスタイルをセット doc.setStyle("body", { flow:"tb-rl", // or "lr-tb" width:600, height:400, fontSize:16 }); // 組版スタート doc.render({ // 各ページが完了する度に呼ばれる onPage:function(page, ctx){ console.log("page:%o, pageNo:%d, percent:%d", page, page.pageNo, page.percent); page.element.style.marginBottom = "1em"; // ちょっと下にスペースを足しておく target.appendChild(page.element); // 組版結果を表示先に追加していく } });
onPageコールバックについて
onPage
コールバックを定義すると、ページ計算が都度DOMに変換しながらのパースになります。
なので、ページを遅延評価するonProgress
コールバックを使う場合と比べると、全体のパーススピードは落ちるのですが、代わりにコードは簡略化されます。
これまでonProgress
内でページオブジェクトを取得する場合、以下のようにする必要がありました。
doc.render({ onProgress:function(tree, ctx){ // この中でページが欲しい場合は、tree -> page する必要があった var page = ctx.getPage(tree.pageNo); } });
onProgress
に渡されるのはページではなく、ツリー(まだDOM化されていない中間オブジェクト)だからです。
しかし段組表示がしたい場合などは、即座にDOM変換された結果が欲しいわけですから、onPage
が便利でしょう。
一方、ページ送りするビューアーを作る場合は、現在表示されていないページを変換する必要はないので、onProgress
を使って遅延しておくと、全体のパーススピードが上がります。
Styleについて
作成した各Documentは、それぞれに独立したCSS環境を持ちます。
だからそれぞれを縦書きにしたり横書きにしたりできるのですが、全ドキュメントに共通のスタイルを定義したいときもあります。
そういう場合は、Nehan.seStyle
を使ってください。
// 先にグローバルスタイルをセットしておく Nehan.setStyle(".header", { margin:function(ctx){ var em = ctx.style.getFontSize(); var rem = ctx.style.getRootFont().size; return { before:Math.floor(2 * rem - 0.14285 * em), after:rem }; } }); // 縦書き組版環境 var vert_doc = new Nehan.Document() .setStyle("body", {flow:"tb-rl"}) .setContent("<h1 class='header'>vert doc</h1>"); // 横書き組版環境 var hori_doc = new Nehan.Document() .setStyle("body", {flow:"lr-tb"}) .setContent("<h1 class='header'>hori doc</h1>");
グローバルスタイルについては、各ドキュメントを作る「前に」セットしておく必要があることに注意してください。