View Full Version : Print landscape and portrait

11-19-2002, 02:47 AM
In my css style I am trying to use the ability to set whether the printed page will be landscape or portrait. Unfortunately, this does not work and the printer properties are used.

.break {page-break-after: always; size: landscape;}

Does 'size: landscape;' work or is there some other way?

Motif Webs
11-19-2002, 04:24 AM
I haven't tried to control printing with CSS yet, but this might be of help: http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html


11-19-2002, 05:17 AM
Motif Webs, thanks for the link it was a good resource. But even after using their examples when I print the pages it still uses the default properties of the printer.

I tried using: @page {page-break-after: always; size: landscape;}

Any ideas?

Motif Webs
11-19-2002, 03:11 PM
Okay, I got this in an email newsletter from CNet's Builder.com today. For some reason I can't see it on their website, so I'll quote it in full - hopefully it will help:
Controlling printed output in CSS2-compliant browsers

Before Cascading Style Sheets, Level 2 (CSS2), there was no clear definition for printed HTML pages. However, the W3C has defined a set of rules for paged media in CSS2 that allows an HTML author to specify the "look and feel" of printed output separate from the screen output.

The CSS2 defines a "page box" for printed output, and the user agent is responsible for committing that output to actual media. The page box limits the print area of the media through margins and page size and allows for page breaks. The biggest benefit of this is that it gives the HTML author control over the printed format of the HTML pages rather than being the slave to the browser. Controlling this output is done by defining the "MEDIA" attribute in the <STYLE> tag or by using the "@media" at-rule within the <STYLE> body.

The "@page" at-rule is used to set up the page box size and margins. This is done through the "size" and "margin" properties, respectively. The "margin" property can also be split up into "margin-top", "margin-left", "margin-bottom", and "margin-right". Also, the "page-break-before" and the "page-break-after" CSS properties allow the author to insert logical page breaks in the printed output.

All other CSS formatting properties are valid such as "font-size", "background-color", etc. This means that you can create an HTML document that will render in one font on the screen display, while the printed output will render in another font (if the need arises). But I would say that the best use of this would be rendering reports for printed output in HTML.

Let's say that we have a sales projection report that contains tabular data and a graph. Our screen display should contain the data and the graph in a concise, one-screen display. However, our printed media should be one sheet with tabular data and one sheet with a graph. The graph is produced using VML, so this example only works in IE 5.0+. Both sheets should have a heading that defines the data that is being represented. Here is the data:

Month Sales


Jun $25,000

Jul $22,000

Aug $18,000

Sept $20,000

Oct $20,000

Nov $22,000

Dec (projected) $28,000

For this demo, we'll display a simple table with headings and data:

<TH>Sales Month</TH>
<TH>Sales Amount</TH>
. . .

The graph data in VML will appear as such:

<DIV style="width:300px;height:300px;border: 2px black
solid;overflow:hidden;text-align: left;">
<v:line from="0,0" to="10,0"><v:textbox inset="0px, 0px, 10px, 10px"
<v:line from="0,70" to="10,70"><v:textbox inset="0px, 0px, 10px, 10px"
<v:line from="0,140" to="10,140"><v:textbox inset="0px, 0px, 10px, 10px"
<v:line from="0,210" to="10,210"><v:textbox inset="0px, 0px, 10px, 10px"
<v:line from="0,280" to="10,280"><v:textbox inset="0px, 0px, 10px, 10px"
<v:polyline points="0,70 40,112 80,168 120,140 160,140 200,112 240,28"

Now we want to create the sheet so that what's on the screen is different from the printed copy. For the screen, since both the data and the graph are going to appear on the same page, a simple "Monthly Sales Forecast" header should suffice. However, on the printed copy, we'll need a header for both pages: "Monthly Sales Forecast Data" and "Monthly Sales Forecast Graph".

In addition, we don't want the print headers to appear on screen and vice versa. The way to control this is to change the "display" CSS property based on the media device. My headers are nothing more than <H2> tags. So my <STYLE> will appear as follows:

@media screen {
H2.scrHead {
display: inline;
H2.prnHead {
display: none;
@media print {
.newPage {
page-break-before: always;
H2.scrHead {
display: none;
H2.prnHead {
display: inline;
v\:* { BEHAVIOR: URL(#default#VML); }

Putting this all together, add this code above your <TABLE>:

<H2 class="scrHead">Monthly Sales Forecast</H2>
<H2 class="prnHead">Monthly Sales Forecast Data</H2>

. . .and I would add this above my graph:

<H2 class="prnHead">Monthly Sales Forecast Graph</H2>

The "scrHead" class name prohibits "Monthly Sales Forecast" from displaying on the printed output, and the "prnHead" class name prohibits "Monthly Sales Forecast Data" and "Monthly Sales Forecast Graph" from displaying on the screen. Surround the graph data and header with a <P CLASS="newPage"> tag, and a page break will be inserted just before the <P> tag in the printed copy. In order to make this demo work, you need to add the xmlns:v=" urn:schemas-microsoft-com:vml" namespace to your HTML tag for the VML graph.

Controlling your printed output adds a strong tool to the Web developer's tool set. Taking this into account, it's possible to collect data from a data server in XML format. You could then run that XML through an XSL transformation to produce an HTML-based report for viewing and printing. If you were to create an arsenal of styles for printing, you could leverage your printing functionality through a single style sheet.

If you wish to read more on the CSS2 standard, you may find it at the W3C Web site. Or, for more on Internet Explorer's printing options exposed by CSS2, visit the MSDN Web site.

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications. Obviously the smilies in there are : p without the space.


11-21-2002, 10:08 AM
Only Opera supports all but one CSS printing properties. This is according to http://www.westciv.com/style_master/academy/browser_support/printing.html