Member Avatar for garylee

Hi CSS Gurus,

I need your help urgently as my company needs a printed out report in Landscape Orientation instead of Portrait. I have successfully converted all the BODY Text into landscape by using the below css code:

<STYLE type=text/css media=print>
 
.page {WRITING-MODE: tb-rl; HEIGHT: 80%}
 
</style>

Unfortunately, I failed to convert the <object> #*$!x </object> into Landscape. Could someone please help me to solve the <object> tag from Portrait mode to Landscape?

You can view my souce code at:
http://www.garylee.org/print/aboutus.html

Or you can download the zip file at:
http://www.garylee.org/print/landscape.zip

Look at my website with your IE browser in "Print Preview" to get my point.

Thank you so much,
GaRy

  • 3 Contributors
  • 2 Replies
  • 94 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Member #117553

Dani AI

Generated

Short answer: the embedded <object> keeps its own orientation because it is an external resource (PDF or plugin) or a nested browsing context. CSS rules that change HTML text flow (like the writing-mode you tried, ) do not reliably rotate plugin-rendered content. As observed, page-size rules help for HTML print pages in some browsers, but they do not force orientation inside an embedded PDF. was right that there is no universal pure-CSS cure for embedded plugin content.

Practical options, ranked by reliability:

  1. Regenerate the embedded file as landscape (best). If the object is a PDF, produce a landscape PDF and link/serve that for printing. Open the PDF directly in a browser tab to verify it prints landscape.
  2. Provide a print-only fallback: hide the embed for print and show a print-ready HTML or image you control. Example pattern to use in a print stylesheet:
@media print {
  /* hide the embedded object at print time and show a fallback element */
  .print-embed { display: none; }
  .print-fallback { display: block; }
}
  1. Try rotating the container as a last resort. Some UAs will render transforms on the host element, but many PDF viewers ignore transforms when printing, so treat this as experimental:
@media print {
  .rotate-print { transform: rotate(90deg); transform-origin: 0 0; }
}

For HTML-only pages use the CSS paged-media @page size declarations; modern browsers support this for HTML printing (see the MDN note on @page). For authoritative details on embedding and limitations, see MDN on the HTML object element.

Quick checklist: identify the embedded MIME, open the resource directly and try printing, test a landscape PDF, add a print-only fallback if needed, and validate across target browsers and printer drivers. For predictable results in production, serve a landscape PDF or a separate print page generated on the server.

References: @page on MDN and object element on MDN.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

The CSS for print media is not well supported. Personally, I think that's fine. If I want to print landscape, I will. In any case, I don't think there is a solution at this point in time. Have you read through the other threads on this topic in this forum?

Member Avatar for Member #117553

Hi there,

CSS2 supports page orientation, although it is not officially approved by the W3C. Here is the spec

There is a css property called 'size'. I have downloaded your zipfile and tried it.
made it something like this :

body { size: landscape;}

It worked for Firefox, however IE6 and Opera9 - no chance...again.:(

For the time being, obvioursly there is no standard solution. Sorry.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.