Vertical Text – Using CSS

Introduction

Very simply, this guide shows how to make your text vertical using some simple CSS. If the examples below are not vertical then you are not using IE. This technique makes use of “Visual Filters” which are an IE only technology at present.

Tested in IE6 Icon

CSS Code

You can easily make vertical text with the following css:

In to the <head> section put your CSS:

<style>
<!–
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
–>
</style>

And into the body:

<div class=”verticaltext”>Test-1</div>

If we want to play with this a little we can, for example, change the filter from ‘flip vertical – flip hotizontal’ to ‘flip vertical – flip vertical’. Combining this with the first example we can have the following: