One of the really nice features added in BricksExtras 1.4.9 was adding the print button to the sharing buttons and allowing us to assign a specific area of the page to print. This eliminates all the design outside of that area. Now, it has a couple of drawbacks. One is that you can’t select more than one section to include (title and body), and the other is that it prints all the stylized text as is, which may or may not be what you want.

A Printable Title

The first issue can be overcome by duplicating the title and other information and placing it in the area that you want to print, hiding it on screen but making it visible in print. This could be really useful for things like the title of an article or a printable coupon where you want to include details not visible on the screen (e.g., expiration date). In my case, I was working on a project where I needed a title, date, and chapter, so I created a wrapper with a class of title-box.

Simple Print Styles

The second issue was stripping away all the web styling and exposing the hyperlinks in a readable way for a printed document. I did a quick search of the web and found a couple of examples. My final version is here for your use.

Update: I modified the font family of any URL that is shown to make it more noticeable, and I added a pagebreak class so you can force a page break.

%root% .title-box {
  display: none;
}

@media print {
  %root% .title-box {
    display: block;
  }

  @page {
    size: letter;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 18pt;
  }

  h3 {
    font-size: 14pt;
  }

  a:any-link {
    color: #0000FF;
    text-decoration: none !important;
    font-weight: bold;
  }

  a:any-link::after {
    content: " (" attr(href) ") ";
    color: #000000;
    font-weight: normal;
    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-size: 10pt;
  }

  img {
    width: 100%;
  }
.pagebreak {
    clear: both;
    page-break-before: always;
}
}