How to Create Vertical Text Using Only CSS

p:first-of-type {  writing-mode: vertical-lr;}p:last-of-type {  writing-mode: vertical-lr;  text-orientation: upright;}

<h4>With writing mode "vertical-lr"</h4><p>Start</p><hr><h4>With writing mode "vertical-lr" and text-orientation "upright"</h4><p>Start</p>

Vertical Text Direction

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Making text vertical with css only works with constant text length

It's hard to be completely sure without further context (for instance, where is that background color even coming from), but I believe this issue is your transform-origin. The first 50% is moving the element to the right. Try 0 or some static value:

transform-origin: 0 50%;

http://jsfiddle.net/dAUrF/

EDIT: This fiddle may help you visualize what is happening. The red element is the element before rotation and the yellow is after. Tweak the origin values and see how it affects the rotation.

transform-origin defines the point at which the rotation occurs. With 50% 50% the rotation occurs around the center of the element.

Vertical text and div blocks with CSS

I'm not 100% clear on your problem. If your problem is it breaking on resize, etc, and if position: absolute works in your layout, this worked for me:

.rotate {
  position: absolute; // Changed.
  transform: translateX(0%) translateY(190%) rotate(-90deg);
  float: left;
  width: 50px;
  font-size: 25px;
}

.right {
  float: left;
  background-color: lightgray;
  height: 300px;
  width: 90%;
  margin-left: 50px; // Changed. Width of .rotate
}

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

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... */
}

How do I rotate text in css?

You need to use the CSS3 transform property rotate - see here for which browsers support it and the prefix you need to use.

One example for webkit browsers is -webkit-transform: rotate(-90deg);

Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the -webkit- CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.

There already exists a more customisable widget as part of the jQuery UI - see the accordion demo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text :-)

Edit 2: I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.

Edit 3: It looks like the horizontal version was part of the original plan but I cannot see any way of configuring it on the demo page. I was incorrect… the new accordion is part of the upcoming jQuery UI 1.9! So you could try the development builds if you want the new functionality.

Hope this helps!

CSS Text orientation : vertically oriented to the right

sideways isn't supported by all the browser. Instead you can replace it with a scale transformation

div {  writing-mode: vertical-rl;  /*text-orientation: sideways;*/  transform:scale(-1);}

<div>dimanche</div>

How to make vertical text change into horizontal text in css?

Just add white-space: nowrap; to the txt2 class and it works.

Awesome picture slider btw !

How to create a vertical line with a text in the middle

Actually, many ways.

One of them:

html

<div class="wrapper">
    <div class="line"></div>
    <div class="wordwrapper">
        <div class="word">or</div>                                        
    </div>
</div>​

css

.wrapper {
    position: relative;
    width: 250px;
    height: 300px;
    border: 1px dashed #ccc;
    margin: 10px;
}

.line {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.wordwrapper {
    text-align: center;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -12px;
    z-index: 2;
}

.word {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px;
    font: bold 12px arial,sans-serif;
    background: #fff;
}

​

See example: http://jsfiddle.net/zmBrR/22/

---

Related Topics