Solved

DHTML Printing issue

Posted on 2004-04-13
13
929 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
13 Comments
 
LVL 4

Expert Comment

by:monolith_888
Comment Utility
Backwards, as in 'olleh' ?

or upside down?

0
 

Author Comment

by:riskyricky1972
Comment Utility
it looks rare. try to print please.
0
 
LVL 4

Expert Comment

by:monolith_888
Comment Utility
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
 

Author Comment

by:riskyricky1972
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:riskyricky1972
Comment Utility
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
Comment Utility
Exactly how do you need it oriented on the page?

Cd&
0
 
LVL 8

Accepted Solution

by:
hendridm earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
riskyricky1972  Last 10 Grades Given: C C C C C C C C C C
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now