2015-12-02

nehan.js version5.4.0のリリース

nehan.js

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>");

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

2015-11-12

nehan.jsでSemantic UIのようなヘッダースタイルを設定する

nehan.js

人気のCSS フレームワーク「Semantic-UI」ですが、ヘッダーの設定はこんな感じになっています。

.ui.header{
  margin: calc(2rem -  0.14285em) 0em 1rem;
}

各ヘッダー内での文字サイズ(em)と、bodyの文字サイズ(rem)を使って計算しています。

同じことをnehan.jsでやる場合は、こんな感じで設定します。

Nehan.setStyle(".ui.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
    };
  }
});