如何在Safari iOS设备上处理CSS的writing-mode？

Question

我有一个名为vertical-text的CSS类，其中这个.vertical-text将使文本处于垂直位置。一切都很好，但当我在我的iPhone Safari上尝试时，它不起作用。我不知道是Safari浏览器问题还是更多的iOS问题？

这是vertical-text类：

.vertical-text {
    transform: rotate(180deg);
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: tb-lr;
    -moz-writing-mode: tb-lr;
    writing-mode: tb-lr;

    -ms-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;

    -ms-writing-mode: sideways-lr;
    -webkit-writing-mode: sideways-lr;
    -moz-writing-mode: sideways-lr;
    writing-mode: sideways-lr;
}

这是我的示例HTML：

<td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
    <label class="vertical-text text-center font-weight-bold">STEP {{ $step['id']}}</label>
</td>

以下是PC（Google Chrome）的示例输出：

- Star

---

请上升，拜托了。 - Star

Answer 1

为了满足不同的渲染引擎，您需要在writing-mode和transform上应用额外的CSS。

我使用缩放而不是旋转，但得到了相同的结果。

.vertical-text {
    writing-mode: vertical-rl;
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
    text-orientation: mixed;
}

我用Safari 16.1测试了它，并得到了一个可行的解决方案。

小提示：

在工作期间，我意识到在Safari中，如果您将CSS放在<td class="vertical-text">元素的类上，它不会起作用。您需要在<td>内放置一个带有该类的子元素，就像问题中一样。其他浏览器将在没有错误的情况下在<td>上显示垂直文本。

- Szabolcs Szajcsán

Answer 2

如果您仍需要答案，我刚刚发现如果在表格单元格的内部内容上使用transform，则Safari iOS中单元格尺寸不会正确计算。一旦我删除了transform，writing-mode就可以正常工作了。结果是您的步骤标签将面向外部而不是向内部，但至少表格不会崩溃。

- karenalenore