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,779
  • 24
  • 115
  • 226
  • 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
  • 479,566
  • 201
  • 878
  • 984
  • 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