要素をページ跨ぎさせない方法

[Akihiro Kameda]

環境など：

- https://github.com/vivliostyle/vivliostyle-ui/tree/master/dist の latest release と latest development の２つを HTML のビューワから試した

- Google Chrome バージョン 49.0.2623.87 m

- Windows 10

まだ試しに使い始めたばかりで、初歩的な質問失礼します。

今、画像とそのキャプションのようにページ跨ぎさせたくない要素があります。

ドキュメント(http://vivliostyle.com/en/documentation/supported-features/) を見ると、 break-inside: avoid がサポートされているようですので、https://css-tricks.com/almanac/properties/b/break-inside/ を参考にブラウザプレフィックスをつけて、

.imageblock{
 -webkit-column-break-inside:avoid !important;
 -moz-break-inside:avoid !important;
 break-inside:avoid !important
}

としてみました。対応するHTMLは

<div id="図１" class="imageblock">
<div class="content">
<img src="./figs/12_1_15-fig1.png" alt="12 1 15 fig1">
</div>
<div class="title">図１ 宗教活動の実践頻度</div>
</div>

のようになっています。生のHTMLについてはブラウザのコンソールから要素に対してCSSが割り当たっていることが確認できました。

しかし、Vivliostyle を通してみてみると、

このようにページを跨いでレンダリングされてしまいます。

もちろん画面の大きさによっては大丈夫ですが、サイズを（悪く）調整するとこの現象が生じます。

分かれてしまった要素それぞれに break-inside: avoid  が適用されてないようですが、

そもそもHTML のレベルで別々の div に 分解されてしまっているので小手先で後処理もできない状況です。

vivliostyle.js に要素をページ跨ぎさせたくないことをどうやって伝えればよいでしょうか。

[kwk...@vivliostyle.com]

Vivliostyle川久保です。お問い合わせありがとうございます。

2016年4月3日日曜日 14時05分24秒 UTC+9 Akihiro Kameda:

環境など：

- https://github.com/vivliostyle/vivliostyle-ui/tree/master/dist の latest release と latest development の２つを HTML のビューワから試した

- Google Chrome バージョン 49.0.2623.87 m

- Windows 10

まだ試しに使い始めたばかりで、初歩的な質問失礼します。

今、画像とそのキャプションのようにページ跨ぎさせたくない要素があります。

ドキュメント(http://vivliostyle.com/en/documentation/supported-features/) を見ると、 break-inside: avoid がサポートされているようですので、https://css-tricks.com/almanac/properties/b/break-inside/ を参考にブラウザプレフィックスをつけて、

.imageblock{
 -webkit-column-break-inside:avoid !important;
 -moz-break-inside:avoid !important;
 break-inside:avoid !important
}

としてみました。対応するHTMLは

<div id="図１" class="imageblock">
<div class="content">
<img src="./figs/12_1_15-fig1.png" alt="12 1 15 fig1">
</div>
<div class="title">図１ 宗教活動の実践頻度</div>
</div>

のようになっています。生のHTMLについてはブラウザのコンソールから要素に対してCSSが割り当たっていることが確認できました。

しかし、Vivliostyle を通してみてみると、

このようにページを跨いでレンダリングされてしまいます。

もちろん画面の大きさによっては大丈夫ですが、サイズを（悪く）調整するとこの現象が生じます。

 
CSSの指定の方法は正しいので、Vivliostyleの不具合の可能性が高いと思います。
手元で同じCSSを使ったサンプルを作ってみましたが、現象が再現できませんでした。
お手数ですが、不具合が起こる小さなサンプルファイルをお送りいただくことはできますでしょうか？
テキストはダミーのものに置き換えていただいてかまいません。
また、画像ファイルは、縦横のサイズが分かれば添付していただかなくても大丈夫です。
現象が確認できれば、不具合の調査ができると思います。
お手数ですが、よろしくお願いいたします。

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