CSS @page - size



The size descriptor of @page at-rule in CSS is useful in defining the size and orientation of the box, that represents the page. Here the size is corresponding to the size of the printed page.

The size of the page is defined either using a scalable keyword or an absolute dimension value.

Possible Values

The size descriptor of @page at-rule in CSS contains one of the following values:

  • auto: Size of the page is decided by the user agent. Dimesnsions and orientation of the target page is used.

  • landscape: Content of the page is shown in landscape mode (longest side is horizontal).

  • portrait: Content of the page is shown in portrait mode (longest side is vertical). Default orientation value.

  • <length>: Any length value can be passed, where first value corresponds to the width of the box and second to its height. When only one value is provided, it is used for both width and height.

  • <page-size>: Specifies a keyword which can be one of the following values:

    • A5: Matches the standard ISO dimensions 148mm x 210mm.

    • A4: Matches the standard ISO dimensions 210mm x 297mm.

    • A3: Matches the standard ISO dimensions 297mm x 420mm.

    • B5: Matches the standard ISO dimensions 176mm x 250mm.

    • B4: Matches the standard ISO dimensions 250mm x 353mm.

    • JIS-B5: Matches the JIS standard dimensions 182mm x 257mm.

    • JIS-B4: Matches the JIS standard dimensions 257mm x 364mm.

    • letter: Equivalent to the dimensions of letter papers in North America, i.e., 8.5in x 11in.

    • legal: Equivalent to the dimensions of legal papers in North America, i.e., 8.5in x 14in.

    • ledger: Equivalent to the dimensions of ledger pages in North America, i.e., 11in x 17in.

Syntax

size: <length> | auto | [ <page-size> || [ landscape | portrait ] ];

CSS size - <page-size> and Landscape Value

Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: A4 landscape;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>landscape</h1>
   <p>See the size and orientation of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS size - <page-size> and Potrait Value

Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and portrait.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: A4 portrait;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>portrait</h1>
   <p>See the size and orientation of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS size - Custom Size

Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: 15in 11in;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>custom size</h1>
   <p>See the size of the page (custom size).</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS size - Nesting Inside @media Rule

Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.

<html>
<head>
<style>
   @media print {
      @page {
         size: 80mm 200mm;
      }
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>Nesting inside @media rule</h1>
   <p>See the size of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>
Advertisements