Vertically align vertical text in SlickGrid header

Question

I am changing the height of a SlickGrid header and rotating the text in the header with the following CSS:

.slick-column-name {
    -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%;
}
.slick-header-columns, .slick-header-column {
    height: 200px !important;
}

For a better understanding, please take a look at this:

http://jsfiddle.net/2Nvc3/1/

The rotated text in the header is centered and cut off. How can I change the alignment, so that it starts on the bottom (the text should be left-aligned before the -90° rotation)?

The width of one of the columns is different on purpose.

Answer 1

Link to jsFiddle I played around for a while. Basically the problem was that the origin of rotation was the middle of your text/header. Since "Else else SOmeshing Else" is significantly longer than the other column names, it sticks out on both sides. Either way - changing the origin of location to the beginning of the text solves this issue. Then to center um...horizontally(after the rotation) the text we put a margin-left of 40% - at leat that looks good in Chrome, not exactly sure why it's not 50%. To center the text um...vertically(after the rotation) we just add a text-indent of -235px, which is dictated by the height chosen here to fit the text, which is 250px.