Print rotated text from a web page

I am running a web application that generates some reports for users. For one of these reports, I need to print a text rotated 90 degrees. I tried many ways, but did not find a way to print it correctly. I can display the text in a 90-degree pop-up rotation with the css class below, but when it is sent to the printer, as usual, the text is rotated to its normal form and printed. I understand why the printer does not print because it is displayed in the browser, but is there a way to do this? The scripting language for this site is PHP.

UPDATE: I can print text that was rotated on a static page, but cannot print text rotated when it pops up. Actually now I need help printing a page with CSS style without changes

Edit: it will even be useful if I can print it through Firefox only if 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 a popup displays text and how I want to print text Preview

Very valuable!

+6
source share
4 answers

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

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

In truth, I didn't really print it, but redirected print output to PDF (OS level function, nothing to do with Firefox).

Make sure your rotation rules do not have a multimedia request by turning them off in media="print" .

I used the following sample document, which comes in the form of user-friendly URI data:

 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 

WFM: rotate print

+7
source

You can use PHP to create an image of the rotated text, and then print it. The great thing about images is that it is completely browser independent. There are some solutions (already mentioned in this thread) that work, but are only tested on the last few browsers. This solution does not care about the browser, as long as the browser can print images, it only cares about a server that can support PHP5.

this is what your PHP file looks like (image_gen.php):

 <?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 accepts text for vertical printing as a get parameter like this:

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

and returns an image of this text printed vertically. Thus, 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 ​​shown in the code example are only examples of values, text and colors, changing them according to your purpose ...

So you paste this image into your HTML file. Now, when you print this image, you should get an image printed as is, i.e. with vertical text ...

Here I took a printout and took a photo to show you that it really works, I know that the text is clearly not visible, but you can understand that it is vertical.

enter image description here

hope this helps ...

+6
source

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

(Note that I put a backslash in escape.)

If you prefer to have an invisible print frame (the user presses a button and the print dialog box appears), use an iframe. Just note that Opera (probably until it switches to WebKit stuff) will not like it.

+1
source

If your text rotates when displayed on your screen but not when it prints, your CSS may apply only to screen , not print .

Remember to set the value of the media attribute to all in the <link> :

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

And don't use screen if you want your CSS file to target more than just computer screens:

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

You can also have two dedicated CSS files, one for computer screens and one for printing, which allows 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 information about the media attribute: http://www.w3schools.com/tags/att_link_media.asp

Hooray!

+1
source

Source: https://habr.com/ru/post/951808/


All Articles