PDA

Click to See Complete Forum and Search --> : vertical text?

potterd64
11-06-2007, 01:02 PM
Is there a CSS style to make text run vertically instead of horizontally?
Fang
11-06-2007, 01:57 PM
No, but it will be part of W3C css3-text. Wait a few years ...
WebJoel
11-06-2007, 07:15 PM
And if you don't want to wait for the maybe 10-years that this is going to be, -you can 'do' vertical now (from a certain point of view...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style>
p#vert {margin:25px; padding:5px; width:10px; font-weight:bold; border:1px solid black; text-align:center;}
#vert span {display:block;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>

<p id="vert">
<span>V</span>
<span>E</span>
<span>R</span>
<span>T</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>L</span>
<span style="padding-top:23px;">T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</p>


</body>
</html>