function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

VF RenderAs PDF page size as A4


We are using VF to generate a Quote for jobs based on Opps + Products we need it to render the PDF attachment as A4 rather than Letter size --- is this possible?

Adam // Internetware

Message Edited by AdammcUK on 01-20-2009 05:13 PM



I haven't worked with A4 paper size, but the renderAs=pdf functionality does honor at least this type of @page directive in CSS (we use it to get page numbering and landscape printing in PDF's):


@page { size:landscape;

@top-right { /* page numbers */
content: "Page " counter(page);


 Theoretically this would achieve A4:


@page { size: 8.27in 11.69in; /* A4 width and height */ }

Good luck and I would be interested to know if this works for you.


Jeremy Kraybill

Austin, TX




Yes - that does indeed work perfectly - thanks for taking the time to post


I also managed to sort out my other issue with VisualForce PDF and Fonts being stuck on Times Roman, you must use "Arial Unicode MS" in your CSS definition - I cannot yet get this to go bold in VF but its a 100 times nicer than Time Roman




I have a question about @page. Should this be defined in your style section like this:



<style type="text/css"> @page { size:landscape; @top-right { /* page numbers */ content: "Page " counter(page); } } </style>


Google wasn't very helpful when searching "css @page" as it appears to be ignoring the "@" symbol. If anyone as a link with some documentation on @page that would be great. Thanks.



Here is the official w3 @page doc.


Generally instead of inline CSS for PDF rendering, I use the stylesheet tag:


<apex:stylesheet value="{!$Resource.myCSS}"/>



Jeremy Kraybill

Austin, TX



One last question. I'm still learning all this css stuff. When I create my .css file do I need to have the style tags in it:



<style type="text/css"> @page { size:landscape; @top-right { /* page numbers */ content: "Page " counter(page); } } .bold{ font-weight: bold; } </style>


 Or just like this:


@page { size:landscape; @top-right { /* page numbers */ content: "Page " counter(page); } } .bold{ font-weight: bold; }

I plan to move all the inline styling to a  static style sheet but when developing it makes it easier to code as I don't have to keep uploading the file for every little change.






There are tons of good CSS intros out there that describe all the details you will need to know. Here is an example of a good one.


Jeremy Kraybill

Austin TX


Hi Jeremy,


You seem to have some good knowledge on this, so I hope you don't mind an additional question - 


Have you had any luck flowing any sort of styled content a la divs or something into those @page headers/footers?    We have only been able to get plain text to work.  It would be fantastic if we could put some HTML in there for more 'robust' headers and footers.




Not really my area of expertise, I've only used straight plain text. I believe according to the spec, you should be able to use at least text styling directives on the header so you should be able to do better than actual "plain text" but haven't used it. I haven't seen any examples of using the "content:" attribute to populate anything other than text.


Jeremy Kraybill

Austin, TX


This works for me in @page:



size: A4;




Message Edited by Shikibu on 11-02-2009 03:44 PM