Add basic print styles

[joyously]

Too many authors forget all about print styles. I think having the basic styles of hiding the interactive elements (menu, sidebar, comment form) would not only remind them to handle print styles, but set the standard for the types of things to do for print.

[philiparthurmoore]

Big fan of this.

[samikeijonen]

I leave basic printing styles off on purpose so that people would not print websites.

[joyously]

Haha @samikeijonen ! You know that doesn't keep them from printing, right? Just makes them annoyed that the page doesn't look better for print. Themes are about presentation, whether it's on the screen or the printer. Think of it like a different side of accessibility.

[samikeijonen]

On more serious note it would be nice to know how often printing comes up in wp.com support question. I have had zero which hopefully relates that people don't print that much webpages.

[joyously]

That seems tangential. Does the number of support questions for accessibility issues indicate how themes should address accessibility?

[samikeijonen]

For me ecological footprint is more important in this case than accessibility. But it's true no one can prevent printing even if it's bad practice. I can also see value in printing in some cases like

• order details
• directions
• recipes

That's if the PDF or better format is not available.

With that said I'm still voting no to this because print styles would be too generic and bloat the CSS.

[grappler]

I don't think if having or not having print styles will make a difference if people print webpages.

By adding printing styles we can reduce the amount of ink that is need and perhaps also the amount of paper that is needed if we reduce redundant information like the widgets in the sidebar.

We can easily create a separate file print.css for just some basic print styles. By using the following method we can make sure that the styles are only loaded when printing. It does not bloat the main style.css and makes that it can be easily be removed if need be.

wp_enqueue_style( '_s-print', 'path/print.css', array(), '20170921', 'print' );

The print view can be useful for other reasons then print. It may be a format that is easier to read. It can make the PDF's also easier to read.

I think the first step would be to look how the theme looks now when printing then we can discuss what changes would be best.

[joyously]

What I'm suggesting is basic styles, like the following. Very short, but useful, and a prompt for the theme author to expand if they want to.

@media print {

    /* Hide elements */
    form,
    button,
    input,
    select,
    textarea,
    .navigation,
    .menu,
    .widget-area,
    .page-links,
    .edit-link,
    .post-navigation,
    .pagination.navigation,
    .comments-pagination,
    .comment-respond,
    .comment-edit-link,
    .comment-reply-link,
    .comment-metadata .edit-link,
    .pingback .edit-link {
        display: none !important;
    }

  .has-sidebar .content-area {
    float: none;
    width: 100%;
  }

  html {
    font-size: 85%;  /* this is from a stylesheet with 100% for screen */
  }
}

[philiparthurmoore]

For something like this screenshots really do help. Do you have visual before and afters?

[joyously]

Here is my print preview with no print styles. This short post takes two pages to print. (Yes, you can do Shrink to Fit or a percentage in the print options, but there is a lot of clutter.)

Here is my print preview using the above mentioned print styles. Note that there is less clutter and it takes less than one page to print.

[davidakennedy]

Thanks @joyously for the suggestion on this!

I would be in favor. Seems like a smart thing to do for people, shouldn't take much effort and can be done with performance in mind.

Not sure how often printing comes up in WordPress.com support. We do have global print styles added to the majority of themes. Keep in mind that we're accounting for a lot more stuff than most theme authors would need to worry about. Looking at HTML5 Boilerplate might be a good idea here, as it has super simple print styles. Very similar to what @joyously suggests.

[arnabwahid]

@joyously @davidakennedy If I add the recommended styles in the theme, in which sub-directory should the print.scss file reside in sass directory? modules? Any suggestions?

Or enqueuing a separate file as @grappler suggested is the better route?

[joyously]

When I add it to a theme, I just put that short block at the end of the normal stylesheet. It's got a media rule, so it only applies to print, and it's short, so it doesn't warrant another http request. That's what I do, anyway.

[arnabwahid]

I agree, should be in the same file and everything else. Thanks @joyously. I am still getting the lay of the land. Suggestions are greatly appreciated! I will send a PR for the print styles soon.

[davidakennedy]

@arnabwahid Thanks for asking! I'd probably make a new section for it here at the end of the file. And for now, put the new scss file in the site folder.