Default output with larger fonts than expected
Invoking a default conversion of a quite plain HTML file (an automatic report from a third-party tool), I obtain quite larger fonts (smaller DPI?) than with a PDF printing from a standard web browser, as shown below.
Should I change the base font size? Should I change the DPI on output? How do I?
[EDIT]
Another possible explanation is that the original content has been seen with a smaller width span. Here are the messages I get on conversion:
> weasyprint.exe -v -s page.css c:\temp\reports\x.html c:\temp\x.pdf
INFO: Step 1 - Fetching and parsing HTML - c:\temp\reports\x.html
INFO: Step 2 - Fetching and parsing CSS - CSS string
INFO: Step 2 - Fetching and parsing CSS - CSS string
WARNING: Invalid or unsupported selector, '[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner'
WARNING: Invalid or unsupported selector, '[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring'
WARNING: Invalid or unsupported selector, '[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button'
WARNING: Invalid or unsupported selector, '[type=search]::-webkit-search-decoration'
WARNING: Invalid or unsupported selector, '::-webkit-file-upload-button'
WARNING: Ignored `box-shadow:1px 1px 5px black` at 41:115, unknown property.
WARNING: Ignored `overflow-x:visible` at 49:38, unknown property.
WARNING: Ignored `position:sticky` at 73:137, invalid value.
WARNING: Ignored `box-shadow:inset 0 -1px 0 gray` at 73:159, unknown property.
WARNING: Ignored `width:max-content` at 116:15, invalid value.
WARNING: Ignored `word-wrap:none` at 138:34, invalid value.
WARNING: Ignored `font-size:1vw` at 201:50, invalid value.
INFO: Step 3 - Applying CSS
INFO: Step 4 - Creating formatting structure
INFO: Step 5 - Creating layout - Page 1
INFO: Step 5 - Creating layout - Page 2
INFO: Step 5 - Creating layout - Page 3
INFO: Step 5 - Creating layout - Page 4
INFO: Step 6 - Creating PDF
INFO: Step 7 - Adding PDF metadata
How do I adjust or enforce the original document width?
Hi!
How do I adjust or enforce the original document width?
You can use @page’s size:
@page {
size: 210mm 297mm;
}
The default value is auto, which means that it’s chosen by the tool. WeasyPrint uses A4, and your browser Letter, I suppose.
Should I change the base font size?
Maybe the difference is caused by WARNING: Ignored "font-size:1vw" at 201:50, invalid value. The vw unit is not supported yet, see #1194.
Hi,
You can use
@page’ssize:@page { size: 210mm 297mm; }
That's fine for page settings, but my concern is about content relative width.
Should I change the base font size?
Maybe the difference is caused by
WARNING: Ignored "font-size:1vw" at 201:50, invalid value.The vw unit is not supported yet, see #1194.
I think this could be the point, as the "vw" unit was unknown to me either until I saw that error message!
What makes sense to me (not being a web developer) is that any conversion, without a scale from HTML relative units, is discretionable. PDF is print-perfect, it knows the density of a page and the exact size of its elements, but how large is HTML/CSS body or h1 text in absolute units? (I mean when they're not already specified in absolute units)
I think that in browsers it's enforced by the font points settings, which is an absolute unit. Eventually corrected by some scaling on the printing process and/or printer driver. In that sense, the "vw" relative unit would also come in handy, having the viewport as a fixed page size (let's say A4).
Can I scale printing to a page with WP as printer drivers do?
Given that my HTML reports are automatically generated I have a restricted range of options. I've seen that I can enforce a CSS, which by default is derived from https://github.com/necolas/normalize.css
[EDIT]
I found a second CSS that's included by the report generator, then I should be able to get rid of the used
@media print {
...
html, body {
...
font-size: 1vw;
}
}
and also be able to enforce a different printing font-size, this time forced with a size in points...
but how large is HTML/CSS body or h1 text in absolute units? (I mean when they're not already specified in absolute units)
Here is the table you’re looking for. The whole chapter is really useful to understand CSS units.
In that sense, the "vw" relative unit would also come in handy, having the viewport as a fixed page size (let's say A4).
vw is useful, but in case you know your page’s size, you can easily transform it into an absolute length.
Eventually corrected by some scaling on the printing process and/or printer driver.
I don’t think that browsers or printer drivers do this in your case. I think that the only difference here between WP and the browser is that the browser applies font-size: 1vw.
Given that my HTML reports are automatically generated I have a restricted range of options.
You can always use another stylesheet that will override the current one, that’s common when users can’t change the original stylesheets. The -s option can also be useful.
and also be able to enforce a different printing
font-size, this time forced with a size in points...
Yes, that’s the way to go!
Feel free to add a comment if we can help you further!