Solved

DHTML Printing issue

Posted on 2004-04-13
13
936 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
Independent Software Vendors: 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 100 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

691 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