/

How to Print Your HTML with Style

How to Print Your HTML with Style

In this blog post, we will explore some tips on how to print from the browser to the printer or to a PDF document using CSS. Whether you want to hide certain parts of a document, customize the fonts, or add page margins and breaks, we’ve got you covered. Let’s dive in!

When it comes to printing, you may want to hide specific parts of your document, such as the footer, header, or sidebar. You can achieve this by using a separate CSS file dedicated to print styling. Browsers will only download this file when printing. Here is an example of how to link the print CSS file:

1
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

CSS @media print

Alternatively, you can use media queries to apply styling specifically for printed documents. Anything inside the @media print block will only be applied when printing. This is useful for making adjustments like modifying links or changing font styles. Here’s an example:

1
2
3
@media print {
  /* Your print-specific CSS */
}

Links are an essential part of HTML, but they may lose their functionality when printed. Fortunately, CSS provides a solution. You can use CSS to append the link URL after the link text when printing. Here’s an example of how to do this for external links:

1
2
3
4
5
6
@media print {
  a[href*='//']:after {
    content: " (" attr(href) ") ";
    color: $primary;
  }
}

If you also want to include internal links, simply remove the [href*='//'] selector from the CSS.

Page Margins

Adding margins to your printed pages can improve readability. You can specify the margin size using different units like cm or in for paper printing. Here’s an example of how to set margins for all pages:

1
2
3
4
5
6
@page {
  margin-top: 2cm;
  margin-bottom: 2cm;
  margin-left: 2cm;
  margin-right: 2cm;
}

You can also target specific pages like the first page, left page, or right page using @page :first, @page :left, and @page :right.

Page Breaks

To control page breaks in your printed document, you can use the page-break-after and page-break-before properties. These properties allow you to add page breaks after or before specific elements. Here’s an example:

1
2
3
4
5
6
7
.book-date {
  page-break-after: always;
}

.post-content {
  page-break-before: always;
}

You can explore a wide variety of values for these properties on the Mozilla Developer Network.

Avoid Breaking Images in the Middle

By default, some browsers may cut images in the middle and continue them on the next page when printing. You can avoid this by using the page-break-inside property and wrapping your images in <p> tags. Here’s an example:

1
2
3
p {
  page-break-inside: avoid;
}

This property can be applied to other content elements as well, not just images.

PDF Size

When printing large HTML documents with images to PDF, you may encounter differences in file size depending on the browser used. For example, Chrome may generate larger PDF files compared to Firefox or Safari. To optimize the PDF size, follow these steps when printing in Chrome:

  1. Do not print using the system dialogue.
  2. Do not open the PDF in Preview directly.
  3. Instead, click the “Save” button that appears in the Chrome Print dialogue.

By following this approach, you can generate smaller PDF files more efficiently.

Debug the Printing Presentation

When working with print layout, you may need to debug how your styles are applied. The Chrome DevTools offer a feature to emulate print layout, allowing you to preview your printed document. Here’s how:

  1. Open the Chrome DevTools.
  2. Enable rendering emulation by clicking the toggle icon in the top-left corner of the DevTools panel.
  3. Select “Print” from the rendering emulation options.

With the print rendering enabled, you can see how your document will look when printed.

These tips will help you print your HTML documents with style and customization. Enjoy creating beautifully formatted printouts!

Tags: printing, CSS, HTML, PDF, page breaks, page margins