【Hacker News搬运】Implementing Vertical Form Controls
-
Title: Implementing Vertical Form Controls
实施垂直窗体控件
Text:
Url: https://webkit.org/blog/15190/implementing-vertical-form-controls/
Safari 17.4在macOS、iOS、iPadOS和visionOS上为表单控件添加了垂直书写模式支持。设置文本垂直书写在东方语言中很常见,例如中文、日语和韩语(CJK)可以垂直书写并从上到下阅读,行从右到左流动。同样,传统蒙古文是一种从左到右流动的垂直脚本。 浏览器对垂直文本的支持已经存在几年了,通过使用CSS的writing-mode属性。然而,直到最近,对form控件的vertical-lr和vertical-rl值的支持在所有浏览器中是不一致的。因此,作为Interop 2023的一部分,行业承诺致力于改善对form控件垂直书写模式的支持。我们很高兴看到跨浏览器支持得到了显著改善。并且我们很自豪,Safari 17.4将垂直书写模式支持带到你在Safari中找到的所有地方。 使用垂直书写模式与form控件 采用垂直form控件只需添加使用writing-mode属性的CSS声明并应用到你的控件即可。对于CJK语言中观察到的从右到左的块流方向,使用writing-mode: vertical-rl。或者,对于从左到右的块流方向,使用writing-mode: vertical-lr。 支持垂直书写模式的元素如下:<button>、<textarea>、<progress>、<meter>、<input>和<select>。WebKit致力于在未来的任何新控件中支持垂直书写模式,包括在Safari 17.4中新增的<input type="checkbox" switch>。 请注意,在所有浏览器中,与form控件关联的任何弹出UI(如<select>元素的菜单或<input type="color">的颜色选择器)仍然是水平显示的。 实现 为WebKit中的form控件元素添加垂直书写模式支持是一项艰巨的任务,涉及超过10种独特的控件。下面是一些支持此功能所需的更改。 样式 WebKit的用户代理样式表频繁使用物理属性,如宽度、高度和边距。为了支持垂直书写模式,这种使用被更新为在适当的情况下使用逻辑属性,如inline-size和block-size。 布局 WebKit中的表单控件大量使用自定义布局代码。虽然接口设计为支持逻辑属性,但实现往往假设水平书写模式。我们更新了计算逻辑宽度的方法,确保它们考虑了书写模式。 此外,自定义基线调整逻辑(使复选框和单选按钮等控件与文本外观协调)在垂直书写模式下更新为使用中央基线。这确保了控件在垂直书写模式下继续与文本外观协调。 渲染 渲染具有垂直书写模式的表单控件需要根据控件和系统功能进行独特更改。 在macOS上,WebKit的表单控件与操作系统的外观和感觉相匹配。然而,macOS本身不支持垂直书写模式。因此,一些控件(如<progress>)简单地旋转以支持垂直渲染。 其他控件不能简单地旋转,例如<select>,因为阴影等细节,所以我们使用自定义回退渲染方法。 如果控件已经在WebKit中进行了自定义绘制,我们将其更新为使用逻辑坐标而不是物理坐标。我们在iOS渲染代码中使用了这种方法,并在macOS上的列表框(<select multiple>)重写中也是必要的。 最后,一些控件,如复选框和单选按钮,不需要任何渲染更改。"glyph-like"控件在所有书写模式下看起来都一样。 WebKit仍然致力于改进我们引擎中的国际化支持。通过在Safari 17.4中为表单控件元素添加垂直书写模式支持,我们希望赋权作者为他们的本地和全球社区创建最佳内容。 特别感谢Tim Nguyen,他启动了WebKit中的垂直表单控件项目,以及Alan Baradlay,他深厚的CSS布局知识在推动项目完成过程中发挥了宝贵的价值。 反馈 我们喜欢听到您的意见。通过@webkit发推文分享您对这个功能的看法。在@jensimmons@front-end.social和@jondavis@mastodon.social上找到我们。您还可以关注WebKit在领英上的账号。如果您遇到任何问题,我们欢迎您就类似这样的WebKit功能提交bug报告。报告问题非常重要。 您还可以下载最新的Safari技术预览版,尝试在它们出现在Safari测试版之前的新网络平台功能。
Post by: ksec
Comments:
JoelEinbinder: Interesting to me that WebKit gets vertical form controls before MacOS. I don't have any experience with vertically written languages. How important are these controls to computer usage in Japan? Does Windows have them?
JoelEinbinder: 我很感兴趣的是,WebKit在MacOS之前就获得了垂直窗体控件。我不;我对竖排书写的语言没有任何经验。这些控制措施对日本的计算机使用有多重要?Windows有吗?
SuperNinKenDo: Nice to see meaningful updates like these. Curious to try these out on a polyglot page.
SuperNinKenDo: 很高兴看到这样有意义的更新。很好奇能在精通多种语言的页面上试用这些。
Linda231: [dead]
Linda231: 死去的