How can I get Prince to render text that is vertically centered within its element? In chrome, the text is vertically centered, while in Prince, it seems to start from the top of the bounding box of the element. I added a red border to illustrate this issue. There is no additional padding inside of the element.
Forum › How do I...?
Text not vertically centered within box
It seems to be the font that I'm using. The font in question is Helvetica Neue LT Std: https://online-fonts.com/fonts/helvetica-neue-lt-std
So I guess the question now is how can I get the font rendering on Prince to be the same as with Chrome? This is important because I'm building a WYSIWYG editor and this font rendering difference throws off the spacing between elements in the final PDF output compared to the HTML preview.
So I guess the question now is how can I get the font rendering on Prince to be the same as with Chrome? This is important because I'm building a WYSIWYG editor and this font rendering difference throws off the spacing between elements in the final PDF output compared to the HTML preview.
It seems to be the font that I'm using. The font in question is Helvetica Neue LT Std: https://online-fonts.com/fonts/helvetica-neue-lt-std
So I guess the question now is how can I get the font rendering on Prince to be the same as with Chrome? This is important because I'm building a WYSIWYG editor and this font rendering difference throws off the spacing between elements in the final PDF output compared to the HTML preview.
So I guess the question now is how can I get the font rendering on Prince to be the same as with Chrome? This is important because I'm building a WYSIWYG editor and this font rendering difference throws off the spacing between elements in the final PDF output compared to the HTML preview.
Also the HTML and CSS was just a simple <h1> with a
border: 1px solid red
Attached is the source, sorry I should have posted this earlier:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {
border: 1px solid red;
font-family: "Helvetica-Nueue-LT";
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
Hi @ayu1,
I can see that the font is shifted upwards slightly, but I also see the same thing in Chrome so I think the font is the problem.
In the images you posted the text looks evenly spaced but the border is shifted, which is the opposite of what I'm seeing. Perhaps you have some other processing going on that is affecting the outcome?
Mark
I can see that the font is shifted upwards slightly, but I also see the same thing in Chrome so I think the font is the problem.
In the images you posted the text looks evenly spaced but the border is shifted, which is the opposite of what I'm seeing. Perhaps you have some other processing going on that is affecting the outcome?
Mark
Hi @markbrown,
I don't have any further processing going on. The HTML shown in Chrome is displayed inside an iframe to isolate any other styles from affecting the preview, and that same HTML is passed directly to Prince as the input.
Can you advise what Chrome version you are on and the code snippet that you tested? Hopefully I can reproduce what you are seeing.
Thanks for looking into this.
I don't have any further processing going on. The HTML shown in Chrome is displayed inside an iframe to isolate any other styles from affecting the preview, and that same HTML is passed directly to Prince as the input.
Can you advise what Chrome version you are on and the code snippet that you tested? Hopefully I can reproduce what you are seeing.
Thanks for looking into this.
A test case is attached. The 'fonts.css' file it refers to contains the output of 'prince --scanfonts' on the font file downloaded from the above link.
The PDF is produced with Prince 16, and the screenshot is from Chrome Version 133.0.6943.98 (Official Build) (64-bit).
Looking at the last row, it seems that the shifting box might be caused by baseline alignment or some other effect of the box being shorter.
Since you are seeing a difference with Chrome, however, perhaps font fallback is happening differently on the different systems? You can use the '-v' option to check which fonts Prince used. The font in question only has a 900 weight, and may not be the one that is actually being used.
The PDF is produced with Prince 16, and the screenshot is from Chrome Version 133.0.6943.98 (Official Build) (64-bit).
Looking at the last row, it seems that the shifting box might be caused by baseline alignment or some other effect of the box being shorter.
Since you are seeing a difference with Chrome, however, perhaps font fallback is happening differently on the different systems? You can use the '-v' option to check which fonts Prince used. The font in question only has a 900 weight, and may not be the one that is actually being used.