How to handle printing of HTML pages?

Question

In my portfolio site I have listed my projects under separate tabs (tab menu). This works well except for printing which requires the user to click on a tab, print, click on the next tab and print the same page again to get everything. Being a portfolio I'd assume that visitors want to print all of the content.

Is there a general way to create a different style when printing a web page? Or should I just add a printer icon on my page which redirects the user to a different page where all the data is in a big chunk and then prompt the user's browser to start printing?

Answer 1

I prefer to use a separate "printer-friendly" page, one that eliminates graphics and unnecessary sidebars and such. When people want to print a browser page, they're usually (though admittedly not always) interested in the kind of text that would flow well in a Word document.

Answer 2

You can use the media type with css:

Like this:

<link rel="stylesheet" type="text/css" media="screen" HREF="screen.css" />
<link rel="stylesheet" type="text/css" media="print" HREF="print.css" />

media="screen" will be used normally, the media="print" version of the css will be used when printing. You can use that stylesheet to override the tab styles so the content is always visible...you can see this via print preview.

Answer 3

Well, in general that would depend on how you implemented your "tabs". But you could put everything into one HTML page, then use CSS to mark it up and JS to hide/display only the content for one "tab".

Then you could just use an alternative style sheet for printing, which would format the whole page in printer-friendly format.

However, that might confuse users, who expect to get a print output of what they see on screen, so it might be better to link to a page which shows all projects on one page. Some might even prefer reading it that way on-screen.

Answer 4

Create one big file and add on Readability. Here is a clean version of the JavaScript needed to call it that they provide for their bookmarklet:

function Readability() {
    readStyle = 'style-newspaper';
    readSize = 'size-medium';
    readMargin = 'margin-wide';
    _readability_script = document.createElement('SCRIPT');
    _readability_script.type = 'text/javascript';
    _readability_script.src = 'http://lab.arc90.com/experiments/readability/js/readability.js?x=0';  //+ (Math.random());
    document.getElementsByTagName('head')[0].appendChild(_readability_script);
    _readability_css = document.createElement('LINK');
    _readability_css.rel = 'stylesheet';
    _readability_css.href = 'http://lab.arc90.com/experiments/readability/css/readability.css';
    _readability_css.type = 'text/css';
    _readability_css.media = 'all';
    document.getElementsByTagName('head')[0].appendChild(_readability_css);
    _readability_print_css = document.createElement('LINK');
    _readability_print_css.rel = 'stylesheet';
    _readability_print_css.href = 'http://lab.arc90.com/experiments/readability/css/readability-print.css';
    _readability_print_css.media = 'print';
    _readability_print_css.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(_readability_print_css);
}

Answer 5

I mostly agree with Nick, however, I generally prefer to have my css end up in one file:

@media print {
    #top {
        width: 100% !important;
        font-size: 120% !important;
        height: 2em !important;
    }
    #top h3 {
        width: 100% !important;
        text-align: center !important;
    }
}

or whatever. Basically, you have your print stylesheet in the same file as your other styles but surrounded by "@media print{ ... }";

Answer 6

I normally use the print media tag to define a print style for my pages:

@media print
{
    #header, #nav
    {
        display: none; \\* to not print an element *\
    }
}

you can add this to your style sheets as shown above or you can add the media attribute to the link tag:

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