写了多年中文排版，今天才知道下划线一直在错误的一侧——Safari 18.2 终于把 text-underline-position: right 带进 Safari 了

中文竖排文字的下划线，长期靠 JS 手动算位置。Safari 18.2（2026 年 9 月）终于支持 text-underline-position: right，竖排时下划线终于在右侧而不是左侧——这是 CSS 文本装饰规范里专门为中日韩竖排设计的能力，Safari 比 Chrome 和 Firefox 晚了整整六年。

竖排下划线的历史问题

text-underline-position 有四个关键字：auto、under、left、right。其中 left 和 right 是专为竖排设计的——left 把下划线放到竖排文字的左侧，right 放到右侧。

auto 和 under 在竖排时表现不一致：有的浏览器把下划线放左侧，有的放右侧，有的跟随书写方向，完全没有统一行为。你在中文竖排页面加下划线，在 Chrome 里看和 Safari 里看位置完全不同。

历史上唯一”正确”的解法是完全放弃 CSS 下划线，用 JS + <canvas> 或绝对定位的 <span> 手动画一条线：

// 传统方案：JS 手动算下划线位置
function drawVerticalUnderline(element) {
  const rect = element.getBoundingClientRect();
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'currentColor';
  ctx.fillRect(
    rect.right + 2,   // 手动放右侧
    rect.top,
    2,                // 下划线宽度
    rect.height       // 与文字同高
  );
}

这条 JS 今天可以删掉了。

Safari 18.2 支持了什么

Safari 18.2（iOS 18.2、macOS 15.2，2026 年 9 月正式版）新增对 text-underline-position: left 和 right 的支持。这两个值在 Chrome 71+（2019 年）和 Firefox 74+（2020 年）已经支持，Safari 是三大引擎里最晚实现的。

/* 竖排中文，段落下划线在右侧 */
.article-vertical {
  writing-mode: vertical-rl;
  text-decoration: underline;
  text-underline-position: right;
}

/* 竖排日文，CJK 下划线默认右侧 */
:lang(ja) {
  text-underline-position: right;  /* 日文竖排下划线默认在右 */
}

/* 竖排中文，默认左侧下划线 */
:lang(zh) {
  text-underline-position: left;   /* 中文竖排下划线默认在左 */
}

规范里对 CJK 语言的默认行为有专门说明：日文竖排下划线应该在右侧，中文竖排下划线应该在左侧（不同出版惯例）。Safari 18.2 支持后，不同语言可以用 CSS 规则分别设置，不再需要 JS 统一控制。

具体差异对比

浏览器支持现状

移动端 Safari 的支持意味着全球 iPhone 和 iPad 用户现在可以在中文/日文竖排页面上看到正确位置的下划线，不需要任何 polyfill。

下一步

如果项目里有竖排中文或日文页面：

1. 搜索现有样式表里有没有 writing-mode: vertical-rl 或 vertical-lr 的区块
2. 检查这些区块里有没有加下划线的 text-decoration: underline
3. 有的话补上 text-underline-position: left（中文）或 right（日文）
4. 用浏览器 DevTools 验证下划线位置是否符合出版惯例

如果已经有 JS 画的竖排下划线，可以开始分浏览器逐步替换成 CSS——Safari 18.2 上线后，三大引擎全部支持，可以安全地在生产环境使用。