Poor level of support for vertical form controls

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

Gecko • Blink • Blink 2 • Webkit • Webkit 2

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.

Start with the CSS Writing Modes example and the linked interactive tests 12–19 in w3c/text_direction_tests, covering vertical CJK and Mongolian form controls. Compare textarea, input, select, button, and option-menu behavior across vertical-rl and vertical-lr; done means controls, labels, alignment, and opened options follow the expected vertical flow.