Wednesday, 11 April 2012

Print Friendly css

Recently we got a requirement that our webpage layout should display differently when user tries to print the page(File/Print)


Css has bultin media types(screen,print) which will help us to display a seperate layout when viewed in browser and a diff layout when printed.

http://www.w3schools.com/css/css_mediatypes.asp


@media screen
{
.printerOnly
{
display: none;
}
.....
}


@media print
{
body
{
color: black;
background-color: white;
}

#menuContainer, #contextContainer, #layoutFooter
{
display: none;
}
......
}

No comments: