Poor level of support for vertical form controls

[xfq]

This issue is applicable to languages that can be vertically set, especially Mongolian, since it has no horizontal setting. (Linked from: Chinese • Japanese • Mongolian)

In vertically set text, form controls should also be oriented vertically, in order to fit into the flow of the content. The following examples show what you'd expect to see for various types of form in vertically set Chinese.

For more examples see the following. Note, especially, that the sideways direction differs for Mongolian.

Japanese • Chinese • Mongolian

The same vertical orientation needs to be applied to the display of buttons, progress bars, etc.

The GAP

Unfortunately, this is not supported by all browsers, creating difficulties for use of forms in vertical text (especially traditional Mongolian, where reverting to horizontal is not an option).

css-writing-modes Creates an expectation that forms should be rendered vertically, but doesn't specify details for rendering.

Priority

Handling of vertical text in forms is a major gap.

Tests & results

CJK tests:

Interactive test, When vertically-set CJK text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set CJK text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set CJK text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

Blink, Gecko, and WebKit mostly passes all the above tests except for two small problems:

1. although the initial select control is vertical, the alternative options box is horizontal, and opens to the right.
2. the label associated with a textarea control appears above the top left corner of the box, rather than top right.

i18n test suite, Forms: vertical-rl and Forms: vertical-lr

Same results as for the previous tests.

Mongolian tests:

Interactive test, When vertically-set Mongolian text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set Mongolian text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set Mongolian text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

The results of these tests are the same as for the CJK tests, except that the label appears to the correct side of a textarea control (because of the change in text direction).

Button tests:

Interactive test, When vertically-set CJK text contains an HTML button element, the control will also be vertical.

Interactive test, When vertically-set Mongolian text contains an HTML button element, the control will also be vertical.

Blink, Gecko, and WebKit pass the test.

Action taken

Blink • Webkit

Outcomes

Gecko, Blink and WebKit now all support vertical form controls. However, most tests show problems with alignment of the form controls.

Select element controls look suited to the vertical text flow in their default presentation, but when selecting an option the options are displayed horizontally. This is, of course, particularly problematic for Mongolian.

[xfq]

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the document. Proposals for changes or discussion of the content can be made in comments below this point.

Relevant gap analysis documents include:
Chinese • Japanese • [Korean] • Mongolian

[xfq]

• Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=681917
• WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=70211

[r12a]

Updated the description to fit the new template, so that we can progress it through the pipeline. Added some examples.

[xfq]

Updated the link to the WebKit bug.

[r12a]

Updated the template. Added information about Blink now supporting vertical buttons.

[r12a]

Improved the tests & results section, including pointing to real interactive tests.

[xfq]

Chrome will support vertical writing mode for form control elements: https://developer.chrome.com/blog/vertical-form-controls

[xfq]

Starting in Safari 17.4, vertical form controls are supported: https://webkit.org/blog/15063/webkit-features-in-safari-17-4/

[r12a]

Starting in Safari 17.4, vertical form controls are supported: https://webkit.org/blog/15063/webkit-features-in-safari-17-4/

Adjustments made to the Outcomes section and to test results.