anti scroll

ブラウザと小説の新しい関係を模索する

nehan.js version5.4.0のリリース

nehan.js 5.4.0をリリースしました。

github.com

このバージョンから新しく追加された機能や、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>");

グローバルスタイルについては、各ドキュメントを作る「前に」セットしておく必要があることに注意してください。