Using the @page.page-orientation feature in CSS

Introduction

The @page feature is one of the useful features in CSS that allows us to control how printed pages are displayed. Imagine that you want to customize your document to be printed; in such cases, using this feature can be beneficial. Now, if you want to specify the print page layout as well, you can use the .page-orientation feature. This feature allows you to set the pages to either landscape or portrait orientation, which is essential for many printed documents.

Here, we will discuss how to use this feature and provide examples of its application. This feature is particularly important when the content is printable and deserves a significant management approach. With the use of this feature, users can present documents that require specific visual settings correctly formatted. In the following, code is provided for a better understanding of this process.

Example Code

<style>
  @page {
    size: A4;
  }
  @page :left {
    margin-left: 2cm;
  }
  @page :right {
    margin-right: 2cm;
    @bottom-right-corner {
      content: "Page: " counter(page);
    }
  }
  @page {
    page-orientation: landscape;
  }
</style>

Explanation of the Above Code

<style> - The <style> section is used for writing the CSS.
@page - This CSS directive helps define page printing specifications.
size: A4; - This sets the paper size to standard A4.
@page :left - Specific settings for the printed pages that are used in the left-hand layout.
margin-left: 2cm; - This sets the left margin of the page to 2 centimeters.
@page :right - Specific settings for the right pages used in the print double-sided layout.
margin-right: 2cm; - This sets the right margin of the page to 2 centimeters.
@bottom-right-corner - Parameters for formatting the content in the bottom right corner.
content: "Page: " counter(page); - This prints the page number in the bottom right corner.
page-orientation: landscape; - This changes the page orientation to landscape.
</style> - This denotes the end of the CSS definition.