Tilt Text...

ddfff · Apr 14, 2005

Using the following to tilt text vertically and it works great.

.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}

is there a way to adjust this so the text displays at a lesser angle, say 45 or 30 degrees -- making it appear tilted

Thanks very much in advance.

BabyJeffy · Apr 14, 2005

Not at this stage. Your only practical option there is going to be images. Sorry.

Jeff

Foamcow · Apr 14, 2005

Not using a single CSS instruction. Not as far as I know anyway.

I guess you could do it with CSS by putting each character in a span tag each with a slightly different top/bottom margin. But that seems a bit clunky.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

Foamcow · Apr 14, 2005

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Slopey text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style>
    
body {
   font-size:15px;
   font-weight:bold;
   font-family:arial,sans-serif;
   }

.one {
    position:relative;
    top:0;
    }

.two {
    position:relative;
    top:4px;
    }

.three {
    position:relative;
    top:8px;
    }

.four {
    position:relative;
    top:12px;
    }
</style>
</head>

<body>
<p><span class="one">W</span><span class="two">o</span><span class="three">r</span><span class="four">d</span></p>
</body>
</html>

Not very practical though. Unless it's just for the odd couple of words

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

BillyRayPreachersSon · Apr 15, 2005

You could use a combination of CSS and JavaScript to dynamically position any text on an angle... However, the letters would still appear the right way up, not tilted.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Tilt Text...

ddfff

MIS

BabyJeffy

Programmer

Foamcow

Programmer

Foamcow

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor