w3c / w3c/csswg-drafts

[css-writing-modes] writing-mode on form control elements

Open
#8,633 6 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-writing-modes-3 css-writing-modes-4 i18n-tracker
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Description

The spec says that user agents "should" instead of "must" respect writing mode in replaced elements. I suppose this makes sense for native form control picker popups that don't support being rotated for writing mode on some native platforms.

However, there are parts of the controls that the user agent can control because they are actually rendered inside the page and don't use native platform code to render, such as the button to open a picker for various input types, the <button> element, the <textarea> element, etc.

There are also several WPTs which have been included in interop2023 to test this behavior (for the part rendered inside the page), but they all have optional in their name (which seems like a contradiction to me), and I'm guessing it's because the spec says "should" instead of "must": https://wpt.fyi/results/css/css-writing-modes/forms?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-forms%20or%20label%3Ainterop-2023-forms
cc @nt1m who has worked on these tests

I don't know about the other browsers, but in chromium we even have a user agent stylesheet rule to disable writing-mode for certain form control elements and I don't know why we have it: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=410-413;drc=5fa2480334f68dbe19ee6591cba86dde6bb25603

In discussions for the new <selectmenu> element, this was also raised as an issue with interest in changing the "should" to a "must": https://github.com/openui/open-ui/issues/600#issuecomment-1231181295

Should the spec say "must" instead of "should"?
Should user-agent stylesheets disable writing-mode on form control elements like chromium is doing or not?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CSS Writing Modes specification passage linked in the issue, then inspect the related WPTs under css/css-writing-modes/forms and their optional naming. Review Chromium's html.css rule and the linked Open UI selectmenu discussion; done requires a resolved specification position and corresponding agreement on user-agent stylesheet behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.