现代浏览器最可靠方案是text-orientation与writing-mode组合：vertical-rl设定竖排流向，mixed使拉丁字母自动旋转而汉字直立，兼顾可访问性与排版准确性，Safari 15.4+/Chrome 87+/Firefox 91+稳定支持。
text-orientation + writing-mode 组合是现代浏览器最可靠方案
直接用 transform: rotate(90deg) 看似简单，但会破坏文本可选性、影响屏幕阅读器、导致 line-height 和 padding 计算错乱。真正适配仪表盘场景（如侧边标签、窄列刻度）的竖排，应优先走 CSS 逻辑方向原生支持。
关键点在于两个属性协同：
-
writing-mode: vertical-rl把块级流向设为从上到下、从右到左（中文/日文默认习惯） -
text-orientation: mixed让拉丁字母自动旋转 90°，汉字保持 upright，避免全字倒置
示例：
.vertical-label {
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
font-size: 12px;
}
注意：text-orientation: sideways 会让所有字符统一横躺（类似 rotate），而 mixed 才符合中文仪表盘阅读直觉。Safari 15.4+、Chrome 87+、Firefox 91+ 均已稳定支持。
立即学习“前端免费学习笔记（深入）”；
IE 或旧版 Safari 需降级 fallback
IE 完全不支持 text-orientation，Safari ≤15.3 对 mixed 渲染异常（字母不转、汉字歪斜）。此时必须提供兜底：
- 先用
@supports not (text-orientation: mixed)检测不支持环境 - 降级为
transform: rotate(90deg)+ 显式设置width和height互换 - 加
transform-origin: center避免偏移
不要用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) —— IE6 时代遗物，现代 Edge 已废弃且触发重绘抖动。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Flex 容器里竖排文字对齐容易错位
仪表盘常用 display: flex 排布刻度组，一旦子元素设了 writing-mode: vertical-rl，其 align-items 行为会变：原本的 “居中” 实际变成沿新行内轴对齐，视觉上偏高或偏低。
解决方法只有两个：
- 把竖排文字包进一层
span，flex 容器只对这个span设align-items: center，内部再用margin或padding微调 - 改用
display: grid，定义单列网格，用justify-items: center控制水平位置，不受 writing-mode 影响
别碰 vertical-align —— 它在 flex/grid 中无效，在 table-cell 中又受限于父容器高度计算，仪表盘动态缩放时极易失准。
字体渲染差异会影响竖排紧凑度
同一段竖排文字，在 Chrome 和 Safari 下视觉行距可能差 1–2px，尤其小字号（10–12px）用于温度计刻度时，错位会放大成对不齐感。
根源是字体度量值（ascent/descent）在垂直流中被不同引擎解释。稳定做法：
- 强制
line-height: 1，禁用默认行高继承 - 用
font-feature-settings: "vhal"（vertical half-width alternates）启用字体厂商预设的竖排优化字形（仅限支持该特性的字体，如 Noto Sans CJK、HarmonyOS Sans） - 避免使用系统默认
font-family: sans-serif，显式指定 Web 字体并预加载
最后提醒：竖排不是“只要转过来就行”，它本质是切换文本布局上下文。仪表盘里每处竖排标签，都得当成独立排版模块来验证 baseline、间距、截断和响应式缩放行为。
