Vertically displaying text - HTML Forums

Code_worm · 11-06-2009, 09:48 PM

Hey guys been having a few problems finding resources on how to vertically align text. what it is is that i have a division i wish to display text in vertically...

Any ideas?
div{vertical-align: -50%}

thats what i came up with but still no joy...

ringsoft · 11-07-2009, 05:40 AM

Try adding this -

Quote:

writing-mode: tb-rl;

Code_worm · 11-07-2009, 11:41 AM

Nope that didn't work, tried it using inline style, external css file and style tag...

coothead · 11-07-2009, 12:27 PM

Hi there Code_worm,

I believe that writing-mode: tb-rl is, at present, IE only.

It is in the W3C CSS3 Working Draft...

http://www.w3.org/TR/2001/WD-css3-te...vanceDirection

...but does not, as yet, appear to have been adopted by Opera, Safari or Firefox.

I would suggest that you use an image to achieve this effect, assuming that it
is just for a snippet of text rather than the whole page.

Code_worm · 11-09-2009, 01:11 PM

Yeah i looked at the writing mode thing... i will try an image if all else fails but just to make it clear i wish to display text vertically in this format

T
E
X
T

coothead · 11-09-2009, 05:56 PM

Hi there Code_worm,

here is an example of that type of vertical text for you to play with...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#span1 {
    float:left;
    line-height:60px;
    margin-right:100px;
    padding:10px;
    border:3px double #999;
 }
#span2 {
    float:left;
    padding:5px;
    border:3px double #600;
    font-family:'times new roman',serif;
    color:#600;
 }
</style>

</head>
<body>

<div>
<span id="span1">T<br>E<br>X<br>T</span>
<span id="span2">T<br>E<br>X<br>T</span>
</div>

</body>
</html>