Specifying page breaks for printing using CSSWith CSS (level 2), the grip webmasters have over their webpages extends to the printer. To satisfy the controlling tendencies within us, IE5 and NS6 give you the power to insert artificial page breaks for printing. Now your site can look the way you want it to even after the computer's turned off!page-break-before and page-break-after Here are your two boys for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:Value Description always Always insert a page break auto Default value. Insert page break only if at end of page. "" (empty string) Do not insert a page break. Let's say your page consists of multiple headers (with content following each). Want to divide each header into a separate page for printing?<style> h1{ page-break-before: always; } </style>How about getting even more personal, and divvying things up at specific location(s)?content here " <DIV style="page-break-after:always"></DIV> " " content hereNote that page-break-after may not work with <BR> or <HR> tag in some browsers.Their scripting equivalents- pageBreakBefore and pageBreakAfter As with most CSS attributes, you can access our two stars via JavaScript, by using the properties pageBreakBefore and pageBreakAfter. The obvious advantage of this is the ability to then dynamically assign their values. For example, instead of forcing custom page breaks on your visitors, you can create a script to make this optional. Here I'll create a checkbox that toggles between slicing the page at the headers (h2) and at the printer's own discretion (default):<form name="myform"> <input type="checkbox" name="mybox" onClick="breakeveryheader()"> </form><script> function breakeveryheader(){ var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto" for (i=0; i<document.getElementsByTagName("H2").length; i++) document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle }</script>Click here for an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV.
Here are your two boys for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:Value Description
always Always insert a page break
auto Default value. Insert page break only if at end of page.
"" (empty string) Do not insert a page break. Let's say your page consists of multiple headers (with content following each). Want to divide each header into a separate page for printing?<style>
h1{
page-break-before: always;
}
</style>How about getting even more personal, and divvying things up at specific location(s)?content here
"
<DIV style="page-break-after:always"></DIV>
"
"
content hereNote that page-break-after may not work with <BR> or <HR> tag in some browsers.Their scripting equivalents- pageBreakBefore and pageBreakAfter
As with most CSS attributes, you can access our two stars via JavaScript, by using the properties pageBreakBefore and pageBreakAfter. The obvious advantage of this is the ability to then dynamically assign their values. For example, instead of forcing custom page breaks on your visitors, you can create a script to make this optional. Here I'll create a checkbox that toggles between slicing the page at the headers (h2) and at the printer's own discretion (default):<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form><script>
function breakeveryheader(){
var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
for (i=0; i<document.getElementsByTagName("H2").length; i++)
document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}</script>Click here for an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV.