15

印刷するとき (または、一般に、ページ付きメディアにドキュメントを表示するとき)、ドキュメント要素をリフローして、一部の要素 (画像など) が実際のページの使用可能なスペースに収まらないために次のページに移動するようにすることは可能ですか?それに続く要素は、実際のページの残りのスペースに移動されますか?

LaTeX Floatsに似た (または同じ) 効果を達成しようとしていますが、CSS のみを使用しています。

それを説明するために、次のような状況があるとしましょう:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |  _________________  |
        | | Top of image A  | |
        |_|_________________|_|

         ---- page break -----
         _____________________
Page 2  | | Rest of image A | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

いくつかの基本的な CSS (この質問を参照) を使用すると、これを達成するのに問題はありません。

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |                     |
        |                     |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

しかし、私が本当に必要としているのは、次のようなものです。

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |         ...         |
        |_____________________|

したがって、基本的には、実際のページに残っているすべての残りのスペースを次の要素で埋めたいだけですimage A(もちろん、それらが収まる場合のみ)。

私はいくつかの CSS3 調査を行っており、Office エディターを CSS スタイリングに完全に置き換えることができるかどうかを確認したいので、ソリューションをまだサポートする必要はありません (つまり、現時点でいくつかのブラウザーに実装されています)。私が知りたいのは、それが CSS モジュールまたはコンストラクトでカバーされているかどうかだけです (たとえそれが作業中のドラフトであっても) ので、ブラウザーは将来的にそれをサポートすると推測できます。

私はすでにこれを検索しました

  • CSS3 ページ付きメディア,
  • CSS3 リージョンと
  • ページ付きメディア用の CSS3 生成コンテンツ

仕様と何も見つかりませんでしたが、単に何かを見落とした (またはまったく理解していなかった) 可能性がまだあるので、2 日間のグーグル検索の後、ここで質問する時が来たと思います :-)

編集：もう一度明確にするために：私は今、どのブラウザでもソリューションをサポートする必要はありません 。これを許可する標準または仕様があるかどうかを知る必要があります（そうであれば、その方法）。

4

1 に答える 1

4

これは闇の中での完全な刺し傷ですが、少なくとも正しい方向にあなたを設定するかもしれません...

page(n) 疑似要素セレクター、float / float-modifierプロパティ、および場合によってはCSS4 親セレクターを組み合わせることで、何らかの解決策が得られる場合があります。

いくつかの動作の例を次に示します。

/* CSS3 GCPM */
#image-a::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

/* CSS4 Parent Selector */
$#image-a ::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

これは基本的に、image-a が実際に 2 番目のページに折り返されている場合、float を適用して次のページの先頭に送信する必要があることを示しています。ブラウザーがこれをレンダリングする方法に応じて、探している結果が得られる場合があります (うまくいけば):

  1. 2 ページ目への折り返しが検出されました
  2. プロパティは、プロパティを要素全体に適用することをpage-break-before強制します (または、親セレクターがその仕事を行います)。float
  3. floatおよびmarginプロパティは、要素をドキュメント フローから除外し、他のコンテンツがそのスペースを占有できるようにします。

私はこれが本当のストレッチであり、うまくいかないことを知っていますが、おそらくそれはあなたがより確実な解決策を考え出すことを可能にする一連の思考を引き起こします:)

于 2012-06-07T22:50:38.313 に答える