anti scroll

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

シリーズの目次とテキスト内の目次

縦書き文庫

シリーズの目次と、テキスト内の目次が、両方サイドバーに表示されるようになりました。

シリーズの目次

シリーズの目次は、同一シリーズ内のコンテンツを行き来するための目次です。

f:id:convertical:20160304150535p:plain

テキスト内の目次

テキスト内の目次は、本文の中で見出し（ヘッダー）が設定された箇所にジャンプするための目次です。

シリーズの目次とは違い、クリックするとその見出しのあるページにジャンプします。

f:id:convertical:20160304150546p:plain

数式の組版に対応しました

縦書き文庫

まだ実験的な機能なのですが、数式の組版に対応しました。

使い方

エディター画面の「数式」をクリックします。

f:id:convertical:20160201142249p:plain

数式エディターが開くので、MathJax形式で入力します。

f:id:convertical:20160201142259p:plain

プレビューすると、こんな風に表示されます。

横書きのとき

f:id:convertical:20160201145929p:plain

縦書きのとき

f:id:convertical:20160201145921p:plain

数式の書き方について

詳しくはMathJaxのドキュメントを見ていただくとして、大雑把に言うと\[ 〜 \] で囲むか、$$ 〜 $$ で囲みます。

$$ E = mc^2 $$
\[ e^{i\theta} = \cos\theta + i\sin\theta \]

数式を組み込むと、MathJaxの組版が完了するまで、先頭ページの表示が少し遅くなります。ご注意ください。

nehan.js 5.5.0

nehan.js

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

github.com

以下、5.4.x系列からの変更点です。

変更点

  • pseudo-classの:matches, :not, :langをサポートしました。
  • MathJaxを試験的にサポートしました。demo
  • サロゲートペアに対応しました。これにより、emoji等が文字化けせず、そのまま出力できるようになりました。demo
  • ブラウザがサポートしてる場合は、ネイティブなtext-combine-uprightが使用されるようになりました。demo
  • text-orientationの値にsideways, upright, mixedが指定できるようになりました。demo
  • list-style-positionの値に、insideが指定できるようになりました。
  • cssのfont値をshorthand形式でも指定できるようになりました。
  • Nehan.Preloadsモジュールの追加。サイズ未設定のimgやmathなどのサイズが動的に取得されるようになりました。
  • selector-keyの値に関数を指定した場合、当該セレクタのonloadフックとして評価されるようになりました。
  • nehan.jsによる組版から除外して、外部ソースをそのまま取り込むための属性値の名前がpastedからlazyに変更されました。
  • Nehan.PagedElementが削除されました。今後はNehan.Documentを使用して下さい。
  • Nehan.LexingRuleが削除されました。今後、シングルタグの定義にはNehan.setSingleTagNameを使用して下さい。
  • Nehan.Rgb, Nehan.Palette, Nehan.Colorsモジュールが削除されました。

Nehan.PagedElementの削除について

v5.5.0から、Nehan.PagedElementが削除されました。

これの中身は、単なるNehan.Documentのラッパで、やってることはページ状態と表示先DOMをDocumentクラスと一緒に管理しているだけのものです。

Nehan.Documentと役割が被ることが多いので、今回のバージョンアップで削除してしまうことにしました。

MathJaxについて

MathJaxのサポートですが、現時点では本ソースへの取り込みではなく、プラグインでの対応です。

詳しくは以下のリンクから確認して下さい。

https://github.com/tategakibunko/nehan.js/tree/master/plugins

Unicode Hyphen覚え書き

nehan.js unicode programming

例えばHTMLで「F-15」のような「-」（ハイフン）を含むboxを90度回転して表示させようとすると、ハイフンの後で改行されてしまいます。

f:id:convertical:20151231091605p:plain

なぜこんなことが起きてしまうのでしょうか。

理由

フォントサイズが16と仮定して「F-15」という横書きのwordを囲むサイズが、32x16（横x縦）だとします。

これを縦書き用に90度回転させると、このwordを囲むサイズは、32x16から16x32になります。

このときFの後のハイフンが、回転前の横幅（32）ではなく、回転後の横幅（16）を前提にして解釈されるのが、改行が発生する原因です。

「F-」まで描画したところでインラインの描画位置が、回転後における横幅の限界（すなわち16）に届くのですが、この位置で発生したハイフンが、line-break-pointとブラウザに判断されるため、改行が発生してしまうわけです。

Unicodeの中でline-break-pointと解釈されるハイフンは他にも色々（＊注1）ありますが、よく使われるのはHYPHEN MINUS(U+002D)や、HYPHEN(U+2010)です。

＊注1　U+002D, U+2010, U+2012, U+2013とかもそう。調べたらもっとあるかも。

というわけで、nehan.js内では英数字を縦書き用に回転させるときだけ、U+002DとU+2010（U+2012,U+2013なども）を、あらかじめnon-breaking-hyphen(U+2011)に変換して、この問題を回避しています。

white-space:preでも解決できるかもしれないです。

もちろんこれはベストな解決方法ではありません。

こうしたHyphenの動きをコントロールするため、CSSにはhyphensというプロパティが定義されているのですが、なぜかChromeではまだ未実装（その他のブラウザは殆ど実装されている）なので、仕方なくこういう回避策をとっています。

Nehan Reader version2.1リリース。自動で変換するサイトを指定できるようになりました。

nehan.js

Nehan Reader(version 2.1)をリリースしました。

chrome.google.com

オプションページにて、

  • 自動的にNehan Readerを起動するURL（パターン）
  • URL（パターン）毎の変換対象に指定する部分

などが設定できるようになりました。

ちなみに「小説家になろう」とか「青空文庫」のような、既に使っている人が多そうな対象は、デフォルトで設定しておきました。

なので、version2.1をインストールして「青空文庫」や「小説家になろう」の「作品ページ」にアクセスすると、作品本文を抜き出して縦書きページ送りにしたビューアーが自動的に起動しちゃいます。

捗りますね！

自動的に起動するURLを設定する

Nehan Readerのボタン上で右クリックして「オプション」へ進みます。

f:id:convertical:20151228164600p:plain

automatic convert URLsの欄に、自動変換させるサイトのURLパターンを記述します。

f:id:convertical:20151228164612p:plain

内容はSaveUrlListというボタンを押すと保存されます。

URLパターンの記述の仕方

URLパターンの記述方法は２つあります。

一つは、ダイレクトにサイトのURL（の一部）を記述する方法。

もう一つは、サイトのURLパターンを正規表現で記述する方法（上級者向け）です。

以下はサンプルです（#で始まる行はコメント扱い）。

# URLをダイレクトに記述
headlines.yahoo.co.jp

# 正規表現で記述
r(www\.aozora\.gr\.jp/cards/\d+/files)

正規表現でパターンを指定する場合は、r(正規表現)の形式で記述しますが、メタ文字をエスケープする必要があることに注意して下さい。

変換する対象ノードを指定

サイトによっては、ページ全体ではなく、メインとなる記事のみを変換したいことがあります。

ヘッダーロゴの部分をスキップするのが面倒とか。

そういう場合は、オプションページのpath to convert targetの欄で、サイトごとの変換対象（へのjQueryPath）を設定することができます。

f:id:convertical:20151228164638p:plain

書式は

[URLパターン], [変換対象のjQueryPath]

の形式です。

[jQueryPath]の部分については、複数指定することもできます。

複数指定した場合は、最初に見つかったものが変換対象になります。

もし見つからなければ、ページ全体が変換されます。

以下はサンプルです。

# yahooニュースは、#mainを対象に変換する
news.yahoo.co.jp, #main

# URL部分は正規表現でもOK
r([a-z]\.yahoo\.co\.jp), #main

# www.example.comでは、まず.mainを探して、なければ.entryを探す
www.example.com, .main, .entry

記述したら、忘れずに「SavePathList」というボタンで保存して下さい。

最後に

自動変換するサイトを指定しておくと、いちいち変換ボタンを押さなくても勝手にビューアーが起動するので、ウェブ上の連載作品を読むのがとても楽になりました。

CSSとDOMの境界、あるいはリスト組版がテーブル組版の親戚である件について

nehan.js programming

http://tb.antiscroll.com/static/nehan-demo#list

このデモですけど、ブラウザの大きさを変えると、リフローすることに気付いた人はいるでしょうか。

こういうデモで、テーブル組版や回り込み処理を見せると「おお」となる人が多いんですけど、リスト組版を見せても「で？」という人が多いと思います。

しかし、一見すると単純に見えるリスト組版ですが、実はテーブルの組版とよく似た複雑な組版なのです。

並列組版

nehan.jsでは、list-style-position:outsideかつdisplay:list-itemな要素と、display:table-rowな要素は、どちらもParallelGenerator（並列組版）のサブクラスで実装されています。

並列組版とは、複数の組版要素を同時並行的に行う組版です。

特徴としては、複数の子要素が矛盾なく表示されるための「前計算」を必要とするケースが多い、というのがあります。

例えばテーブルなら、各セルのサイズをどう割り当てるのか、事前に何らかの計算が必要なのは、なんとなく想像がつくと思います。

でもリストはどうでしょうか？

「リストなんて、単にテキストの先頭にリストマークの添字を足すだけじゃないの？」と思う人もいるかもしれません。

この指摘は、list-style-position:insideなら、まあそのとおりなのです。

しかしlist-style-position:outsideのときは、様相が異なります。

まずはUL>LIが書かれたHTMLを、適当なブラウザで表示させみてください。

<ul style="list-style-position:outside">
  <li>日本国民は、正当に選挙された（以下略）</li>
</ul>

CSSとDOMの境界

さて、表示されたリストですが、各リスト・アイテムの「リストマーク」は、マウス等ではテキスト選択できません。

f:id:convertical:20151203101342p:plain

つまり、このリストマークは、ユーザーがDOM操作では触れない組版要素になっています。

これが「CSSとDOMの境界」です。

これだけじゃありません。

list-style-positon:outsideのときは、リストの要素が一行を溢れても、リストマークの横幅だけ常に内容がインデントされています。

f:id:convertical:20151203101357p:plain

つまり空白の一列が割り込んでいるわけです。

この空白も、liマークアップに対するmarginやpaddingで実現されているわけではないので、CSSとDOMの境界と言えます。

正確にリストを組版するためには、これらの境界要素に関するサイズ配分を事前に計算する必要があるわけです。

で、こういう性質を知っていると、例えばブラウザにとってどんなリストが意地悪なのかが、なんとなく予想できます。

意地悪な組版

例えばOL>LI*1000なマークアップで、それぞれのリストを1em, 2em, 3emの文字サイズで順に表示させてみましょう。

<style type="text/css">
ol{ list-style-position:outside; }
.hoge{ font-size:1em }
.hige{ font-size:2em }
.hage{ font-size:3em }
</style>

<ol>
  <li class="hoge">hoge</li>
  <li class="hige">hige</li>
  <li class="hage">hage</li>
  <!-- 以下1000行まで続く -->
</ol>

どうしてこれが意地悪なのかというと、このリストを正しく表示するためには、1000行の添字が使うであろう数字文字列の最大幅を事前に計算する必要があるからです。

じゃないと、適切なインデントを実現できませんよね。

しかしchrome/firefox/safariにこれを表示させると、いずれも桁数が大きくなったところで、以下のようにリストの添字部分が「画面の左側」に見切れてしまいます。

f:id:convertical:20151203101412p:plain

body{margin-left:3em}みたいな設定をしていたってダメです。左の限界を突破して表示が切れます。

もちろん普通に考えると、li要素にそれぞれ違う文字サイズを付与することなんて考えにくいことなので、実用上は問題ないのです。

ただ正確に扱おうとするなら、リスト要素もテーブル組版と同じく、先に必要領域を計算する必要のある重い組版に該当するわけです。

この1000行のリストが、現状のブラウザで瞬時に表示されるのは、単に各ブラウザが厳密な計算をサボっているだけで、組版処理そのものが単純だからではありません。

というわけで、リストの組版も（テーブル組版ほどではないですが）、なかなかに複雑な処理なのです、というお話しでした。

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

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