CSS: Format text vertically

Is it pos开发者_如何转开发sible with CSS to format a text vertically? For example like this image shows. The command / workaround should work in Safari as it is used in an iPhone Application.

Thanks a lot. Doonot

---

With CSS3 you can use transform:rotate

div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

But... my experience with filters is that they screw with text a little bit visually. Bad enough that it can be a deal breaker.

---

Transform code, particularly in webkit, is hideously broken. At the time of writing, the transformation matrix is applied to the rendering engine but not the space calculations so both Firefox and Chromium try to render a 100x200 area in a 200x100 cell. Attempting to switch the width/height results in a recalculation of the transformed area before the transformation is applied.

The simplest and most reliable way is to use SVG to generate an image of the text. Unfortunately, it is a two-stage process:

<svg>
    <text x="50" y="50" transform="rotate(0 0,0)">Category</text>
</svg>

Render in a browser and get the dimensions of the text tag (in this case 59x17) and plug them into the SVG.

<svg width='25px' height='60px'>
    <text x="17" y="59" transform="rotate(270 17,59)">Category</text>
</svg>

With 59 x 17px content, I increased the container's size slightly because the size seemed to ignore hanging glyphs (the tail of the y, for example). Rotating it 270 degrees around the bottom-right results in the old top-right becoming the new top-left (ie the text is shifted to vertical, bottom-top). The text is also subject to regular stylesheet rules, although you will have to recalculate the dimensions if this changes the text size.

---

Yes with Safari / Webkit and another browsers that support CSS Text rotation.

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate. Opera has -o-transform support in 10.50

When it comes to effects in Internet Explorer there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

#element-id{
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform:  rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
left: 10px;
top: 15px;
}

Ref: TEXT ROTATION WITH CSS