[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

DHTML Printing issue

Posted on 2004-04-13
13
Medium Priority
?
938 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +3
13 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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

650 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