0

Basically I have the following code: http://jsfiddle.net/5ZuUZ/ There I have a div with a gray border, and the left edge of this would like to write vertical "architecture" . How can I do this?

ridermansb
  • 10,159
  • 22
  • 112
  • 210
  • When you say horizontally, do you actually mean vertically, i.e. rotate the horizontal text 90 degrees clockwise? – alex Mar 23 '11 at 01:07
  • Might be worth a look: http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser – Dan Mar 23 '11 at 01:19

1 Answers1

2

You can rotate text with CSS3.

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

jsFiddle.

alex
  • 460,746
  • 196
  • 858
  • 974
  • this is css3? css3 can not be because it is a customer need that run perfectly well on the smartphone – ridermansb Mar 23 '11 at 01:15
  • 1
    @Riderman Depends on the Smartphone. Mobile Safari will render it fine. If compatibility is an issue, you will need to render it as an image. – alex Mar 23 '11 at 01:16
  • You're right! but your example works very well, I think the solution would be an image even for compatibility reasons. Any idea how to create a transparent image to accomplish this task? – ridermansb Mar 23 '11 at 01:19
  • @Riderman Type the text into image editing software onto a transparent background, and then rotate the canvas 90° counter-clockwise. – alex Mar 23 '11 at 01:21