实现垂直表单控件

Safari 17.4 在 macOS、iOS、iPadOS 和 visionOS 上增加了对表单控件元素的垂直书写模式支持。

将文本垂直书写在东亚语言中很常见。例如，中文、日文和韩文（CJK）可以垂直书写，从上到下阅读，行从右到左流动。类似地，传统蒙古文是一种垂直文字，行从左到右流动。

多年来，浏览器已经通过 CSS writing-mode 属性支持垂直文本。然而，直到最近，表单控件的 vertical-lr 和 vertical-rl 值的支持在所有浏览器中仍然不一致。因此，作为 Interop 2023 的一部分，业界致力于在表单控件中实现垂直书写模式支持。我们很高兴看到跨浏览器支持显著改善。我们也很自豪 Safari 17.4 为您在使用 Safari 的所有地方带来了对表单控件垂直书写模式的支持。

将垂直书写模式与表单控件结合使用

采用垂直表单控件就像添加一个使用 writing-mode 属性的 CSS 声明并将其应用于您的控件一样简单。对于 CJK 语言中观察到的从右到左的块流方向，请使用 writing-mode: vertical-rl。或者，对于从左到右的块流方向，请使用 writing-mode: vertical-lr。

button, textarea, progress, meter, input, select {
    writing-mode: vertical-rl;
}

垂直书写模式支持适用于以下元素：<button>、<textarea>、<progress>、<meter>、<input> 和 <select>。WebKit 致力于在未来对任何新控件支持垂直书写模式，包括在 Safari 17.4 中新增的 <input type="checkbox" switch>。

请注意，在所有浏览器中，与表单控件关联的任何弹出式 UI，例如 <select> 元素的菜单，或 <input type="color"> 的颜色选择器，仍然是水平显示的。

实现

在 WebKit 中为表单控件元素添加垂直书写模式支持是一项浩大的工程，涉及 10 多种独特类型的控件。下面是为支持 WebKit 中的此功能所需的一些更改。

样式

WebKit 的用户代理样式表频繁使用物理属性，例如 width、height 和 margin。为了支持垂直书写模式，此用法已更新为在适当的地方使用逻辑属性，例如 inline-size 和 block-size。

布局

WebKit 中的表单控件大量使用自定义布局代码。虽然接口被设计为支持逻辑属性，但实现通常假定为水平书写模式。我们更新了计算逻辑宽度的方法，以确保它们考虑书写模式。

此外，自定义基线调整逻辑（使复选框和单选按钮等控件在文本旁边看起来很好）已更新为在垂直书写模式下使用中心基线。这确保了控件在垂直书写模式下继续在文本旁边看起来很好。

渲染

以垂直书写模式渲染表单控件需要根据控件和系统功能进行独特的更改。

在 macOS 上，WebKit 的表单控件与操作系统的外观和感觉相匹配。然而，macOS 本身不支持垂直书写模式。因此，为了支持垂直渲染，一些控件，例如 <progress>，在获取系统图像后简单地旋转。

其他控件由于阴影等细节，例如 <select>，不能简单地旋转，所以我们使用了自定义的后备渲染方法。

如果控件已在 WebKit 中进行自定义绘制，则将其更新为使用逻辑坐标而不是物理坐标。我们在整个 iOS 渲染代码中都使用了这种方法，并且在 macOS 上重写列表框（<select multiple>）时也需要这种方法。

最后，一些控件，例如复选框和单选按钮，不需要任何渲染更改。作为“字形”控件，它们在所有书写模式下看起来都一样。

WebKit 仍然致力于改进我们引擎的国际化支持。通过在 Safari 17.4 中为表单控件元素添加垂直书写模式支持，我们希望赋能作者为他们的本地和全球社区创建最佳内容。

特别感谢 Tim Nguyen，他在 WebKit 中启动了垂直表单控件项目，以及 Alan Baradlay，他对 CSS 布局的深入了解在推动项目完成方面发挥了宝贵作用。

反馈

我们喜欢听到您的声音。发送推文给 @webkit，分享您对这个功能的看法。在 Mastodon 上通过 @jensimmons@front-end.social 和 @jondavis@mastodon.social 找到我们。您还可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，我们欢迎您报告有关 WebKit 功能的WebKit 错误。报告问题会产生巨大的影响。

您还可以下载最新的 Safari 技术预览版，在它们出现在 Safari 测试版之前试用此类新的网络平台功能。