Making text vertical with css only works with constant text length

Question

I need vertical text for a website. Thats my css code:

.vertical-category  span {

    display: block;
    position: absolute;
    top: 30px;
    left: -37px;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;

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

Thats well working, but the start position of the first letter depends on the length of the word:

As you can see, the left vertical text is on the red background. the right vertical text is longer and so not at the red background.

what to do, that the position of the vertical text is always fix and not depends on the text length?

Answer 1

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.