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.

1
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

For more information click here

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: