# Print CSS exporting PDF

**URL:** <https://community.weweb.io/t/print-css-exporting-pdf/14352>\
**Category:** How do I?\
**Created:** [November 6, 2024, 8:11am UTC](https://community.weweb.io/t/print-css-exporting-pdf/14352 "2024-11-06T08:11:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tillyboard](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/tillyboard/32/3317_2.png) [@tillyboard](https://community.weweb.io/u/tillyboard)\
**Post date:** [November 6, 2024, 8:11am UTC](https://community.weweb.io/t/print-css-exporting-pdf/14352/1 "2024-11-06T08:11:35Z")

</div>

How to integrate PrintCSS into WeWeb to hide certain elements for printing or PDF export using CSS when `@media print` is specified. While I could potentially manage the hiding part with a workflow, I’d like to print a specific section with predefined settings for orientation (either portrait or landscape). This means I don’t want users to have the option to change orientation in the print dialog, as I want the PDF to have perfect page breaks and layout without allowing customization that might lead to unwanted adjustments.

Is this possible? @Broberto has referenced PrintCSS in many topics related to PDF creation, so I’d like to understand how this can be incorporated into WeWeb.

That’s the css code i would like to use:

```auto
@media print {
  /* Hide navigation and footer */
  .navbar, .footer {
    display: none;
  }
  /* Set page size and orientation */
  @page {
    size: A4 landscape;
    margin: 1cm;
  }
  /* Additional print-specific styles */
  .print-section {
    font-size: 12pt;
    color: #000;
  }
}

```

```auto
<link rel="stylesheet" href="URL-of-my-uploaded-css-file">

```

In yesterday’s Office Hours, I briefly mentioned my question about whether `@media print` or `@page` is already functional in WeWeb. @flo mentioned that this is currently not possible, though there’s another topic linked here. [How to use @page css on a weweb page](https://community.weweb.io/t/how-to-use-page-css-on-a-weweb-page/7846) Was there any discussion about the integration of `@page` and its rules? I wonder if it might be possible.

---

<div class="post-metadata">

**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:** [November 8, 2024, 10:53am UTC](https://community.weweb.io/t/print-css-exporting-pdf/14352/2 "2024-11-08T10:53:30Z")

</div>

Hi, you can simply embed this with a `<style></style>` tag in an HTML element. I think I did it like this and it worked like a charm.

---

<div class="post-metadata">

**Author:** ![OpeCEC](https://avatars.discourse-cdn.com/v4/letter/o/7feea3/32.png) [@OpeCEC](https://community.weweb.io/u/OpeCEC)\
**Post date:** [February 17, 2025, 5:07pm UTC](https://community.weweb.io/t/print-css-exporting-pdf/14352/3 "2025-02-17T17:07:22Z")

</div>

Hey @Broberto

I’ve been trying to use your code into an HTML element without any luck.

Does it still work on your side ?

---

<div class="post-metadata">

**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:** [February 17, 2025, 5:08pm UTC](https://community.weweb.io/t/print-css-exporting-pdf/14352/4 "2025-02-17T17:08:43Z")

</div>

It should 👍