Page size ignored.

[indiamcq]

I have a html5 document with style:
@page { size: A4 ; padding: 0; margin: 0; }
This is in the head of the document. Everything else in the styles is working except that.
But the generated PDF is Letter sized not A4 size.

[Zulko]

Can you try to add this to your @page css and tell us if it worked ?

-relaxed-page-size: A4;

[ap91484]

The matching algorithm for these keywords is very strict. I have successfully set the page size with the following syntax:

@page {
  -relaxed-page-width: 210mm;
  -relaxed-page-height: 297mm;
  -relaxed-page-size: A4;
  size: A4;
  ... other settings
}

This resulted in a pdf with a page property of A4 (297mm x 210mm)
The option -relaxed-page-size: A4; is not sufficient, it can even be omitted. width and height are necessary. I left -relaxed-page-size in, maybe it is used in future versions.

[indiamcq]

Thanks for the feedback, I missed noticing it earlier.

Why does Relaxed need or even want its own named properties when size: is available?

[Zulko]

Because it uses Google Chrome, which, unlike Firefox for instance, distinguishes between paper size (provided in javascript at PDF generation time, and in ReLaXed defined by the -relaxed keywords) and page size (provided by the CSS @page). For instance you may want a tiny page size printed on a very large piece of paper (which for a PDF will result in large parge sizes but mostly white).

[Nabeel-khalid]

Hi, I'm having the same problem. The only difference is if I print from chrome it saves as a4 size but if I use relaxed it saves as the letter size.

This is my css
@page { size: A4; -relaxed-page-size: A4; -relaxed-page-width: 210mm; -relaxed-page-height: 297mm; }

[hoclun-rigsep]

Having similar issue

[hoclun-rigsep]

Guys I have an urgent need for a workaround here. Am using this to generate route sheets for food distribution in NYC with the Office of Emergency Management and they need to be legal size.

Thank you for anything anyone can offer. I am on macOS and I have tried the -relaxed-page* properties to no avail.

[Zulko]

Would you be able to be on a call and share your screen?

[Zulko]

Also can you confirm that this example doesn't work for you (in the sense that if you run it on your computer you won't get the same page size as on the picture):

https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/book

[hoclun-rigsep]

Ok, normally I don't comment on issue until due diligence but this time I'm on a time crunch. Thank you for getting back to me so quickly.

First thing I did was attempt to create a minimal example based on @ap91484 suggestion. That did not work.

Now I have built the example book and that does work.

Examining the example, could it be because I link the stylesheet in my html instead of letting relaxed find it in the project root dir?

[Zulko]

Yes, that's it! the CSS (at least the part with the -relaxed-page-size) should be in your document instead of linked. This is more elegant if you use Pug, which supports import. In our Pug examples, all CSS is imported (as in, pasted) into the final HTML document.

[hoclun-rigsep]

ok, so, I should put the relevant css in a <style> tag in my html head?

[Zulko]

I think anywhere is expected to work. Try and let us know later

[hoclun-rigsep]

I believe this solves the issue for me. Thank you very much for your timely response. I would be happy to submit documentation for this issue once I get a minute. Now I have to generate these forms so the drivers know where to get this food delivered tomorrow.

[Zulko]

👍 Good luck. Let us know if you run into something else.