Cult-Foo

Vertical text in HTML

Not so long ago i had a problem with one site. There was name of user in vertical text.

Link to example

My first thought was “i will use php and generate image for each user”.
But after that i thought that it is bad idea, if there will be many visitors. So i decide to output it using html

writing-mode – This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems.

filter: flipv() fliph(); writing-mode: tb-rl;

By using such styles we tell browser to output it vertically. Sad thing is that it is working only in IE.
But a lot of people using FF, Opera.
Scalable Vector Graphics (SVG) – this thing will help me :)
You can read about it’s advantages here

<svg xmlns='http://www.w3.org/2000/svg'> 
<text x='-50' y='10' font-family='Tahoma' font-size='12' transform='rotate(-90)' text-rendering='optimizeSpeed' fill='#888'>some text</text> </svg>

This piece of code creates line of text and rotate it vertically.

Here is full example.

<html>
<head>
	<style> 
		html>body .canvas { display: none } 
		html>body .obj { display: block } 
		.canvas, .obj { } 
		.old_canvas { 
			font-family: Tahoma, Arial, sans-serif; 
			font-size: 12px; 
			width: 40px; 
			margin-top: 40px 
		} 
	</style>
	<--![if IE]> 
	<style> 
		.canvas { 
			filter: flipv() fliph(); 
			writing-mode: tb-rl; 
			font-size:12px; 
			font-family: Tahoma; 
			background-color: white; 
			display: block; 
			color: #888 
		} 
		.obj { display: none } 
	</style> 
	<![endif]-->
</head>
<body> 
	<div class="canvas">some text</div> 
	<--![if !IE]> 
		<object class="obj" type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <text x='-50' y='10' font-family='Tahoma' font-size='12' transform='rotate(-90)' text-rendering='optimizeSpeed' fill='#888'>some text</text> "> 
		<div class="old_canvas">some text</div> 
		</object> 
	<![endif]--> 
</body> 
</html> 

Code explanation:

<div class="canv">some text</div>

This piece render text for IE

	<--![if !IE]> 
		<object class="obj" type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <text x='-50' y='10' font-family='Tahoma' font-size='12' transform='rotate(-90)' text-rendering='optimizeSpeed' fill='#888'>some text</text> "> 
		<div class="old_canvas">some text</div> 
		</object> 
	<![endif]-->

This one renders SCG graphics for FF, Opera and others.

And if browser doesn’t support “objects” we use old_canvas div just to show text. Of course we need to style it properly to not break site design.

<div class="old_canv">some text</div>

Did you like it? Help us spread the word!

18 Responses to "Vertical text in HTML"

  1. Wow, that is cool, I came across a similar conundrum several years back and never found a good workaround. It’s too bad this technique only works on IE (which is odd since more often it’s the opposite). I’ll have to look into that and setting an alternative using SVG if/when it comes up again. Can we see how it integrated into the site?

  2. elPas0 says:

    i’m sorry, but it is still in progress. after it will be finished, and if client will agree, i’ll post a link here as a live example

  3. PretorianetZ says:

    VERY VERY COOL !

    Thank you ! But ! How to control quality of rendering SVG pic ? I use larger text & see some defects on text !

  4. neffritt says:

    Awesome! Thank you!
    And what about Google, yahoo, etc.?
    Will they index text like this?

  5. Kay says:

    I’m using Firefox and your example shows up just fine in FF.

  6. Varsha Shakya says:

    yeah its great.. but if it include as function, it will be much better..

  7. not bad, it’s really cool method

  8. Pushkar says:

    Hi,

    I am using it with IE 8, m y problem is that it wrap the text from space. Floowing is code sample. Thanks in advance.

    Title for Y-Axis

    Title for X-Axis

  9. chandrou says:

    it worked fine in ff but the text u gave in the object is only getting printed, just like static data, i guess. in my case i want to get data from db and display it dynamically. can u help me with it out.

  10. IE8 has some bugs too although it is more stable than IE7 and IE6,-“

  11. Aitera says:

    Yes ! That script is very cool. Thanks

  12. Great! That script is working fine in almost all browsers.

  13. Mukesh says:

    amaizing………no words to say .. thanks man

  14. IE8 seems to be very stable compared to earlier versions of internet explorer.,’

  15. Bhushan says:

    Thanks for it, It has resolve my problem. Thanks again.

  16. Romli says:

    Great..
    Work in Chrome and IE6..
    But not work in Firefox and Opera??

Trackbacks/Pingbacks

Do you have something to say?