How to rotate a text

karelog
karelog used Ask the Experts™
on
Hello everybody!

I am developing a form which needs some text rotated.
I cannot find a crossbrowser solution. Could someone help me?

in advance, thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:

Author

Commented:
when I mean rotate, I want to say that I want the text to see something like the picture:


2010-07-01-15.32.53.png

Commented:
You did not say which web editor your using. You could always save the headers as graphics and rotate them. Are you using the lastest Dreamweaver?
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Author

Commented:
I'm using:
C#
Visual Studio 2008
.NET Framework 3.5 SP1 + Microsoft Chart Controls

The text I have to rotate is dynamic. So is not like if I could take a screenshot of a word and then put it there. Is much more complex T_T

Thanks :D


Commented:
Give this a try, it isn't perfect, but it may point you in the right direction.  


.up-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Open in new window

Not all browsers rotate text to vertical.  Some versions of IE have built in functions to handle this, but in the other browsers, they do NOT have such functions.  Therefore you won't be able to rotate text in all web browsers, probably until HTML 5 comes out and all browsers support it -- some time in the future.
Top Expert 2010

Commented:
Please check the folllowing link which has an example to display text vertically in IE and other browsers

http://ccapeng.blogspot.com/2008/03/use-css-to-create-vertical-text.html

Author

Commented:
Ok, so I can't rotate text.
I've tried it all but it can't be done in a standard way using CSS.

So, anybody could teach me how to print my text as an image?

I use
C#
Visual Studio 2008
.NET Framework 3.5 SP1 + Ms Chart Controls

Thanks ^^

Commented:
Just use a graphics program like Photoshop and rotate the text or use Micosoft Word and type in the text rotate it and take a screen shot.  I prefer using photoshop because you can do a better job croping and can save the image in different formats.

Author

Commented:
The text is generated by the application.

I get every column from a database and is dinamyc, so I can't just do that.

So, any Idea on how to print my text to an image and then insert that image to finally rotate it ?
You can use CSS3 to do it but it isn't supported by IE.
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);      

For IE you can try the below:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
There are 4 values for the rotation 0,1,2,3 which stand for 0,90,180,270 degrees clockwise.

Good luck!

Commented:
Try taking a snapshot of the screen and saving it as a gif. Then crop and rotate it.
Print Screen on a PC or Command+Shift+4 on a Mac.

Author

Commented:
as I said, I need the solution to be crossbrowser, so CSS3 doesn't work and the other methods are not standards yet. Plus, the text is dynamic, so IS NOT THE SAME TEXT EVERY TIME I LOAD THE PAGE so I can't just take a snapshot to rotate it.

I will repeat:
I need to know HOW TO CREATE AN IMAGE FROM THE TEXT I AM PRINTING, all from code behind.

I use
C#
Visual Studio 2008
.NET Framework 3.5 SP1 + Ms Chart Controls

Thanks :D
It is a cross-browser solution for main browsers like IE, Firefox, Opera, Safari, Chrome,etc.
Just try IT.
Some Update:
Visit this:
http://snook.ca/archives/html_and_css/css-text-rotation
Even dynamic text is stored between elements.
Some this is not the problem unless you work for really old browsers like Netscape.

Good luck!

Author

Commented:
I already tried and it looks awfull for the kind of text I need to write. It's not a number, are names. So when I write "Gabriel Eduardo Espinoza Erices", in IE works great, in Firefox don't. The height of the table is calculated before the CSS is applied so the table headers looks awful and there is no way of calculating it with javascript.


Anyway I have an idea. could you wait until I try to apply it? (about 1 week)
I will calculate the number of letters of the longest name and I will calculate the average of pixels that one single letter uses. So I will calculate the height of my row before applying the CSS using code-behind :D

Thanks ^^

Commented:
This may be an overly simple idea, but if the text is generated by an application like a database could you just write a calculation that inserts a "return" after each letter and if there is a space loop that to another column. Like this.
T  D
E  A
S  T
T  A

Author

Commented:
I don't want to complicate myself when I think I have the solution just a few steps from me. If the thing I want to try do not work, then I'll start with other kind of solutions. :P
Commented:
You said you're using C#, right?  You could probably create images on-the-fly using the System.Drawing namespace.  Have a page that gets loaded as an image, but is actually an ASP .NET script.  Set the Content-Type header to whatever your image type will be (probably bitmap--least overhead).  Pass the name(s) via a querystring.  You can then create a Bitmap object, and from that, a Graphics object.  Use the Graphics object to write the text, save it back to the Bitmap, and output the Bitmap data.  Easier said than done.
A much simpler method would be to use the <canvas> tag.  While MSIE does not technically support <canvas> in most versions, you can get a lightweight JavaScript framework, explorercanvas, to do the translation for MSIE.  Using <canvas> would greatly decrease the overhead on your server, result in faster loading times for the end user, have the same consistency as an image, and be much simpler to implement.  The only trick here is that you would need a bitmap font, as <canvas> doesn't have support for text yet.
Even better, you could take a similar approach to the first option, but rather than dealing with messy bitmap images, you could output a simple vector image.  MSIE9 will have basic support for SVG, and all other major browsers already support it.  For older versions of MSIE, you can use VML, which should be similar enough to SVG in this case.

Author

Commented:
I will take a deeper look into the Zenexer post. I think I will tray the canvas trick or the Vector image (I dont even know what it is)

Commented:
A normal bitmap image is just like you would expect: each pixel is assigned a color.  A vector image, rather than working with pixels, defines the steps used to draw the image.  For example, a vector image might define where a line starts and ends, its color, and its width.  A bitmap image defining the same line, however, would store the color of each individual pixel.  Both bitmaps and vectors have their advantages.  SVG, canvas, and VML are generally vector formats, though it is possible for them to contain bitmap data.

Author

Commented:
is the final thing I can do D:

nevertheless I did not get an accurate solution, just an idea of what I should do :P^

Thanks anyway!

Commented:
Lol, no problem.  Let me know if you need more guidance; if you provide me with a code sample, I may be able to give you a less ambiguous solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial