Quick Tip: Making a "Print This Page" Button

Adding a print button to your website is one of the simplest yet most valuable user experience enhancements you can implement. Whether visitors need to save an article for offline reading, print a receipt, or keep a reference document handy, a dedicated print button provides immediate functionality without requiring users to dig through browser menus.

This quick tip covers the essential techniques for implementing a print button and optimizing your pages for print output. By combining JavaScript's built-in print capabilities with CSS print styles, you can create a professional printing experience that enhances user satisfaction and supports your web development services.

The Core JavaScript Method

The foundation of any print button is the browser's built-in window.print() method. This method opens the operating system's print dialog, allowing users to select their printer, adjust settings, and complete the print job. The method is supported across all modern browsers and requires no external libraries or dependencies.

According to the W3Schools JavaScript reference, this method triggers the browser's native print functionality seamlessly.

Key points:

• Basic syntax: window.print()
• Triggers the browser's print dialog
• Works in all modern browsers including Chrome, Firefox, Safari, and Edge
• No return value - executes asynchronously
• Supported by all major JavaScript frameworks and vanilla JS alike

The simplicity of this method makes it ideal for custom web development projects where print functionality is needed without additional dependencies.

Styling for Print with CSS

One of the most powerful aspects of web printing is the ability to create print-optimized styles. Unlike screen styles, print styles can hide navigation elements, remove backgrounds, adjust typography for legibility, and format content specifically for paper output.

The MDN Web Docs on printing provides comprehensive guidance on creating effective print stylesheets that work across all browsers.

Using @media print

The @media print block allows you to define styles that only apply when printing:

@media print {
 .navigation, .sidebar, .footer {
 display: none !important;
 }
 .content {
 width: 100%;
 margin: 0;
 padding: 0;
 }
 body {
 font-size: 12pt;
 line-height: 1.5;
 color: #000;
 }
}

Separate Print Stylesheet

For projects with significant print-specific styles, maintain a separate stylesheet:

<link href="print.css" media="print" rel="stylesheet">

This approach keeps your CSS architecture clean and maintainable while providing dedicated print optimization.

Page Setup with @page

The @page at-rule provides control over page dimensions, margins, and other page-specific properties when printing. This is essential for creating professional-looking printed documents.

@page {
 margin: 2cm;
 size: A4 portrait;
}

@media print {
 h1, h2, h3 {
 page-break-after: avoid;
 }
 img {
 max-width: 100%;
 }
}

Key properties:

• margin - Set page margins (supports cm, mm, in, px)
• size - Control page size (A4, Letter, Legal) and orientation (portrait, landscape)
• page-break-before / page-break-after - Control where content breaks across pages
• orphans and widows - Control minimum lines kept together when paragraphs span pages

These techniques are particularly valuable for responsive web design projects where consistent print output across devices is essential.

Detecting Print Events

Browsers provide two events for print actions that allow you to customize the printing experience:

• beforeprint - Fires when the print dialog opens
• afterprint - Fires when the print dialog closes

window.addEventListener('beforeprint', function() {
 document.body.classList.add('printing');
});

window.addEventListener('afterprint', function() {
 document.body.classList.remove('printing');
});

These events are particularly useful for JavaScript development projects that need to prepare the page before printing or clean up afterward. You can use the class toggled by these events to apply additional print-specific styles or animations that only occur during the print process.

Complete Print Button Example

Here's a complete implementation combining all techniques covered in this guide:

<button id="print-page" class="print-button">
 Print This Page
</button>

<style>
 .print-button {
 padding: 10px 20px;
 background-color: #0066cc;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 }

 @media print {
 .print-button {
 display: none !important;
 }
 .navigation, .sidebar, .advertisement {
 display: none !important;
 }
 @page {
 margin: 1.5cm;
 }
 body {
 font-size: 11pt;
 color: #000;
 }
 }
</style>

<script>
 document.getElementById('print-page').addEventListener('click', function() {
 window.print();
 });
</script>

This example demonstrates how professional front-end development combines HTML, CSS, and JavaScript to create a seamless user experience. The button is styled for visual appeal on screen while being completely invisible in print, and the CSS ensures only relevant content appears on the printed page.

Best Practices for Print-Friendly Pages

1. Include meaningful URLs for links using attr(href) in content so readers can reference online sources
2. Ensure sufficient contrast for printed output - test with black text on white background
3. Avoid printing backgrounds unless necessary (saves ink and improves legibility)
4. Test print output across different browsers and devices
5. Provide a print-friendly version link as an alternative for complex pages

Summary

Creating a print button for your website is straightforward with window.print(), but excellent print support requires thoughtful CSS styling. By using @media print and @page, you can transform any web page into a print-optimized document that looks professional on paper.

The investment in print optimization pays dividends in user experience, particularly for content-heavy sites where users are likely to want physical copies of articles, guides, or reference materials. Whether you're building a documentation site, an online magazine, or a business website, print-friendly functionality demonstrates attention to detail that clients appreciate.

For more techniques to enhance your website's user experience, explore our guides on CSS best practices and JavaScript optimization.

Sources

1. W3Schools: Window print() Method - Official JavaScript reference documenting the core window.print() method
2. MDN Web Docs: Printing - CSS - Comprehensive Mozilla documentation on print stylesheets and media queries