Adaptive Layoutでのフローの遷移?

[Kenshi Muto]

こんばんは、

Adaptive Layoutを使ってのページ配置実験をしているのですが、
遷移のところがどうも理解しきれておらず、自力で問題を解決で
きないため、質問させてください。

添付のものはサンプルのCSSをもとに作ってみた小さなものです。
body/
section/
h1, span
h2, span, p
section/h1, span
h2, span, p

というドキュメント構造で、vivliostyle.jsでのプレビューで
本文やページ・柱はうまくできています。

しかし、章扉を作るためにh1を-epubx-flow-intoでchapter-title-flowの
フローに遷移させているのですが、ここでなぜかh1が最初に2つとも取り出さ
れてしまいます。

どこかでCSSかHTMLの誤りがあるのだと思いますが、ご指摘いただけ
ないでしょうか。
(Adaptive Layoutでちょっと間違えるとvivliostyle.jsが頻繁に固まって
しまうのがなかなか厳しいです……)

[Kawakubo Toru]

武藤さま

Vivliostyle川久保です。
わかりやすいドキュメントがなく、ご不便おかけしております。

> On 2016/08/29, at 0:34, Kenshi Muto <kensh...@gmail.com> wrote:
>
> Adaptive Layoutを使ってのページ配置実験をしているのですが、
> 遷移のところがどうも理解しきれておらず、自力で問題を解決で
> きないため、質問させてください。
>
> 添付のものはサンプルのCSSをもとに作ってみた小さなものです。
> body/
> section/
> h1, span
> h2, span, p
> section/h1, span
> h2, span, p
>
> というドキュメント構造で、vivliostyle.jsでのプレビューで
> 本文やページ・柱はうまくできています。
>
> しかし、章扉を作るためにh1を-epubx-flow-intoでchapter-title-flowの
> フローに遷移させているのですが、ここでなぜかh1が最初に2つとも取り出さ
> れてしまいます。
>
> どこかでCSSかHTMLの誤りがあるのだと思いますが、ご指摘いただけ
> ないでしょうか。

Adaptive Layoutでは、ページマスター選択の際にある程度ソース文書を先読みし、
そこで見つかった要素をレイアウトに使用します。
デフォルトでは、デフォルトのフォントサイズでだいたい1ページに収まる程度の先読みをします。
今回のケースでは、1つ目のsectionが短いため、先読みが2つ目のh1まで到達してしまい、
1ページ目に2つ目のh1まで取り出されています。

CSSシークレットの制作時に同じ問題に突き当たったため、Vivliostyleの実装には追加仕様を加えています。
この追加仕様を使うと、今回の場合は問題を回避することができます。
具体的には、body > sectionに’page-break-before: always’を指定すると問題は解決します。

以下、追加仕様についてご説明します。その追加仕様とは、
「あるコンテンツ（Aと呼ぶことにします）の親フローに強制改ページがあり、
　その強制改ページがソース文書内でAより前にある場合、
　Aはその強制改ページより前にレイアウトされることはない」
というものです。

まず、「親フロー」ですが、実装の内部では、各フロー間に親子関係を設定しています。
あるフローの親フローは、「そのフローに属する最初の要素の親要素が属するフロー」として定義されます。
今回の例ですと、chapter-title-flowの最初の要素は1つ目のbody > section > h1なので、
その親要素のbody > sectionのフローであるchapter-flowが親フローとなります。

今回は、sectionの中に入っているh1が、1つ目のsectionを飛び越えて1ページ目に来ているわけですが、
sectionの区切りで強制改ページを入れると、2つ目のsection内のh1は、
1つ目と2つ目のsection間の強制改ページを超えられなくなります。
したがって、1つ目のsectionの内容がすべてレイアウトされた後に、
2つ目のsection内のh1がレイアウトされることになります。

なお、この追加仕様はまだドキュメント化できていません（TODOには入っているのですが…申し訳ありません）。

ちなみに、実はオリジナルのAdaptive Layoutの機能を使った回避策もあります。
ソース文書の先読み量を、-epubx-utilizationプロパティを使って小さくするという方法です。

3.4.15. Lookup range: the ‘-epubx-utilization’ property
http://www.idpf.org/epub/pgt/#s3.4.15

このプロパティの初期値は1ですが、これを0.1や0.05など小さな値に変更すると、
先読みの量を小さくでき、先の方のコンテンツを手前に持ってくることを防ぐことができます。
ただし、先読みの量の変更によって、ページマスター選択などに副作用が出ることもあります。


> (Adaptive Layoutでちょっと間違えるとvivliostyle.jsが頻繁に固まって
> しまうのがなかなか厳しいです……)

固まるというのは、ブラウザがフリーズしてしまうということでしょうか。
その場合は何らかのバグだと思われますので、ご報告いただければ調査いたします。
そうではなく、ページ数が多くて、レイアウト完了して操作を受け付けるまでの時間が長いということでしたら、
現在、対策を実装中です。もうしばらくお待ちいただければと思います。


--
Toru Kawakubo （川久保 亮）
Vivliostyle Inc.
http://vivliostyle.com

[Kenshi Muto]

At Mon, 29 Aug 2016 13:34:16 +0900,
Kawakubo Toru wrote:
> わかりやすいドキュメントがなく、ご不便おかけしております。

なかなかないですよね…。

> > On 2016/08/29, at 0:34, Kenshi Muto <kensh...@gmail.com> wrote:
> > しかし、章扉を作るためにh1を-epubx-flow-intoでchapter-title-flowの
> > フローに遷移させているのですが、ここでなぜかh1が最初に2つとも取り出さ
> > れてしまいます。
> >
> > どこかでCSSかHTMLの誤りがあるのだと思いますが、ご指摘いただけ
> > ないでしょうか。
>
> Adaptive Layoutでは、ページマスター選択の際にある程度ソース文書を先読みし、
> そこで見つかった要素をレイアウトに使用します。
> デフォルトでは、デフォルトのフォントサイズでだいたい1ページに収まる程度の先読みをします。
> 今回のケースでは、1つ目のsectionが短いため、先読みが2つ目のh1まで到達してしまい、
> 1ページ目に2つ目のh1まで取り出されています。
>
> CSSシークレットの制作時に同じ問題に突き当たったため、Vivliostyleの実装には追加仕様を加えています。
> この追加仕様を使うと、今回の場合は問題を回避することができます。
> 具体的には、body > sectionに’page-break-before: always’を指定すると問題は解決します。

おぉ、なるほど。うまくいきました。

> 以下、追加仕様についてご説明します。その追加仕様とは、
> 「あるコンテンツ（Aと呼ぶことにします）の親フローに強制改ページがあり、
> 　その強制改ページがソース文書内でAより前にある場合、
> 　Aはその強制改ページより前にレイアウトされることはない」
> というものです。

はい、挙動理解できました。Adaptive Layoutだとページの領域を
コードから想像しながら全体の構造を作っていく必要がありますね
(定義順序というかフローに入る順序も注意が必要？)。

> ちなみに、実はオリジナルのAdaptive Layoutの機能を使った回避策もあります。
> ソース文書の先読み量を、-epubx-utilizationプロパティを使って小さくするという方法です。

> このプロパティの初期値は1ですが、これを0.1や0.05など小さな値に変更すると、
> 先読みの量を小さくでき、先の方のコンテンツを手前に持ってくることを防ぐことができます。

あぁ、そういう意味だったのですね。サンプルCSSやドキュメントは見ていたのですが、
いまいち意味や効果がわからず、不思議に思っていたのでした。
ありがとうございます。

> > (Adaptive Layoutでちょっと間違えるとvivliostyle.jsが頻繁に固まって
> > しまうのがなかなか厳しいです……)
>
> 固まるというのは、ブラウザがフリーズしてしまうということでしょうか。
> その場合は何らかのバグだと思われますので、ご報告いただければ調査いたします。

Chrome上ですが、ページを読んだあと、Loading...の点滅でページがレンダリング
されない(マシンによっては強制停止メニュー選択が出たりする)という状況です。
(Developer Toolウィンドウで見ると表示で無限ループしている？)

ロジックの間違いが理由なので、こっちが悪いといえばそれまでなのですが、
たとえば先のCSSで body > section > .h1-label の -epubx-flow-into: を body
にしたりすると発生します(vivliostyle.js 2016.7)。

これはあからさまなパターンですが、紙面作りの試行錯誤中だと類似のフロー定義の抜けや誤り
などを起こしやすく、確認手段がブラウザ上だけなので、シンタックスエラーが提示されずに
ただ止まっているというのは何が悪かったのかの追跡が難しいですね。

[Kawakubo Toru]

On 2016/08/29, at 14:42, Kenshi Muto <kensh...@gmail.com> wrote:

以下、追加仕様についてご説明します。その追加仕様とは、
「あるコンテンツ（Aと呼ぶことにします）の親フローに強制改ページがあり、
　その強制改ページがソース文書内でAより前にある場合、
　Aはその強制改ページより前にレイアウトされることはない」
というものです。

はい、挙動理解できました。Adaptive Layoutだとページの領域を
コードから想像しながら全体の構造を作っていく必要がありますね
(定義順序というかフローに入る順序も注意が必要？)。

現状では親フローの定義がソース文書の構造に依存しているので、

ソースの構造がレイアウトに影響を与えてしまいますね。

もしかすると、親フローはソースの構造から決めるのではなく、

CSSで明示的に指定するようにした方が扱いやすいかも、という気もしています。

ここは人によって賛否両論あるかもしれませんね。

(Adaptive Layoutでちょっと間違えるとvivliostyle.jsが頻繁に固まって
しまうのがなかなか厳しいです……)

固まるというのは、ブラウザがフリーズしてしまうということでしょうか。
その場合は何らかのバグだと思われますので、ご報告いただければ調査いたします。

Chrome上ですが、ページを読んだあと、Loading...の点滅でページがレンダリング
されない(マシンによっては強制停止メニュー選択が出たりする)という状況です。
(Developer Toolウィンドウで見ると表示で無限ループしている？)

ロジックの間違いが理由なので、こっちが悪いといえばそれまでなのですが、
たとえば先のCSSで body > section > .h1-label の -epubx-flow-into: を body
にしたりすると発生します(vivliostyle.js 2016.7)。

これはあからさまなパターンですが、紙面作りの試行錯誤中だと類似のフロー定義の抜けや誤り
などを起こしやすく、確認手段がブラウザ上だけなので、シンタックスエラーが提示されずに
ただ止まっているというのは何が悪かったのかの追跡が難しいですね。

なるほど、CSSの書き方によって無限ループが発生してしまうということですね。

確かにその通りで、現状のAdaptive Layoutの仕様に穴があるということだと思います。

実装、仕様の両面から改善を検討していきたいと思います。

ご意見ありがとうございます。