How to handle printing of HTML pages?

Question

On my portfolio, I listed my projects under separate tabs (tab menu). This works well, except for printing, which requires the user to click the tab, print, click the next tab, and print the same page again to get everything. As a portfolio, I assume that visitors want to print all 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 to my page, which redirects the user to another page where all the data is in a large fragment, and then prompts the user's browser to start printing?

Answer 1

I usually use a print tag to determine the 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 add a media attribute to the link tag:

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

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"css version will be used when printing. You can use this style sheet to override tab styles so that the content is always visible ... you can see this with a preview.

Answer 3

, , css :

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

. , , , "@media print {...}";

Answer 4

" " , .. , (, , ) , Word.

Answer 5

, , , "". HTML-, CSS, , JS, / "".

, .

However, this can confuse users who expect to print what they see on the screen, so it would be better to link a page that shows all the projects on one page. Some even prefer to read it that way on the screen.

Answer 6

Create one large file and add Readability . Here is the clean version of JavaScript needed to invoke it, which 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);
}