Printing rotated text from web page

Question

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!

Answer 1

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 comes 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

Answer 2

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.com/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...