Rotate text 270° in HTML/inlineSVG without fixed height?

Question

I want to have a table like this in HTML5:

That is, titles from column 2 on rotated 270°, and vertically aligned to the bottom, and horizontally centered, and white font on black background, but without setting an explicit height to the header row/columns, and preferably without having to resort to using JavaScript for layout purposes...

Now, until now, I do it by using server-side image generation like
<img src="handler.ashx?text=bla&fg=FFFFFF&bg=000000" />
Unfortunately, this disables searching for text with CTRL + F, which is rather unfortunate since there are many many groups (hundreds).

Now there are a few posts on SO like
Rotate HTML SVG Text by 270 degrees
How to use CSS Rotate() in TH Table Tags
Rotating table header text with CSS transforms
https://jsfiddle.net/t5GgE/1/

But they all either set height explicitly (or indirectly), or it doesn't work properly with a background-color in the table-header.

Now what I have so far is this:
https://jsfiddle.net/kn46f38n/6/

Which has the problems that vertical align bottom doesn't work as it should, and height does not adjust automatically (unless I add the canvas image).

All of which is rather discouraging, and which basically means the only progress has been replacing the handler with a canvas, which reliefs the server, but isn't any progress in searchability, and, worst of all, using JS for layout while there are still browsers out that don't support canvas.

Is there really no way to do this in HTML/inlineSVG without having to set an explicit height (height of any kind, like including transform-origin) and without having to resort to javascript ?

Without jQuery:

var maxH = 0;
// Find the column label with the tallest height
var hdrs = document.querySelectorAll(".hdr")
for (i = 0; i < hdrs.length; i++)
{
    var bbox = hdrs[i].getBoundingClientRect();
    if (bbox.height > maxH)
        maxH = bbox.height;
}


// Make all the label cells that height
var cols = document.querySelectorAll(".col")
for (i = 0; i < cols.length; i++)
    cols[i].style.height = maxH + "px";

Answer 1

Ah, never mind, I got it myselfs.
The secret is having it vertical-lr, so width and height are already correct.
Then all you have to do is rotate the text 180 degrees with transform-origin center...

Works in Chrome and Firefox and IE 11 & 10 (according to MDN backwards-compatible to IE9, but since ms-transform-rotate doesn't work properly, it degrades gracefully to only writing-mode vertical-lr if you omit ms-transform).

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://web.archive.org/web/20160320101147/https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

.blackhd
{
    vertical-align: bottom;
    width: 40px;
    #height: 100px;
    border: 1px solid hotpink;
    background-color: black;
    text-align: center;
}

.vert
{
    display: inline-block;
    color: white;
    #font-weight: bold;
    font-size: 15px;
    writing-mode: vertical-lr;
    #writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    transform-origin: center;
    transform: rotate(180deg);
    padding-top: 2mm;
    padding-bottom: 3mm;
}


<table>
    <tr>
        <td class="blackhd"><span class="vert">abc</span></td>
        <td class="blackhd"><span class="vert">defghijkl</span></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>defghijklmnopqr</td>
    </tr>
</table>