Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set printing double-sided documents with CSS

CSS Web Development Front End Technology

When printing double-sided documents, the page boxes on the left and right pages should be different. CSS provides pseudo-classes to define different styles for left and right pages, allowing you to set appropriate margins for binding.

Syntax

@page :left {
    /* Styles for left pages */
}

@page :right {
    /* Styles for right pages */
}

Example

The following example sets different margins for left and right pages to accommodate book binding −

<!DOCTYPE html>
<html>
<head>
<style>
    @page :left {
        margin-left: 4cm;
        margin-right: 3cm;
    }
    
    @page :right {
        margin-left: 3cm;
        margin-right: 4cm;
    }
    
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }
    
    .page-content {
        padding: 20px;
    }
</style>
</head>
<body>
    <div class="page-content">
        <h1>Chapter 1</h1>
        <p>This content will appear on the first page (right page) with 3cm left margin and 4cm right margin.</p>
        <p>Add more content to span multiple pages...</p>
    </div>
    
    <div style="page-break-before: always;" class="page-content">
        <h1>Chapter 2</h1>
        <p>This content will appear on the second page (left page) with 4cm left margin and 3cm right margin.</p>
    </div>
</body>
</html>

When printed, the first page (right page) will have a 3cm left margin and 4cm right margin, while the second page (left page) will have a 4cm left margin and 3cm right margin. This creates appropriate spacing for double-sided binding.

Key Points

  • The :left pseudo-class targets left-hand pages in double-sided printing
  • The :right pseudo-class targets right-hand pages in double-sided printing
  • Larger inner margins (binding side) accommodate binding space
  • Page breaks can be controlled using page-break-before or page-break-after

Conclusion

Using CSS @page :left and @page :right pseudo-classes allows you to create professional double-sided print layouts. This ensures proper margins for binding while maintaining readability on both left and right pages.

Updated on: 2026-03-15T11:38:55+05:30

668 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements