https://webkit.org/blog/15190/implementing-vertical-form-controls/

[pixel] 
 
WebKit
[ ]

  * Downloads
  * [ ]Feature Status
      + CSS Features
      + Standards Positions
  * [ ]Documentation
      + Web Inspector
      + Tracking Prevention
  * [ ]Policies
      + Project Goals
      + Bug Prioritization
      + Bug Report Guidelines
      + Code Style Guidelines
      + Commit and Review Policy
      + Feature Policy
      + Security Policy
      + Tracking Prevention Policy
  * [ ]Contribute
      + Getting Started
      + Contributing Code
      + Testing Contributions
      + How to Report Bugs
      + GitHub Repository
  * [ ]Blog
      + News Posts
      + CSS Posts
      + Contributing Posts
      + Privacy Posts
      + Performance Posts
      + JavaScript Posts
      + Standards Posts
      + Web Inspector Posts
      + Safari Technology Preview Posts
  * [                    ]

Implementing Vertical Form Controls

Mar 18, 2024

by Aditya Keerthi

Safari 17.4 adds vertical writing mode support for form control
elements across macOS, iOS, iPadOS, and visionOS.

all the form controls, typeset vertically

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.

two progress bars, laid out horizontally and vertically

Other controls cannot simply be rotated due to details such as
shadows, for example <select>, so we used a custom fallback rendering
approach.

the select menu typeset vertically

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.

the select multiple form control, typeset vertically

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.

checkboxes and radio buttons on iOS typeset vertically

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.

 
NextIntroducing Natural Input for WebXR in Apple Vision ProLearn more
 
PreviouslySpeedometer 3.0:
The Best Way Yet to Measure Browser PerformanceLearn more

  * @webkit@front-end.social
  * Site Map
  * Privacy Policy
  * Licensing WebKit
  * WebKit and the WebKit logo are trademarks of Apple Inc.