How to only show certain parts with CSS for Print?

Question

I have a page with lots of data, tables and content. I want to make a print version that will only display very few selected things.

Instead of writing another page just for printing, I was reading about CSS's feature for "@media print".

First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.

I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class. Is that doable?

How do I achieve this?

EDIT: This is what I have so far:

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

But it hides everything. How do I make those "printable" elements visible?

EDIT: Trying now the negative approach

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...

Solution 1

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually becoming: How do I apply CSS to a class AND ALL OF ITS DESCENDANT ELEMENTS? So that I can apply "display:block" to whatever is in the "printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

Solution 2

A simple way:

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>

Solution 3

If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page. This seems to work fine:

Example:

CSS:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML:

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>

Solution 4

I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.

So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk? .

You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>

Then adding that 'printable' class to the chart itself, as in

<canvas id="myChart" class="printable" width="400" height="400"></canvas>

Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):

<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

So, perhaps this will help anyone that gets to this question via the googles.

Solution 5

Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.

Using display: none; in some of your rules would be an appropriate way to handle your situation.

View more solutions

Comments

[Nathan H]

Thanks, Now my question is actually becoming: How do I apply CSS to a class AND ALL OF ITS DESCENDANT ELEMENTS? So that I can apply "display:block" to whatever is in the "printable" zones.

[Nathan H]

Thanks that's almost perfect! Now the only issue is that not ALL elements should be "block". As I am testing, I realize that divs are "block", regular stuff is "inline", tables are "table", tbody are "table-row-group", tr are "table-row", etc ... I could add rules for each individually, but is there a way to just say "apply the regular browser styles"?

[Brett Pennings]

This is correct, but it could cause unnecessary breaks in your formatting if the .print-only element is naturally inline (for example) instead of block.

[Jack]

Why do you have two @@?

[Martin Thoma]

I guess the @@ is a typo.

[pixparker]

I think 'diaply:block' will ruins some elements that has another display type.

[Dirk]

To use both @media print and @media screen solved it for me. Thx.

[NewBie1234]

this hides all the elements but doesn't display block to all the elements and its children with that. I have the exact same css

[Rick Hellewell]

This is an older answer, and that code worked when I used it back in 2017. Should still work. The script is a separate button that has an ID of 'printChart'; that code is not shown in my answer. The asterisk in the 4th line of the CSS should let any child elements of 'printable' class be printable, I believe. (There was a missing closing style command in my answer; I added it just now.)

[NewBie1234]

thats ok, I figured it shouldn't have changed that much. What I have right now is pretty similar, I click a button that triggers the window.print functionality. The only thing is that when I look at the page, its blank. I'm working with ASP.Net, its an old application and might not work as good as. Thanks for the reply!

[Rick Hellewell]

I just noticed the blank page after print preview on another site of mine that uses the CSS code above. Using latest FF/Win10. Not sure why it happens. If I take away that CSS, Print Preview works properly. Puzzling.

[Vincente]

"onlyPrint" elements will be available for screen readers. I believe it should be done like this: @media only speech, only screen { .onlyPrint { display: none; } }