Forum How do I...?

font size

mrossi
Hello,

experimentation with Prince shows that, given a fixed block width (e.g., 210 mm), fonts must be scaled at 120% to appear consistently with the screen output rendered by all recent browsers (Firefox 14, IE 9, Opera 12, Chrome 21, Safari 5).

What is the underlying reason for this?
mikeday
Font sizes can be specified in absolute units, like points, millimetres, or inches, in which case it is easy to see how they will appear on the printed page. It gets more complex when relative units like pixels are used, as the mapping between pixels and paper is not so straightforward. Currently Prince assumes that pixels are 96dpi, so that 96px = 1in. This means that 12px fonts should be the same size as 9pt fonts, and 12pt fonts should be the same size as 16px fonts.
mrossi
Afaik, a px is as absolute as a mm or a pt is: 1px = 0.75pt (http://www.w3.org/TR/CSS2/syndata.html#length-units), that is 96px = 72pt = 1in as you observe. But this is fixed in spec, and Prince should not assume it but take it for granted.

Since we are using absolute lengths in our CSS, I still cannot see how the factor 120% comes out. According to your explanation, I could understand a ratio of 133.33% (96 / 72), but not a factor of 120% as experiment shows.
mikeday
Good point, pixels have not been classified as a relative unit for some time in CSS 2.1, so I am being forgetful. When we started developing Prince they were still relative. :)

Regarding measurement, you should get consistent results with a simple test document like this:
<html>
<body>
<p style="width: 72pt; background: green">
Hello!
</p>
<p style="width: 96px; background: green">
Hello!
</p>
</body>
</html>

Both paragraphs should create a green box 1in wide. For fonts it can be less obvious if the size is correct, as different fonts use different proportions of the em-square. But given that Prince embeds font sizes directly in the generated PDF in a very transparent manner, it seems more likely to me that browsers are getting it wrong in this case.