Format Page for Printing
Regular
Posted: Mon, 2007-11-19 21:39
Is there any way to format a page for printing. I am making an invoice page to be printed, but I want to remove the header/footer text, and set all margins to 0.3".
Is this possible to do without changing it in the brower's page setting?
Moderator
Posts: 12074
Joined: 2004-06-06
Location: London
Yes there is have a study up
Posted: Mon, 2007-11-19 22:14
Yes there is have a study up on using media="print" attribute with stylesheets or using @media print{} rulesets.
You can target specific rules for printing in this fashion, however there is a limit to what can be done and a certain amount of control rests with the users browser settings which you cannot control, but with a little effort you can achieve decent results.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Moderator
Posts: 5061
Joined: 2005-02-03
Location: Pennsyltucky, USA
Hugo wrote:Yes there is have
Posted: Tue, 2007-11-20 04:31
For consistent results I use bot the media="print" attribute with @media print in the css file.
Here's the link:
<link rel="stylesheet" href="includes/print.css" type="text/css" media="print">which points to this file:/* PRINT CSS */
@media print {
@page { margin: 0.5in; size: landscape; }
* { color: black !important; background: white !important;
}
.noprint, .view, .edit, .archive, input, .header, #footer { display: none;
}
a { text-decoration: none;
}
body { font: 12pt "Times New Roman", "TimesNR", "Times", serif
}
table { border-collapse: collapse;
}
tr.alt-tr { text-align: left; margin-top: 0.5em;
}
td { border-bottom: 1px solid black; padding: 0 0.5em;
}
td.money { text-align: right;
}
}
Moderator
Posts: 12074
Joined: 2004-06-06
Location: London
Gilding the lily For a
Posted: Tue, 2007-11-20 05:44
Gilding the lily
For a very rushed landing page I had to throw up recently, and not having time to faf around, I used @media rules to wrap my major structural elements as two distinct blocks suited for their respective mediums; for my screen layout I wrapped the rulesets in @media screen {} and within described my layout then used @media print to define a set of properties for the same elements which were more suited to print, all other properties such as backgrounds, colors etc I allowed to filter through as media="all" this was a quick and dirty approach but it worked rather well.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
newbie
Posts: 1
Joined: 2008-07-23
Location: Los Angeles
Triumph:
Posted: Wed, 2008-07-23 03:26
Triumph:
I'm a good html coder, but my CSS usage is limited to padding and making buttons highlight. I need to get an html page to print upon load, and in landscape. I tried your code, but doing something wrong.
I inserted the style sheet reference and created the print.css file. verified path, etc. Didn't do anything for me. Any suggestions? THANKS.