I run a web application that generates some reports for users. For one of those reports, I need to print the text rotated 90 degree. I've tried many ways but have not found a way to print it properly. I can display text on that pop-up 90 degree rotated with the css class below but when it's sent to printer as usual the text is rotated to normal form and printed. I understand the reason printer is not printing as it's displayed on the browser but is there any way I can do that? Scripting language for this site is PHP.

UPDATE: I can print text rotated that's on a static page but can't print text rotated when it's on a pop up. Actually now I need help to print a page with CSS styling intact

Edit: It will be even helpful enough if I can print it via Firefox only as the client uses Mozilla Firefox.

.rotate{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width:400;
    height:400;
}

This is how the pop-up shows the text and how I want to print the text

Much appreciated!

I run a web application that generates some reports for users. For one of those reports, I need to print the text rotated 90 degree. I've tried many ways but have not found a way to print it properly. I can display text on that pop-up 90 degree rotated with the css class below but when it's sent to printer as usual the text is rotated to normal form and printed. I understand the reason printer is not printing as it's displayed on the browser but is there any way I can do that? Scripting language for this site is PHP.

UPDATE: I can print text rotated that's on a static page but can't print text rotated when it's on a pop up. Actually now I need help to print a page with CSS styling intact

Edit: It will be even helpful enough if I can print it via Firefox only as the client uses Mozilla Firefox.

.rotate{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width:400;
    height:400;
}

This is how the pop-up shows the text and how I want to print the text

Much appreciated!

• php
• javascript
• html
• firefox
• printing

• Did you say popup? That is, do you mean it's not always visible? – Mr Lister Commented Aug 15, 2013 at 13:36
• @MrLister thanks for noting "rotaion" :) Yes, it's a pop-up, visible when a print button on this web page is clicked – Fallen Commented Aug 15, 2013 at 13:38
• Yes, then you will need to make it always visible when printed, as user2641697 says. The printing routine doesn't know about pressed buttons. – Mr Lister Commented Aug 15, 2013 at 13:40
• Have you tried jqueryrotate? – Benedict Lewis Commented Aug 15, 2013 at 13:54
• @BenedictLewis: I've no issue in rotating the text to display but the issue is to print it rotated. – Fallen Commented Aug 15, 2013 at 14:04

4 Answers 4

Hmm... This works for me... Tested on:

• Firefox 23 (Win7, OSX)
• Chrome 28 (Win7, OSX)
• Safari 6 (OSX)

Admittedly I didn't actually print it, but redirected the print output to PDF (OS-level feature; nothing to do with Firefox).

Make sure that your rules defining the rotation do not have some media query attached disabling them in media="print".

I used the following example document, which es as a handy data-URI:

data:text/html,%3Cp%20style=%22%20-webkit-transform:%20rotate%28-90deg%29;%20transform:%20rotate%28-90deg%29;%20border:%201px%20solid%20red;%20padding:%201ex;%20width:%20100px;%20%22%3Etest%20rotate%3C/p%3E

You can use PHP to generate an image of the rotated text and then print it. The cool thing about images is that it doesn't depend upon the browser at all. There are some solutions (already mentioned in this thread) that work, but are tested only on few latest browsers. This solution doesn't care about the browser as long as the browser can print images, only it bothers about a server that can support PHP5.

here's how your PHP file (image_gen.php) should look:

<?php
// create a 100*100 image
$im = imagecreatetruecolor(100, 100);

// Write the text
$textcolor = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
imagestringup($im, 3, 40, 80, $_GET['text'], $textcolor);
header('Content-type: image/png');
// Save the image
imagepng($im);
imagedestroy($im);
?>

See this link...

This file takes in the text to print vertically as a get parameter like so:

http://example./example.html?text=This+Is+The+Text+To+Be+Printed+Vertically

and it returns an image of that text printed vertically. So you can do this in your main HTML file that you want to print:

<img src = "image_gen.php?text=Hello world">

PLEASE NOTE: the values specified in the example code are just sample values, text and colours, change them according to your purpose...

so that is how you insert that image into your HTML file. Now when you print that image you must get the image printed as it is, i.e. with vertical text...

Here, i took a print out and captured a photo of it to show to you that it actually works, i know that the text is not clearly visible, but you can make out that it is vertical.

hope that helps...

This should work. The following has been tested in Chrome:

 <script type="text/javascript">
      var printWindow = window.open();
      printWindow.document.write('<style type="text/css">\
              .rotate{\
              -webkit-transform: rotate(-90deg);\
              -moz-transform: rotate(-90deg);\
              filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);\
              width:400;\
              height:400;\
          }\
    </style>\
    <div class="rotate">Rotated Content</div>');

    printWindow.print();
 </script>

(Notice I put backslashes to escape enters.)

If you'd rather just have an invisible print frame (the user clicks a button and a print dialog appears), use an iframe. Just note that Opera (probably until they switch to WebKit stuff) doesn't like this.

If your text is rotated when displaying on your screen, but not when printing it, then it could be that your CSS is being applied only to the screen and not to the print media.

Make sure to set the media attribute value to all in your <link> tag:

<link rel="stylesheet" type="text/css" href="style.css" media="all">

And avoid using screen if you want your CSS file to target more than just puter screens:

<link rel="stylesheet" type="text/css" href="style.css" media="screen">

You could also have two dedicated CSS files, one for puter screens, and one for printing, allowing you more control:

<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="style-print.css" media="print">

More info about the media attribute: http://www.w3schools./tags/att_link_media.asp

Cheers!