提问人：Hykilpikonna 提问时间：10/24/2023 更新时间：10/25/2023 访问量：56
如何使用 CSS 横向显示英文和中日韩文本？
How can I display English and CJK text sideways using CSS?
问：
这是 14 年前如何用 CSS 跨浏览器绘制竖排文本？ 访问的主题，似乎没有任何明确的解决方案。
理想情况下，我希望 CJK 和拉丁字符都是垂直的，底部朝向右侧。
writing-mode: sideways-rl生成以下与我想要的完全匹配的输出。唯一的问题是：它是 Firefox 独有的，截至 2023 年没有其他浏览器支持它（https://caniuse.com/?search=sideways)
许多人提出了使用然后使用 或 翻转文本的解决方法。这对于拉丁字符完全有效，但 CJK 文本将颠倒。vertical-rlscale(-1)rotate(180deg)
writing-mode: vertical-rl
transform: rotate(180deg)
我还尝试将水平书写的整个容器旋转 -90°，这会导致许多对齐和文本呈现问题，因为 HTML 对齐是之前计算的，并且像这样的解决方法不是很优雅，并且经常导致更多问题，例如指针命中框未对齐。transformmargin: -100px; padding: 100px
答：
2赞
SyndRain
10/25/2023
#1
旨在使 CJK 字符保持直立而不是旋转，因为它们可以在两个方向上阅读。但是，您可以使用 text-orientation： sideways 强制旋转，大多数浏览器都支持此功能。
（请注意，将文本顺时针旋转 90 度，因此您仍然需要保留 才能翻转文本。text-orientation: sidewaystransform: rotate(180deg)
.verticalbox {
writing-mode: vertical-rl;
text-orientation: sideways;
transform: rotate(180deg)
}<div class="verticalbox">
Oct 28 星期六
</div>注意：虽然在您的情况下可能无关紧要，但对于多行 ，我们仍然需要将其替换为 和 ，如这篇 W3C 文章中所述：lrrlrotation(180deg)
请注意，将此属性值对与 writing-mode：vertical-lr 一起使用的结果与使用 writing-mode：sideways-lr 时看到的结果不同，因为文本从块的顶部开始，字形位于其右侧。另请注意，当换行时，行的前进方向与您通常想要的方向相反，因为稍后读取的行出现在较早读取的行的右侧（视觉上，上面）。
评论