Search code examples
htmlcssimageprintingweasyprint

Float html elements up or down while printing to avoid blank space

I am printing html documents with images. Images are always printed in the order they appear in the html file. When the remaining space on any page is too small to fit the next image, an unforced page break is created and the image moves to the top of the next page leaving a -- potentially large -- blank space on the previous page.

Is there a way to avoid these blank spaces? Is there a way to pull the paragraph that follows the image in the html into the blank space?

Here's a minimal example. When printed to A4 using Safari, the first page has a large blank space.

<!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>
Solution

  • The feature does not exist at the moment (Apr 2020). There is a Public Working Draft on Page Floats which contains exactly this feature.