Geek asks and answers

Same CSS print code as screen

It seems like there really should be a simple solution, but so far I have not been able to find it.

I use Zurb Foundation and I basically create a live form that takes input from the form (above) and populates the content (below) using angular.js. Users then print the page in PDF format. I would like to keep the layout that I have for the content below, and I would like to hide the form above when printing. Zurb has a nice css hiding rule for printing that looks like it should work fine when applied to the form above, but when I switch the print stylesheets, it basically breaks all the CSS and goes back to ugly.

Suggestions?

+5
source share
3 answers

Have you tried using CSS printmedia queries for media?

.foo {
    height:150px;
    width:150px;
    background-color:#F00  // see what I did there?
}

.bar {
    height:10px;
    width:50%;
    border-radius:5px;
    background-color:#000
}

.baz {
    width:100px;
    height:150px;
    background-color:#FFF;
}

@media screen {
    .baz {
        display:block;
    }
}

@media print {
    .baz {
        display:none;
    }
}

Now only some of the properties .bazare set by media queries. You can freely embed any of the .bazproperties inside or outside the queries themselves. Similarly, you can put all the properties .bazin a media query, but I believe that is not what you are looking for.

+1
source

What I did in similar situations is to use a separate file for print.css.

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

If the browser prints, the file will be downloaded first global.css, and the file print.csswill overwrite something back.

Keep in mind that all rules background: *will be disabled in all browsers by default when printing, so some styles will be compromised independently.

+1

idk zurb , , weasyprint, html/css pdf https://github.com/Kozea/WeasyPrint

0
source

More articles:


All Articles