Member Avatar for avanthig

HI ....


i want to print the text vertically from bottom to top and left to right and am using the style property is writing-mode:tb-rl fliterv filterh .
It shows correct format in IE6 browser but when i see print preview it looks like mirror image like top-bottom and right to left...

anyone can reply it ASAP...Plz....

  • 4 Contributors
  • 12 Replies
  • 124 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by avanthig

Dani AI

Generated

Thread summary and focused next steps for the IE6 print-preview problem.

The symptoms described by (screen shows vertical text but print preview/mirror/ordering is wrong and table cells behave differently) match two common constraints: the old IE proprietary vertical-writing techniques are intended for block elements only (as pointed out), and many IE6 + printer-driver combinations do not faithfully render CSS filters/writing-mode during printing. That explains why it looks fine in the browser but is reversed or split across pages in print preview.

Practical, testable approaches (ordered from easiest to most reliable):

  • Quick fix for table cells: wrap the vertical text inside a true block element placed into the TD, then style that inner element. Avoid applying transformation directly to the TD. Keep styles in a stylesheet, not inline, so you can swap them for printing.

  • Print-safe fallback: replace the filter/writing-mode rendering with a print-only image or PDF. Use a small print stylesheet that hides the on-screen element and displays a prepared image (or server-generated PDF) sized to exactly fit one page. Example pattern:

    /* screen: show live vertical text element */
.v-screen { display:block; }
.v-print  { display:none; }

/* print: hide live element, show pre-rendered image */
@media print {
  .v-screen { display:none; }
  .v-print  { display:block; page-break-inside:avoid; }
}

  • Troubleshooting: isolate a minimal HTML test page (single vertical element). Test printing to different drivers (PDF printer, Microsoft XPS, physical printer) — driver differences often reveal whether the bug is IE or the printer. Try toggling page size/orientation and reduce width so the vertical block fits a single page (use page-break-inside: avoid for the element).

Final recommendation: for a stable printed output in legacy IE, serve a print-specific asset (image or PDF) via an @media print stylesheet or conditional comments for IE6. Keep the writing-mode/filter approach for on-screen only. This avoids the mirrored/fragmented print-preview behavior caused by old rendering paths.

Recommended Answers

All 12 Replies

Member Avatar for gogreen1

great post ..even i need to known this vertical text in IE6 .previously i had a same problem in one project and after i convinced the customer :-P ..so plz some one rectify this problem :-)

Member Avatar for almostbob

the style property is writing-mode:tb-rl fliterv filterh

no it isnt

<div style='writing-mode:tb-rl; filter:fliph flipv;'>1 this is a line<br>2 this is a line<br>3 this is a line</div>

inline styles for examp[le only, get em out into a .css file

Edited by almostbob because: n/a
Member Avatar for avanthig

Hi gogreen1,

Thank you for ur quick reply.... But its not the correct solution for that naaa......

Member Avatar for avanthig

hi,

i used the same style but its working for <p> tag...its not working for <td>....plz check it for <td> also and revert back with good sol....

Member Avatar for gogreen1

ohh ya its working fine in IE6 the browser i have currently :-) what about firefox and other browsers ??

Member Avatar for avanthig

Thanks for ur reply,


its working in browser IE6...when i click on print preview it comes as like mirror image...in reverse order...plzzz....check it in and revert back to me

Member Avatar for umamahesh2020

It is not working on Firefox and it is working in fine.

Edited by umamahesh2020 because: n/a
Member Avatar for avanthig

It is not working on Firefox and it is working in fine.

no man...check with following code in IE

<html>
<table>
<tr>
<td style="writing-mode:tb-rl ; filter:flipv fliph">Vertical Text
</td>
</tr>
</table>
</html>

check the o/p in browser and in pdf

Member Avatar for almostbob

not applied to table cells
applied to tables, divs
block level elements only

get off your *** and read at least part of the instructions for what you are doing

Member Avatar for avanthig

Thanku Soooooo much....

i got it
these days am trying for td tag ....
now i got it...
once agian thanku very much.....

not applied to table cells
applied to tables, divs
block level elements only

get off your *** and read at least part of the instructions for what you are doing

Member Avatar for avanthig

hi ...
its not working for table tag....
its working for div, p tags...
can u suggest any more

Member Avatar for avanthig

hi...

when i click on print-preview 1 page report is generating in 3 pages ....plz help me in this...

in my code am using
<p style="writing-mode:tb-rl filter:fliph flipv">

plz help me in this asap.............

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.