Hi,
We are generating a PDF that contains a number of "boxes". Those boxes need to have the content that is vertically and horizontally aligned. The easiest way to achieve it is using flexbox.
We see two problems with the output:
Including a screenshot of the Chrome output next to Prince. Firefox is mostly identical to Chrome.
So I wonder if that's another peculiarity of CSS or potentially a bug?
What would be your recommendation for making it look consistent with the browsers?
The HTML is:
Thanks in advance.
We are generating a PDF that contains a number of "boxes". Those boxes need to have the content that is vertically and horizontally aligned. The easiest way to achieve it is using flexbox.
We see two problems with the output:
- `<br />` tags do not break lines with flex
- there is a visual artefact (white line) where the box shadow is applied
Including a screenshot of the Chrome output next to Prince. Firefox is mostly identical to Chrome.
So I wonder if that's another peculiarity of CSS or potentially a bug?
What would be your recommendation for making it look consistent with the browsers?
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
@page {
size: 100mm 150mm;
padding: 0;
margin: 0;
}
body,
* {
font-family: Tahoma;
font-size: 16pt;
padding: 1cm;
}
.box {
width: 50mm;
height: 30mm;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: black;
color: white;
box-shadow: 0 0 0 5mm black;
line-height: 1em;
}
</style>
</head>
<body>
<div class="box">
L: 101cm
<br />
W: 1020cm
<br />
H: 1030cm
</div>
</body>
Thanks in advance.