[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

DHTML Printing issue

Posted on 2004-04-13
13
Medium Priority
?
939 Views
Last Modified: 2012-05-04
I have the following code with css. It looks fine when it displayed on the web, IE 5.0 or up. When it prints, it prints backward.
any idea?

Thank you

<html>
<head>
<style type="text/css">
.verticaltext{
font: bold 15px Arial;
position: absolute;
left : 3px;
top  : 2px;
width: 200px;
writing-mode:tb-rl;
}

</style>
</head>
<body>
<div style="postion:absolute;left:1px;writing-mode: tb-rl;width:100%; filter:flipv() fliph();">hello</div>

</body>
</htmL>
0
Comment
Question by:riskyricky1972
  • 3
  • 3
  • 2
  • +3
12 Comments
 
LVL 4

Expert Comment

by:monolith_888
ID: 10816441
Backwards, as in 'olleh' ?

or upside down?

0
 

Author Comment

by:riskyricky1972
ID: 10816535
it looks rare. try to print please.
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10816548
I did - but my page comes up blank!  My only suggestion would be to change your writing-mode to: 'tb-lr', but though I can see it on the screen, it's not coming through on the paper...

-blake
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:riskyricky1972
ID: 10816673
Make sure you use IE 6.0, and tb-lr is not what I want to see.
From the code above, it should display hello vertically on the web page.

Thank you

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10817353
I'm not sure which instance you're trying to achieve. These are the 2 possibilities for vertical text:

<html>
<head>
</head>
<body>
<div style="writing-mode: tb-rl;">This will print from the top down</div>
<div style="writing-mode: tb-rl; filter:flipv() fliph();">This will print from the bottom up</div>
</body>
</html>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10817601
Why would you be surprised that it does not print correctly.  writing-mode is only supposed to apply to visual media, not print, and the filters theoretically should also apply only to visual.

However as they are IE only the results are probably dependent on the combination of OS version, browser version , print driver. If you want to print something like that you need it to be a graphic; there is no way you will get consistent results using visual media properties that may or may not be support by the environment where the printing is taking place.

Cd&
0
 

Author Comment

by:riskyricky1972
ID: 10817683
i understand what you talking about. but the data came from database with asp.
and the graphic does not work in my case. any idea?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10817927
Exactly how do you need it oriented on the page?

Cd&
0
 
LVL 8

Accepted Solution

by:
hendridm earned 400 total points
ID: 10963915
To add on to what seanpowell said, you could do something like this to make the print output different from the browser output:

<html>
<head>
<style>
@media print {
      .noprint {
            display: none;
      }
}

@media screen {
      .nobrowser {
            display: none;
      }
}
</style>
</head>
<body>
<div style="writing-mode: tb-rl;" class="noprint">This will print from the top down</div>
<div style="writing-mode: tb-rl; filter:flipv() fliph();" class="nobrowser">This will print from the bottom up</div>
</body>
</html>

It's a hack, but the first <div> would only appear to the browser, and the second <div> would only show up when printed.  You might be able to rig it to work using a similar technique.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10963994
Just to add - what you posted isn't a hack, it's part of the CSS Paged Media specification. :-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10993253
riskyricky1972  Last 10 Grades Given: C C C C C C C C C C
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10995531
The Cs are a recent achievment, after they were told to clean up abandoned questions by a mod.  No sense wating time here.  I'll go help someone who appreciates the experts who volunteer here; whle a make a new entry in users to ignore list.

Cd&
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month20 days, 14 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question