如何使用CSS横向显示英文和中日韩文字？

Question

这是14年前如何用CSS跨浏览器绘制竖排文字？访问过的主题，似乎没有明确的解决方案。

理想情况下，我希望 CJK 和拉丁字符都是垂直的，底部朝右侧。

writing-mode: sideways-rl

产生以下输出，与我想要的完全匹配。唯一的问题是：它是 Firefox 独有的，截至 2023 年没有其他浏览器支持它 (https://caniuse.com/?search=sideways)

许多人提出了使用

vertical-rl

然后使用

scale(-1)

或

rotate(180deg)

翻转文本的解决方法。这对于拉丁字符完全有效，但 CJK 文本将会颠倒。

writing-mode: vertical-rl
transform: rotate(180deg)

我还尝试将水平书写的整个容器旋转-90°，这会导致许多对齐和文本渲染问题，因为HTML对齐是在

transform

之前计算的，而像

margin: -100px; padding: 100px

这样的解决方法不是很优雅，通常会导致更多诸如指针碰撞盒未对准之类的问题。

Answer 1

您可以将 text-orientation: sideways 与垂直书写模式和

transform: rotate

:

结合使用

1. writing-mode: vertical-rl

   将书写模式设置为垂直，因为文本方向仅适用于垂直书写模式。 （汉字无法正常旋转

   vertical-rl

   ）

2. text-orientation: sideways

   将 all 文本设置为水平显示，但顺时针旋转 90 度。
3. 使用

   transform: rotate(180deg)

   将文本翻转为向右而不是向左。

.verticalbox {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg)
}

<div class="verticalbox">
  Oct 28 星期六
</div>