Home » Fresh Foo » Vertical text in HTML

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.