Vertical Text Parent Dimension Issue

by dswitzer

HTML

<h1>Vertical Text Test</h1>

<h2>In Block Element</h2>
<div class="block" style="min-height: 150px;">
    <div class="rotate">
        <div class="text">Columns</div>
    </div>
    <div class="rotate">
        <div class="text">of</div>
    </div>
    <div class="rotate">
        <div class="text">Various</div>
    </div>
    <div class="rotate">
        <div class="text">Lengths</div>
    </div>
</div>

<h2>In A Table</h2>
<div style="min-height: 150px;">
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>
            Columns
        </th>
        <th>
            <div class="rotate">
                <div class="text">Columns</div>
            </div>
        </th>
        <th>
            <div class="rotate">
                <div class="text">of</div>
            </div>
        </th>
        <th>
            <div class="rotate">
                <div class="text">Various</div>
            </div>
        </th>
        <th>
            <div class="rotate">
                <div class="text">Lengths</div>
            </div>
        </th>
    </tr>
</table>
</div>

<input type="button" value="Fix Parent Element via JS" id="apply-fix" />

CSS

.rotate {
    background-color: #f00;
    position: relative;
}

.block .rotate {
    display: inline-block;
}

.rotate .text {
    background-color: #ff0;
    text-align: left;
    padding: 5px;

    -webkit-transform: rotate(-90deg) translate(-100%, 0);
    -moz-transform: rotate(-90deg) translate(-100%, 0);
    -ms-transform: rotate(-90deg) translate(-100%, 0);
    -o-transform: rotate(-90deg) translate(-100%, 0);
    transform: rotate(-90deg) translate(-100%, 0);

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
}

table th {
    text-align: left;
    vertical-align: bottom;
}

JavaScript

$("#apply-fix").on("click", function (e){
    e.preventDefault();
    $(".rotate").each(function (i, el){
        var $el = $(el)
          , $text = $el.find("> .text")
          , d = [$text.height(), $text.width()];
       $el.width(d[0]).height(d[1]);
       $text.css({position: "absolute"});
    });
});