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>
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?
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
VERY VERY COOL !
Thank you ! But ! How to control quality of rendering SVG pic ? I use larger text & see some defects on text !
Awesome! Thank you!
And what about Google, yahoo, etc.?
Will they index text like this?
I’m using Firefox and your example shows up just fine in FF.
Thanks really nice.
yeah its great.. but if it include as function, it will be much better..
not bad, it’s really cool method
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
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.
IE8 has some bugs too although it is more stable than IE7 and IE6,-“
Yes ! That script is very cool. Thanks
Great! That script is working fine in almost all browsers.
amaizing………no words to say .. thanks man
Hi, I tried to run the script in mozilla, but ‘data’ is not getting displayed vertically
IE8 seems to be very stable compared to earlier versions of internet explorer.,’
Thanks for it, It has resolve my problem. Thanks again.
Great..
Work in Chrome and IE6..
But not work in Firefox and Opera??