nehan6からnehan7にバージョンアップしました。
インストール
npm install --save nehan
変更点
- 組版速度が約20%向上しました。
- コードサイズが約10%削減されました。
nehan.css
が不要になりました。- 行内に置換要素、画像、ルビ、圏点傍点、複数サイズの文字などを同時に含むような場合でも、ベースラインが正確に計算されるようになりました。
- テーブルセルに対して
vertical-align: middle
が効くようになりました。 - いくつかのパターンにおける文字詰めの表示崩れを修正しました。
- 行末揃えの処理を指定しても組版速度が落ちなくなりました。
PageReader
は廃止されました。今後はPagedHtmlDocument
を使用してください(後述)。
縦書き文庫のビューアーの刷新
縦書き文庫のビューアーも、新バージョンのエンジンに差し替えました。
nehanのコードサイズが減ったぶん、ページの読み込みも(少しだけ)速くなったと思います。
500KByteほど削減されているので、モバイル環境なんかでは、そこそこ効果が大きいのではないでしょうか。
UIについても、ちょっとだけ刷新しました。
これまでは「本文」と「目次・登場人物」の2列で表示していたのですが、今後は本文を一列(ワンカラム)で表示するようにして、「目次・登場人物」は本文下のメニューに移動させました。
これにより、本文は表示領域が広くなり見やすくなった一方、目次や登場人物に対する操作性は悪くなってしまったので、これに関しては今後の課題としておきます。
(本文の横に目次やら人物やらのタブを表示したらいいのかなあ、と考えています)
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)`); } });
注意事項1(論理プロパティについて)
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はインライン方向の前後、と覚えてください。
注意事項2(段組とページ送りについて)
上のサンプルでは、appendChild
を使って、組版結果をどんどん追記する「段組み方式」で表示していますが、ページ送りで表示したいときは、自前で現在表示するページやページ番号などを管理する必要があります。
その場合、起動時には先頭ページだけを表示し、それ以降のページはページ送りをしたタイミングでdoc.getPage
を使って動的に対象ページを取得し、画面上のDOMを差し替える、という実装になるでしょう。
ページ送りの場合の実装については、サンプルのbook.tsなどが参考になるかもしれません。