无涯教程网

Html 如何使用css横向显示英文和中日韩文字

发布于10月25日

这是14年前How can I draw vertical text with CSS cross-browser?人访问过的一个话题，似乎没有任何明确的解决方案.

理想情况下，我希望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)

我还try 将整个容器的水平书写旋转-90°，这会导致许多对齐和文本渲染问题，因为HTML对齐是在transform之前计算的，而像margin: -100px; padding: 100px这样的解决方案并不是很优雅，并且通常会导致更多的问题，例如指针命中框不对齐.

推荐答案

CJK字符将保持直立而不是旋转，因为它们可以在两个方向上阅读.但是，您可以使用text-orientation: sideways来强制旋转，即supported by most browsers.

(请注意，text-orientation: sideways会将文本顺时针旋转90度，因此您仍需要保留transform: rotate(180deg)来翻转文本.)

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

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

注意:尽管对于您的情况可能无关紧要，但对于具有lr的多行，我们仍然需要将其替换为rl和rotation(180deg)，如this W3C article中所述:

请注意，与WITH WRITING-MODE:VERIAL-LR一起使用该属性值对的结果与使用WRITING-MODE:Sideways-LR时的结果不同，因为文本从块的顶部开始，而字形位于其右侧.还请注意，当换行时，lines progress in the opposite direction是您通常想要的，因为稍后阅读的行显示在前面阅读的行的右侧(视觉上，在上面).

Html相关问答推荐

我需要主页按钮出现在中间

我似乎不能正确地将我的导航栏居中'

在iOS中调整HTML邮箱内容的大小

是否可以部分列出一个HTML有序列表

MatSnackBar： colored颜色不起作用

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

当溢出到滚动条中时， bootstrap 按钮样式会更改

如何将内容元素放在侧边栏旁边？

如何使链接组件内的内容不重新路由Next.js13

静态DIV的标签，显示从窗体输入的值

为什么要添加换行符(至少在 Google Chrome 中)

在屏幕上每行 css 中的特定列居中

为什么 html 元素的 max-width 和 width 一起工作？

即使必填字段为空，HTML 表单也已成功提交

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中？

动态计算高度时 Div 不保持 1/1 纵横比

a with