在没有固定高度的 HTML/inlineSVG 中将文本旋转 270°？

Question

我想在 HTML5 中有一个这样的表格：

也就是说，第 2 列的标题旋转 270°，垂直对齐底部，水平居中，黑色背景上的白色字体，但没有为标题行/列设置明确的高度，最好不必求助于使用 JavaScript 进行布局...

现在，直到现在，我通过使用服务器端图像生成来做到这一点，
<img src="handler.ashx?text=bla&fg=FFFFFF&bg=000000" />
不幸的是，这会禁用使用 搜索文本CTRL + F，这是相当不幸的，因为有很多组（数百个）。

现在有一些关于 SO 的帖子，例如将
HTML SVG 文本旋转 270 度
如何在 TH 表标签中使用 CSS Rotate()
使用 CSS 转换旋转表格标题文本
https://jsfiddle.net/t5GgE/1/

但是它们要么明确地（或间接地）设置高度，要么在表格标题中使用背景颜色无法正常工作。

现在我到目前为止是这样的：https :
//jsfiddle.net/kn46f38n/6/

其中的问题是垂直对齐底部无法正常工作，并且高度不会自动调整（除非我添加画布图像）。

所有这些都相当令人沮丧，这基本上意味着唯一的进展是用画布替换处理程序，这减轻了服务器的负担，但在可搜索性方面没有任何进展，而且最糟糕的是，使用 JS 进行布局，而有仍然是不支持画布的浏览器。

真的没有办法在 HTML/inlineSVG 中做到这一点，而不必设置显式高度（任何类型的高度，比如包括变换原点），也不必求助于 javascript 吗？

没有 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

啊，没关系，我自己得到的。
秘诀是使用vertical-lr，因此宽度和高度已经正确。然后你所要做的就是将文本以变换原点为中心旋转 180 度......

适用于 Chrome 和 Firefox 以及 IE 11 和 10（根据 MDN 向后兼容 IE9，但由于 ms-transform-rotate 无法正常工作，如果省略 ms-transform，它会优雅地降级为仅写入模式 vertical-lr ）。

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： //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>