search

zopyx / print-css-rocks

CSS Paged Media tutorial and review of tools (repository for print-css.rocks)
https://print-css.rocks
168 stars 29 forks source link

Font size is 120% bigger on other tools compared to Paged.js #7

Closed ggrossetie closed 3 years ago

ggrossetie commented 4 years ago

I'm trying to understand why the font is smaller on Paged.js: https://print-css.rocks/lesson/lesson-basic

The font is approximatively 120% bigger on other tools. To try to understand, I've created a simple document in LibreOffice using Lato 16pt:

100percent-libreoffice

I've also created the same document in HTML (with Paged.js):

<html>
<head>
  <style>
  @page {
    margin: 2cm;
    size: a4;
  }
  body {
    font-size: 16pt;
    line-height: 1.4;
    font-family: Lato;
    margin: 0;
    padding: 0;
    text-align: justify;
  }
  p:first-child {
    margin: 0;
  }
  </style>
  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit egestas euismod. Donec nec pharetra ex. Proin hendrerit ex tempor, ullamcorper purus in, aliquet elit. Sed semper in diam vel tempor. Phasellus rutrum mauris rhoncus, hendrerit neque at, tempor massa. Nam urna nisl, porta eget dictum a, suscipit vitae leo. Duis consequat sapien ac ultrices dignissim. Integer et elit nec ante ornare elementum hendrerit eget nunc. Vestibulum lacinia maximus massa, sit amet pulvinar nisl.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc in ornare nulla. Duis ut nisi suscipit, varius nulla at, fringilla massa. Nullam convallis ex mauris, vel euismod nunc iaculis condimentum. Nam sodales dolor vel ante vehicula pharetra. Praesent vestibulum elit ipsum, in euismod nisl imperdiet vel. Donec elementum urna at lectus condimentum, non viverra purus aliquam. Nullam ultricies eget lorem vitae consectetur. Phasellus non mauris pellentesque, venenatis neque id, tincidunt erat.</p>
<p>Vestibulum elementum eu est in egestas. Nulla aliquam augue viverra tortor ornare lacinia. Duis lobortis lorem lacus, et pulvinar turpis auctor vel. Cras arcu ex, iaculis eu risus vel, auctor convallis libero. Proin sed interdum risus. Sed sit amet metus ligula. Phasellus malesuada mollis metus, quis tristique risus tincidunt sed. Sed luctus dapibus orci quis scelerisque. Ut consequat tincidunt odio vitae volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer eleifend elit vel ultricies suscipit.</p>

</body>
</html>

And here's a screenshot of the PDF generated by LibreOffice (on the left) and the PDF generated by Paged.js (on the right):

font-lato-16pt

As you can see the font is slightly smaller on Paged.js but the ratio is only 1.03 (not 1.2). Since the difference is very small, it might just be a rounding issue.

Am I missing something? Do you know why the font is bigger on other tools? I couldn't find a specification on this topic so I'm not sure if Paged.js is right or wrong here.

As far as I understand, the pt unit depends on the points per inches, maybe we should use a font size in mm or inches to have a consistent output between tools?

ggrossetie commented 4 years ago

It seems that the screenshot of Prince is outdated. Here's what I get using Prince 13.5:

result-prince-13-5

zopyx commented 3 years ago

I checked the latest results from https://beta.print-css.rocks/lesson/lesson-basic - the font-sizes across all tools appear to be correct and identical

ggrossetie commented 3 years ago

I checked the latest results from beta.print-css.rocks/lesson/lesson-basic - the font-sizes across all tools appear to be correct and identical

Looks good, then I guess we can close this issue. Thanks for looking into it 👍🏻