CODEWITHSUNDEEP
jqueryhtmlcss
santa
santa

Reputation: 12512

Display text vertically

Is there a way to display text vertically without using CSS3 and will be supported by most browsers. Currently I use image instead, but need to change to actual text.

Perhaps a combo of CSS and jQuery?

enter image description here

Upvotes: 2

Views: 9664

Answers (3)

user6125284
user6125284

Reputation:

Here's how to do it:

Vertical text is accomplished easily these days with CSS transforms:

.vertical-text {    
    transform: rotate(90deg);
    transform-origin: left top 0;
}

Depending on which direction you'd like the text to display vertically, the rotation will be different, but it's that rotate value which will make the text vertical. Here's a helpful tip:

.vertical-text {

    float: left;
}

Floating the element will essentially emulate an auto width!

Upvotes: 0

ramsesoriginal
ramsesoriginal

Reputation: 1920

My first answer would be

.element {
   -moz-transform: rotate(90deg);
   -webkit-transform: rotate(90deg) ;
   -o-transform: rotate(90deg) ;
   -ms-transform: rotate(90deg) ;
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

but you said you want to avoid css3 (A not so wise choice, in my opinion, as it would do the job well, fast, efficient and if done right across all major browsers down to IE 7... this code should do the trick)

If you really insist on javascript there's jangle ( https://github.com/corydorning/jangle ), with which you can do stuff like

 <script>
   $('.element').jangle(90);
 </script>

Ideally I would recommend doing the css3 trick, and then as a fallback using jangle. you can use http://www.modernizr.com/ for detecting the browser's ability to rotate both in CSS (through a class on the html tag) and in JavaScript.

You can even do the same for animations: CSS 2d transformation + animation if aviable, and if not, fallback to jangle.

Edit to show how selectors work:

.element is just an Example, clearly you can place any valid CSS selector, for example:

 .class {
     background-color: red;
 }
 #ID {
     background-color: green;
 }
 p {
     background-color: blue;
     color:white;
 }

 #ID .class {
     background-color: yellow;
 }

 #ID p.class {
     background-color: grey;
 }

would match elements in

<div id="ID">
    <p class="class">
        Text in a "p" with class "class" inside id "ID"
    </p>
    <p>
        Text in a "p" inside id "ID"
    </p>
    <div class="class">
        Text with class "class" inside id "ID"
    </div>
    Text inside id "ID"
</div>
<p class="class">
   Text in a "p" with class "class"
</p>
<div class="class">
   Text class "class"
</div>
<p>
   Text in a "p" 
</p>

You can see how this looks here: http://jsfiddle.net/ramsesoriginal/nXqJ2/

Upvotes: 6

Kayla
Kayla

Reputation: 309

I think you can use this: http://www.w3schools.com/css3/css3_2dtransforms.asp If you put the text in a div.

Upvotes: -1

Related Questions