CSS media queries
mb21 opened this issue · comments
Since iA Writer 4.0.4 (or possibly 4.0.3), when exporting to PDF the media queries that are responsive to the width of the document in my template are broken.
The CSS inside @media (max-width: 590px) used to not take effect when printing/exporting. Now I need to use the ridiculously low @media (max-width: 90px).
What's the recommended way to do those? @media print doesn't seem to take effect.
- What paper size is set in File → Page Setup?
- Which macOS version is installed on you machine?
4.0.4 fixed an issue where PDF generation was broken on High Sierra when headers or footers were enabled. As far as I can see, everything else is working well on Sierra and High Sierra. Print media queries are working as intended when I export documents using built-in templates.
- Page Setup: A4
- macOS Sierra 10.12.6 (16G29)
document.write( window.innerWidth );
document.write( window.outerWidth );
document.write( window.innerHeight );
document.write( window.outerHeight );
The above js returns the following values in print mode:
100, 100, 100, 122
Sorry about the print media queries, they indeed seem to work correctly for me as well.
@mb21 You’re correct, the hidden window used for generating PDFs doesn’t match paper dimensions. Thank you for reporting this issue! We’ll fix it in the next update.
Thanks for looking into this.
btw, what is the measure for a px you are using? Are you following the CSS spec's 1px=1/96inch?
(The reason I'm asking is that I've been using pixels all over for font-sizes etc. but would like to use cm for the page margins... but the math doesn't seem to add up with 96dpi.)
This is fixed in iA Writer 4.1.1, the above js now returns the following when printing to A4:
596
596
842
842
@mb21 Thank you again for reporting the issue!