How can I draw vertical text with CSS cross-browser

Question

I want to rotate a single word of text by 90 degrees  with cross-browser     IE6     Firefox 2  any version of Chrome  Safari  or Opera  support  How can this be done

User · Answer

Another solution is to use an SVG text node which is supported by most browsers    lt svg width  50  height  300  gt       lt text x  28  y  150  transform  rotate -90  28  150   style  text-anchor middle  font-size 14px  gt This text is vertical lt  text gt   lt  svg gt    Demo  https   jsfiddle net bkymb5kr   More on SVG text  http   tutorials jenkov com svg text-element html

User · Answer

I adapted this from http   snook ca archives html and css css-text-rotation      lt style gt       Rotate-90               display  block          position  absolute          right  -5px          top  15px          -webkit-transform  rotate -90deg           -moz-transform  rotate -90deg          lt  style gt   lt  -- if IE  gt       lt style gt           Rotate-90               filter  progid DXImageTransform Microsoft BasicImage rotation 3               right -15px  top 5px                 lt  style gt       lt   endif -- gt

User · Answer

I ve had problems trying to do it in pure CSS - depending on the font it can look a bit rubbish   As an alternative you can use SVG VML to do it   There are libraries that help make it cross browser with ease e g  Raphael and ExtJS   In ExtJS4 the code looks like this       var drawComp   Ext create  Ext draw Component             renderTo  Ext getBody      or whatever           height  100  width  100   ditto               var text   Ext create  Ext draw Component             type   text           text   The text to draw           rotate                x  0  y  0  degrees  270                    x  -50  y  10   or whatever to fit  you could calculate these                text show true     This will work in IE6  and all modern browsers  however  unfortunately I think you need at least FF3 0

User · Answer

If you use Bootstrap 3  you can use one of it s mixins    rotate degrees     Example    rotate -90deg

User · Answer

I am using the following code to write vertical text in a page  Firefox 3 5   webkit  opera 10 5  and IE   rot-neg-90       -moz-transform rotate -270deg        -moz-transform-origin  bottom left      -webkit-transform  rotate -270deg       -webkit-transform-origin  bottom left      -o-transform  rotate -270deg       -o-transform-origin   bottom left      filter  progid DXImageTransform Microsoft BasicImage rotation 1

User · Answer

If CSS writing-mode  sideways-lr is what you prefer  and you happen to run into chromium chrome based browser  You may try       writing-mode  vertical-rl     transform  rotate 180deg       so all modern browsers support it now    reference  https   bugs chromium org p chromium issues detail id 680331 c4

User · Answer

The CSS Writing Modes module introduces orthogonal flows with vertical text   Just use the writing-mode property with the desired value    x000D   x000D  span   margin  20px    x000D   vertical-lr   writing-mode  vertical-lr    x000D   vertical-rl   writing-mode  vertical-rl    x000D   sideways-lr   writing-mode  sideways-lr    x000D   sideways-rl   writing-mode  sideways-rl    x000D   lt span id  vertical-lr  gt  x000D       1  vertical-lr   lt br   gt  x000D       2  vertical-lr   lt br   gt  x000D       3  vertical-lr   x000D   lt  span gt  x000D   lt span id  vertical-rl  gt  x000D       1  vertical-rl   lt br   gt  x000D       2  vertical-rl   lt br   gt  x000D       3  vertical-rl   x000D   lt  span gt  x000D   lt span id  sideways-lr  gt  x000D       1  sideways-lr   lt br   gt  x000D       2  sideways-lr   lt br   gt  x000D       3  sideways-lr   x000D   lt  span gt  x000D   lt span id  sideways-rl  gt  x000D       1  sideways-rl   lt br   gt  x000D       2  sideways-rl   lt br   gt  x000D       3  sideways-rl   x000D   lt  span gt  x000D   x000D   x000D

User · Answer

My solution that would work on Chrome  Firefox  IE9  IE10  Change the degrees as per your requirement     rotate-text     -webkit-transform  rotate 270deg     -moz-transform  rotate 270deg     -ms-transform  rotate 270deg     -o-transform  rotate 270deg     transform  rotate 270deg     filter  none    Mandatory for IE9 to show the vertical text correctly

User · Answer

Updated this answer with recent information  from CSS Tricks   Kudos to Matt and Douglas for pointing out the filter implementation    rotate     -webkit-transform  rotate -90deg     -moz-transform  rotate -90deg     -ms-transform  rotate -90deg     -o-transform  rotate -90deg     transform  rotate -90deg         also accepts left  right  top  bottom coordinates  not required  but a good idea for styling      -webkit-transform-origin  50  50     -moz-transform-origin  50  50     -ms-transform-origin  50  50     -o-transform-origin  50  50     transform-origin  50  50         Should be unset in IE9  I think       filter  progid DXImageTransform Microsoft BasicImage rotation 3       Old answer   For FF 3 5 or Safari Webkit 3 1  check out  -moz-transform  and -webkit-transform    IE has a Matrix filter v5 5    but I m not certain how to use it   Opera has no transformation capabilities yet    rot-neg-90        rotate -90 deg  not sure if a negative number is supported so I used 270      -moz-transform  rotate 270deg     -moz-transform-origin  50  50     -webkit-transform  rotate 270deg     -webkit-transform-origin  50  50        IE support too convoluted for the time I ve got on my hands

[html] How can I draw vertical text with CSS cross-browser?

Examples related to html

Examples related to css

Examples related to cross-browser