# How to use print.css to print a page fitting A4 format **URL:** \ **Category:** How do I?\ **Created:** [September 7, 2023, 7:26pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257 "2023-09-07T19:26:21Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![FJP84](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FJP84](https://community.weweb.io/u/FJP84)\ **Post date:** [September 7, 2023, 7:26pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/1 "2023-09-07T19:26:21Z")
Hi there, I have a use case in which a user can view an invoice on the screen. I want to add a button to print the invoice, either printing to paper or pdf. The printed version should fit the a4 and should only have the invoice. So navbar and print button should be excluded from the printed version. I noticed I could use window.print(), but I did not succeed to apply a specific css. I als tried to set a state prior to the print event, but that didn’t work. Looking forward to see some tips and tricks for this. ---
**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\ **Post date:** [September 8, 2023, 1:16am UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/2 "2023-09-08T01:16:15Z")
You can control how things print through a CSS media query applied through custom CSS. But there’s an interesting alternative approach in the form of paper CSS that you could include in either custom code or using the [State Change weweb embed too](https://weweb-embed.statechange.ai/)l: > **[GitHub - cognitom/paper-css: Paper CSS for happy printing](https://github.com/cognitom/paper-css)** > > Paper CSS for happy printing. Contribute to cognitom/paper-css development by creating an account on GitHub. ---
**Author:** ![FJP84](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FJP84](https://community.weweb.io/u/FJP84)\ **Post date:** [September 8, 2023, 7:09am UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/3 "2023-09-08T07:09:35Z")
Thanks I will look in to this. For example: I can use a print media query on the print button to set it to hidden. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 8, 2023, 8:06am UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/4 "2023-09-08T08:06:23Z")
Seems doable, but the print in editor doesnt work that good, as there is the UI. I’m publishing to find out how it keeps up. ![Screenshot 2023-09-08 at 10.05.30](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/ddbe52e9dc2af0347a6cda34f39aedcc1fbe7dbf.png) Seems like it works, but on chrome attempts to print two pages, instead of one 😃 Firefox works okay. ![Screenshot 2023-09-08 at 10.10.51](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/bb8e03fb17d7e382b163c88a4340cb84f35343df.jpeg) ---
**Author:** ![FJP84](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FJP84](https://community.weweb.io/u/FJP84)\ **Post date:** [September 8, 2023, 9:31pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/5 "2023-09-08T21:31:53Z")
Did you try out paper css? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 8, 2023, 9:48pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/6 "2023-09-08T21:48:35Z")
Hello, yes, what you see in the screenshot is actually paper css. I’ll be doing a tutorial this weekend on how to make an UI for this too. Edit: A demo can [be found here.](https://278d31b3-20c7-4f92-9a35-28bf62be6128-staging.weweb-preview.io/) Early next week, I’ll have the video ready on our agency channel) It’s pretty simple to implement tho! ---
**Author:** ![Blapril](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@Blapril](https://community.weweb.io/u/Blapril)\ **Post date:** [December 7, 2023, 4:49pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/8 "2023-12-07T16:49:56Z")
did you get a chance to do that video? where can I find it? ---
**Author:** ![julian](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@julian](https://community.weweb.io/u/julian)\ **Post date:** [May 13, 2024, 5:42pm UTC](https://community.weweb.io/t/how-to-use-print-css-to-print-a-page-fitting-a4-format/4257/9 "2024-05-13T17:42:38Z")
Hey there, I’m trying to set up paper css to print certain elements from a page. Following [this guide](https://github.com/cognitom/paper-css?tab=readme-ov-file#basic-usage), it seems that it’s required to add a class tag to the body element. Was anybody able to do this? (When I try to add custom code in the body element, I basically only add the code inside the body element, I’m not able to add the class to the body element itself.)