nehan6からnehan7にバージョンアップしました。
インストール
npm install --save nehan
変更点
- 組版速度が約20%向上しました。
- コードサイズが約10%削減されました。
nehan.cssが不要になりました。- 行内に置換要素、画像、ルビ、圏点傍点、複数サイズの文字などを同時に含むような場合でも、ベースラインが正確に計算されるようになりました。
- テーブルセルに対して
vertical-align: middleが効くようになりました。 - いくつかのパターンにおける文字詰めの表示崩れを修正しました。
- 行末揃えの処理を指定しても組版速度が落ちなくなりました。
PageReaderは廃止されました。今後はPagedHtmlDocumentを使用してください（後述）。
縦書き文庫のビューアーの刷新
縦書き文庫のビューアーも、新バージョンのエンジンに差し替えました。
nehanのコードサイズが減ったぶん、ページの読み込みも（少しだけ）速くなったと思います。
500KByteほど削減されているので、モバイル環境なんかでは、そこそこ効果が大きいのではないでしょうか。
UIについても、ちょっとだけ刷新しました。
これまでは「本文」と「目次・登場人物」の２列で表示していたのですが、今後は本文を一列（ワンカラム）で表示するようにして、「目次・登場人物」は本文下のメニューに移動させました。
これにより、本文は表示領域が広くなり見やすくなった一方、目次や登場人物に対する操作性は悪くなってしまったので、これに関しては今後の課題としておきます。
（本文の横に目次やら人物やらのタブを表示したらいいのかなあ、と考えています）
nehan7のざっくりとした使い方（開発者向け）
だいたいこんな感じで使います。
import { PagedHtmlDocument, CssStyleSheet } from 'nehan'; const src = "<h1>hello, nehan!</h1>"; const doc = new PagedHtmlDocument(src, { styleSheets: [ new CssStyleSheet({ "body": { "writing-mode": "horizontal-tb", // or "vertical-rl" // インライン方向のサイズ（横書きならwidth、縦書きならheightに相当） "measure": "450px", // ブロック方向のサイズ（横書きならheight、縦書きならwidthに相当） "extent": "500px", "font-size": "16px", "padding": "1em" } }) ] }); const $dst = document.querySelector("#dst"); // 結果を格納するDOM // 描画を開始（非同期処理） doc.render({ onPage: (ctx){ const page = ctx.caller.getPage(ctx.page.index); // ページを評価 $dst.appendChild(page.dom); // 評価したページのDOMを注入 $dst.appendChild(document.createElement("hr")); // 一応、分割線 }, onComplete: (ctx){ console.log(`終わりました(${ctx.time}msec)`); } });
注意事項１（論理プロパティについて）
nehanは論理組版エンジンなので、領域サイズの指定にwidthとかheightなどは使えません。
代わりにmeasureとかextentという論理プロパティで指定します。
measureは横書き（writing-mode:"horizontal-tb"）ではwidthのことです。
縦書き（writing-mode:"vertical-rl"）ならheightになります。
extentは横書き（writing-mode:"horizontal-tb"）ではheightのことです。
縦書き（writing-mode:"vertical-rl"）ならwidthになります。
同じく、top, right, bottom, leftといった名前は、nehanではそれぞれbefore, end, after, startと指定します。
例えば横書きのmargin-leftは、nehanではmargin-startです。
before/afterはブロック方向の前後で、start/endはインライン方向の前後、と覚えてください。
注意事項２（段組とページ送りについて）
上のサンプルでは、appendChildを使って、組版結果をどんどん追記する「段組み方式」で表示していますが、ページ送りで表示したいときは、自前で現在表示するページやページ番号などを管理する必要があります。
その場合、起動時には先頭ページだけを表示し、それ以降のページはページ送りをしたタイミングでdoc.getPageを使って動的に対象ページを取得し、画面上のDOMを差し替える、という実装になるでしょう。
ページ送りの場合の実装については、サンプルのbook.tsなどが参考になるかもしれません。
