Explain Codes LogoExplain Codes Logo

Landscape printing from HTML

html
responsive-design
best-practices
print-engineering
Alex KataevbyAlex Kataev·Jan 18, 2025
TLDR

Activate landscape printing in your HTML by utilizing the CSS @page rule:

@page { size: landscape; }

By embedding this into your stylesheet, you'll orient the print-outs horizontally. Not a single line of extra code needed. If the content extends beyond the printable area, adjust its scale:

body { transform: scale(0.8); }

Note: It's recommended to use transform instead of zoom for better browser compatibility. Always check the print layout on various browsers.

One-for-all vs. Tailoring

While the CSS @page method does well on modern browsers, ensuring compatibility with older browsers can be tricky. In such cases, rotating the content with CSS transforms caters to a wider range of browsers.

Alignment: Not just for astronauts!

With content rotation, layout and alignment issues may crop up. So, time for some good ol' testing on various complex sections like tables or grids. For users with Internet Explorer 7—where automatic printing of PDFs is not its forte—do provide additional instructions.

Techniques for perfect landscape printing

Maneuvering through browser quirks

Different browsers can have different default behaviors when it comes to printing. By using @media print along with @page, you ensure that the approach is uniform:

@media print { @page { size: landscape; } }

Content gymnastics

Instead of managing the whole page's layout, rotating the content might turn out to be simpler:

@media print { body { -webkit-print-color-adjust: exact; transform: rotate(90deg); } }

Note: Be mindful of overflow and position adjustments after rotation to avoid out-of-place content.

Calling in the big guns: JavaScript

When CSS proves insufficient, JavaScript can be your knight in shiny armor. With the right JS libraries or ActiveX controls in Internet Explorer, you can programmatically impart landscape printing or convert page content to PDF.

It's all about the environment!

Finally, remember that the effectiveness of landscape printing is highly dependent on both the content and the user environment (device, browser, printer settings). So, when in doubt, opt for alternative formats or instructions.

The power of print-ready design

Creating dedicated CSS for print is often a great idea. You can use @media print to specify printing specific styles. This helps maintain the look and feel of headers, footers, and other page elements:

@media print { header, footer { display: none; } .content { width: 100%; margin: 0; padding: 0; } }

JavaScript, the print trigger

For triggering a print, window.print() is JavaScript's secret weapon. But, if you want more control, creating a PDF version could be a better alternative. The html2canvas or jsPDF can render the page content into a PDF:

html2canvas(document.body).then((canvas) => { let pdf = new jsPDF('landscape'); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0); pdf.save('page.pdf'); // Proof of a lazy programmer🧑‍💻 });

Learning from the best: Google Docs

You can learn a lot from applications like Google Docs, which convert documents into PDFs before printing. This approach can ensure consistent and reliable print layouts.

Dig deeper: More techniques and considerations

Vertical scripts? No problem!

For languages that use vertical scripts, different writing mode can also affect landscape printing:

@media print { body { writing-mode: tb-rl; } }

Pre-flight checks: Not just for astronauts

Implement a pre-flight check to warn users about potential layout issues and suggestion of preview before printing. A perfect printout at first attempt—now that's a lifted user experience!

SVG: Handle with care

Scalable Vector Graphics (SVG) is a double-edged sword when it comes to print-outs. They scale beautifully in the print layout but can become challenging if embedded as images.

Prepare for the unexpected

Create fallbacks for scenarios where CSS or JS doesn't behave as expected, such as outdated browsers, different operating systems, or non-standard printer drivers.