Recently i was put across a issue of pages not printing background images:
How to solve such issues.
there are multiple solution to this problem, lets try to find answer and learn more about priniting correct pages
and managing space.
Earlier solution :
was just to create a diffrent page for when printing required, ment more number of multiple pages and...
As we answer this Question better.
Lets try to understand how media style works.
css actually recoginises 10 diffrent media types, for this to work proper you need to active media type.
some are : all, braille, embossed, handheld, print , projection, screen, speech, tty
what we should be concerned with is 3 media types
1. all
2. screen
3. print
1. all :: applies to all media types, every device accessing the page and uses same style
2. screen :: this will be applied to web pages when only view on internet , for printing this css will be neglected
3. print :: this will be applied only when you print a page.
this brings us to a conclusion that we can build 3 style sheets .
snytax ::
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
similarly for other devices
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="print.css"/>
@media directive
if your requirement is very few you can just go for ::
@media directive
@media printing{ /* css */}
Printing fonts :: another problem that u might encounter not to get proper printing text size, 16 px might print as 12pt
its better we use pt and use !important to over ride the style.
Removing Background::
not what you see is what you get you won't like to drain you printer's ink , for printing 10 colored pages.
so it required and can be easily managed.
Printing Background::
Image tag solution
1. use image tags, and make it hidden in common css
2. in print css , make it visible
Using ul
1. use background image in ul tags not sure about other browsers but works fine in ff
Hiding the Unwanted Pages Areas,
this can be easily achived by specific print css
Adding page Breaks for printing
page-break-after and page-break-before :: are widely used css and recoginised.
If you are aware where and when you want to give a page break on a location.
specify the destination element and add this class to that location. else you can go generic and give a class to element and can have page breaks as and when required
How to solve such issues.
there are multiple solution to this problem, lets try to find answer and learn more about priniting correct pages
and managing space.
Earlier solution :
was just to create a diffrent page for when printing required, ment more number of multiple pages and...
As we answer this Question better.
Lets try to understand how media style works.
css actually recoginises 10 diffrent media types, for this to work proper you need to active media type.
some are : all, braille, embossed, handheld, print , projection, screen, speech, tty
what we should be concerned with is 3 media types
1. all
2. screen
3. print
1. all :: applies to all media types, every device accessing the page and uses same style
2. screen :: this will be applied to web pages when only view on internet , for printing this css will be neglected
3. print :: this will be applied only when you print a page.
this brings us to a conclusion that we can build 3 style sheets .
snytax ::
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
similarly for other devices
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="print.css"/>
@media directive
if your requirement is very few you can just go for ::
@media directive
@media printing{ /* css */}
@media print {div.myclass {
display: none;
}} Printing fonts :: another problem that u might encounter not to get proper printing text size, 16 px might print as 12pt
its better we use pt and use !important to over ride the style.
Removing Background::
not what you see is what you get you won't like to drain you printer's ink , for printing 10 colored pages.
so it required and can be easily managed.
Printing Background::
Image tag solution
1. use image tags, and make it hidden in common css
2. in print css , make it visible
Using ul
1. use background image in ul tags not sure about other browsers but works fine in ff
Hiding the Unwanted Pages Areas,
this can be easily achived by specific print css
Adding page Breaks for printing
page-break-after and page-break-before :: are widely used css and recoginised.
If you are aware where and when you want to give a page break on a location.
specify the destination element and add this class to that location. else you can go generic and give a class to element and can have page breaks as and when required
