Изменение потока документов на разрыве страницы для заполнения пробела

При печати (или, вообще говоря, отображения документа на постраничном носителе) возможно переплавление элементов документа, так что когда какой-либо элемент (например, изображение) смещается на следующую страницу, потому что он не помещается в свободное место на фактическая страница, элементы, следующие за ней, будут перемещены в оставшееся пространство фактической страницы?

Я пытаюсь добиться эффекта, аналогичного (или так же) 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 Paged Media,
  • Области CSS3 и
  • CSS3 Сгенерированный контент для печатных изданий

и ничего не нашел, но у меня все еще есть шанс, что я просто что-то пропустил (или вообще не понял), поэтому после двух дней Googling я предполагаю, что настало время спросить здесь: -)

<ч/" > EDIT:, чтобы еще раз пояснить: мне не нужно, чтобы решение поддерживалось в любом браузере сейчас, мне нужно знать, есть ли стандарт или спецификация что позволяет это (и если да, то как).

ОТВЕТЫ

Ответ 1

Это полный удар в темноте, но он может по крайней мере установить вас в правильном направлении...

Объединив селектор (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 */
}

В основном это означает, что если изображение - фактически накладывается на вторую страницу, то к нему следует применить float, отправляя его в начало следующей страницы. В зависимости от того, как браузеры выбрали это, вы можете получить результат, который вы ищете (надеюсь):

  • Обнаружение на второй странице обнаружено
  • Свойство page-break-before заставляет свойство float применяться ко всем элементам (или родительский селектор выполняет это задание)
  • Свойства float и margin переносят элемент из потока документов и позволяют другому содержимому принимать его в пространстве

Я знаю, что это реальный стрейч и не сработает, но, возможно, это вызовет линию мысли, позволяющую вам придумать более прочное решение:)