Safari 17.4 adds vertical writing mode support for form control elements across macOS, iOS, iPadOS, and visionOS.
Setting written text vertically is commonly observed in East Asian languages. For example, Chinese, Japanese, and Korean (CJK) may be written vertically and read top-to-bottom, flowing in lines from right to left. Similarly, Traditional Mongolian is a vertical script that flows in lines from left to right.
Support for
vertical text
has been available in browsers for several years using the CSS
writing-mode
property. However, until recently, support for the
vertical-lr
and
vertical-rl
values for form controls was inconsistent among all browsers. Consequently, as part of
Interop 2023
, the industry committed to working towards vertical writing mode support in form controls. We are excited to see
cross-browser support
improve considerably. And we are proud that
Safari 17.4
brings support for vertical writing modes to form controls everywhere you find Safari.
Using vertical writing modes with form controls
Adopting vertical form controls is as simple as adding a CSS declaration using the
writing-mode
property and applying it to your controls. For a right-to-left block flow direction, as observed in CJK languages, use
writing-mode: vertical-rl
. Or, for a left-to-right block flow direction, use
writing-mode: vertical-lr
.
button
,
textarea
,
progress
,
meter
,
input
,
select
{
writing-mode
:
vertical-rl
;
}
Support for vertical writing mode is available for the following elements:
<button>
,
<textarea>
,
<progress>
,
<meter>
,
<input>
, and
<select>
. WebKit is committed to supporting vertical writing modes on any new controls moving forward, including
<input type="checkbox" switch>
, which was also added in
Safari 17.4.
Note that in all browsers, any popup UIs associated with form controls, such as the menu for a
<select>
element, or the color picker for an
<input type="color">
are still displayed horizontally.
Implementation
Adding vertical writing mode support for form control elements in WebKit was a large undertaking that involved over 10 unique types of controls. Below are some of the changes that were needed to support this feature in WebKit.
Style
WebKit’s user-agent stylesheet made frequent use of physical properties, such as
width
,
height
, and
margin
. In order to support vertical writing modes, this usage was updated to use logical properties, such as
inline-size
and
block-size
, where appropriate.
Layout
Form controls in WebKit make heavy use of custom layout code. While the interfaces were designed to support logical properties, the implementations often assumed a horizontal writing mode. We updated the methods to compute logical widths to ensure they considered the writing mode.
Additionally, custom baseline adjustment logic, which makes controls such as checkboxes and radio buttons look great alongside text, was updated to use the central baseline for vertical writing modes. This ensures that controls continue to look great alongside text in a vertical writing mode.
Rendering
Rendering form controls with a vertical writing mode required unique changes depending on the control and system capabilities.
On macOS, WebKit’s form controls match the look and feel of the operating system. However, macOS itself does not support vertical writing modes. Consequently, some controls, such as
<progress>
, are simply rotated after obtaining the system image in order to support vertical rendering.
Other controls cannot simply be rotated due to details such as shadows, for example
<select>
, so we used a custom fallback rendering approach.
If a control was already custom painted in WebKit, it was updated to use logical coordinates rather than physical coordinates. We used this approach throughout the iOS rendering code and it was also necessary in our rewrite of the listbox (
<select multiple>
) on macOS.
Finally, some controls, such as checkbox and radio buttons, did not require any rendering changes. As “glyph-like” controls, they look the same in all writing modes.
WebKit remains committed to improving internationalization support in our engine. By adding vertical writing mode support for form control elements in Safari 17.4, we hope to empower authors to create the best content for their local and global communities.
A special thanks goes to Tim Nguyen, who kicked off the vertical form controls project in WebKit, and Alan Baradlay, whose deep knowledge of CSS layout proved invaluable in driving the project to the finish line.
Feedback
We love hearing from you. Send a tweet to
@webkit
to share your thoughts on this feature. Find us on Mastodon at
@jensimmons@front-end.social
and
@jondavis@mastodon.social
. You can also
follow WebKit on LinkedIn
. If you run into any issues, we welcome your
WebKit bug reports
on WebKit features like this. Reporting issues makes an enormous difference.
You can also download the latest
Safari Technology Preview
to try out new web platform features like this before they appear in a Safari beta.