Log in / Register

Forum › Bugs

Line Height Difference in Browser vs PDF?

nishantvarma
I have a problem with Line Height when we use small fonts.

<span style="font-family:Arial;font-size:6pt;">Hello World</span>
<br />
<span style="font-family:Arial;font-size:6pt;">Hello World</span>

Why would the line-height be so different in Browser vs PDF?

Shouldn't Prince XML do it like browser standards or am I missing something here?

I preview the PDF at 100%.
mikeday
Have you specified a value for the line-height property?
nishantvarma
No this example is as is I have not specified. I can specify line-height and make this better but any reasons why it is different from the browser? The reason I am concerned is specifying line-height for different font's can be tricky. So if it defaults to browser it would be better for the end user?
pjrm
These come out very similar between Prince and Firefox for me: I can't visually tell the difference.
(I haven't tried printing to pdf from Firefox, but it sounds as if you can see an obvious visual difference without needing a careful comparison; correct?)

<span> is an inline element [assuming no additional stylesheet], so the line-height is determined primarily by the line-height of the block-level element that contains the span. What happens if you change the example to be <html><p style="font: 6pt Arial">Hello World<br/>Hello World</p></html>, do they still look very different on your system? What version of the browser, O/S and Prince ?
nishantvarma
Version is Chrome Version 43.0.2357.81 and Prince 10 Rev 2.

<p style="font: 6pt Arial">Hello World<br/>Hello World</p> looks the same in browser and prince.

<span style="font-family:Arial;font-size:6pt;">Hello World <br />Hello World</span> doesn't look the same as in browser.

I would be curious to know why!
pjrm
Part of the reason for differences is that different browsers have a different default font & size (and you might even have changed your default in the browser preferences). We can get rid of that difference by changing the example to

<p style="font-size: 16px; font-family: 'Times New Roman'">
<span style="font-family:Arial;font-size:6pt;">Hello World</span>
<br />
<span style="font-family:Arial;font-size:6pt;">Hello World</span>
</p>


Another reason for differences is that different browsers use a different way of calculating standard line spacing even for a given font. In the above example, I get a line height of 17.5px in Firefox, 20.0225px in Chromium, and 19.2px in Prince 10.

Another reason for differences is that line height calculations haven't been a strong point of CSS, neither in its per-glyph half-leading model (which leads to surprising variation in baseline-to-baseline distances), nor in its description of how things should work. Which might be why it looks to me in my experimentation over the last couple of days as if neither browsers nor Prince quite follow what the spec says anyway. (However, maybe I'm misinterpreting something.)

You might want to have a look at Section 1.8 of CSS2 for what the spec says; or you might wish to have a play with Prince's line-stacking-strategy property to change to arguably better approaches to choosing where each line appears.