Плавающие html элементы вверх или вниз во время печати, чтобы избежать пустого пространства - PullRequest
0 голосов
/ 13 февраля 2020

Я печатаю html документов с изображениями. Изображения всегда печатаются в порядке их появления в файле html. Когда оставшееся пространство на любой странице слишком мало для размещения следующего изображения, создается принудительный разрыв страницы, и изображение перемещается в верхнюю часть следующей страницы, оставляя потенциально большое пространство на предыдущей странице.

Есть ли способ избежать этих пробелов? Есть ли способ вытащить абзац, следующий за изображением в html, в пустое пространство?

Вот минимальный пример. При печати в формате A4 с использованием Safari на первой странице появляется большое пустое пространство.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    <figure>
        <img src="https://live.staticflickr.com/5642/22589328394_62f81792b1_c_d.jpg" alt="An image" width="60%">
        <figcaption>CC BY 2.0 oatsy40@flickr</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    </body>
</html>

1 Ответ

0 голосов
/ 07 апреля 2020

В настоящий момент эта функция не существует (апрель 2020 г.). Существует Publi c Рабочий черновик на странице Floats , который содержит именно эту функцию.

...