WeasyPrint
WeasyPrint copied to clipboard
Published
20 hours ago •
Kozea
Kozea
Incorrect margins when using flexboxes
Hi,
I'm trying to render this :point_down:
<!DOCTYPE html>
<html>
<head>
<title>Server side Rendering</title>
<style>
@page {
width: 210mm;
height: 297mm;
margin: 0;
}
</style>
</head>
<body style="margin:0">
<div id="app">
<div style="display: flex; flex-direction:column">
<h1 style="margin-bottom:60px">sdfasdfasdf sadfasdfasdf afddf</h1>
<h1 style="margin-bottom:60px">sdfasdfasdf sadfasdfasdf afddf</h1>
<h1 style="margin-bottom:60px">sdfasdfasdf sadfasdfasdf afddf</h1>
</div>
</div>
</body>
</html>
But I can see that there are extra spaces between h1 tags once it's rendered.
Print preview of HTML:
Print preview of generated PDF:
Spaces are accurate when I remove the flexbox. Any thoughts please?
Weasyprint version: 54
The flexbox items’ margins should probably collapse with their children’s. Removing the bottom margin of the h1 should work as a dirty workaround.
More on this (I guess it is the same issue). Flex style attributes are not interpreted correctly at all in the 54 series. I hope this minimal html can help debugging the issue
<!doctype html>
<html>
<body>
<div style="display: flex;">
<span style="flex: 3;">foo</span>
<span style="flex: 8;">bar</span>
</div>
</body>
</html>
Hi, same problem here. WeasyPrint renders extra space with flexbox (the div with red background). Here is the code :
<html>
<head>
<meta charset="utf-8">
<link href="report.css" rel="stylesheet">
<title>Report</title>
<meta name="description" content="Report example">
{% block head %}
<style>{{include('bonLivraison/test.css.twig')}}</style>
{% endblock %}
</head>
<body>
<article>
<div class="edition">
<div><p class="date">Édition du : 22/07/2022</p></div>
<div><p class="jour">Livraison du vendredi</p></div>
</div>
<div class="client">
<p><strong>Client</strong> :</p>
<p><strong>Date d'anniversaire</strong> :</p>
<p><strong>Adresse de livraison</strong> :</p>
<p><strong>Informations complémentaires</strong> :</p>
<p><strong>Formules souscrites</strong> :</p>
<p><strong>Option(s)</strong> :</p>
</div>
<div class="menu_header">
<p style="background-color: black">Au menu</p>
</div>
<div class="menu">
<p>Repas de :</p>
<p>Formules :</p>
<div>
<p>Tableau</p>
</div>
</div>
</article>
</body>
</html>
.menu_header {
display: flex;
font-size: 12pt;
font-weight: 400;
background: #F3583B;
color: white;
padding: 0 1cm;
text-align: center;
}
.edition {
padding: 0 1cm;
font-size: 12pt;
font-weight: 400;
background: #F3583B;
color: white;
display: flex;
justify-content: space-between;
}
