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

Question

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

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

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

现在SO上有一些帖子像
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/

但它们要么显式(或间接)设置高度，要么在表头中使用背景颜色时无法正常工作。

现在我所拥有的是:
https://jsfiddle.net/kn46f38n/6/

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

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

真的没有办法在 HTML/inlineSVG 中做到这一点而不必设置明确的高度(任何类型的高度，比如包括 transform-origin)并且不必求助于 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，因此宽度和高度已经正确。
然后你所要做的就是将文本以 transform-origin center 旋转 180 度......

适用于 Chrome 和 Firefox 以及 IE 11 和 10(根据 MDN 向后兼容 IE9，但由于 ms-transform-rotate 无法正常工作，如果您省略，它会优雅地降级为仅 writing-mode vertical-lr ms 转换)。

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>