feat: Editorial review: Add content covering modern approach to vertical form controls #32142

chrisdavidmills · 2024-02-06T16:18:26Z

Description

Chrome has added support for vertical form controls; see https://developer.chrome.com/blog/vertical-form-controls for some more details. Specifically:

Vertical Selects/buttons released in 119
Vertical textareas/text-based inputs in 121
Vertical progress/meter/input type range in 124

Currently the latter is available in a Finch experiment, enabled 50% on Canary only. To make sure it is available on mac on Mac, you can start Canary by passing the feature:
/Applications/"Google Chrome Canary.app"/Contents/MacOS/"Google Chrome Canary" --enable-features=FormControlsVerticalWritingModeDirectionSupport

This is done by setting writing-mode to vertical-lr or vertical-rl. In some cases, the direction property can also be used to configure the form rendering in more complex ways than just obvious text alignment (e.g. rendering range sliders top to bottom or bottom to top).

This PR adds a separate article to explain how this is all done in one place and updates several other articles to link from it in appropriate places.

Motivation

Additional details

Related issues and pull requests

See mdn/browser-compat-data#22179 for the related compat data, which has turned out to be quite complicated.

github-actions · 2024-02-06T16:19:54Z

Preview URLs (11 pages)

Flaws (2)

Note! 9 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/CSS_writing_modes
Title: CSS writing modes
Flaw count: 1

macros:
- /en-US/docs/Web/CSS/glyph-orientation-horizontal does not exist

URL: /en-US/docs/Web/HTML/Element/input/range
Title: <input type="range">
Flaw count: 1

macros:
- /en-US/docs/Web/API/HTMLInputElement/valueAsNumber does not exist

External URLs (3)

URL: /en-US/docs/Web/HTML/Element/input/tel
Title: <input type="tel">

https://www.w3.org/International/questions/qa-bidi-unicode-controls (1 time)

URL: /en-US/docs/Web/HTML/Element/input/email
Title: <input type="email">

(comment last updated: 2024-04-05 09:03:53)

dizhang168

Thanks for putting it all together!

files/en-us/web/html/element/input/range/index.md

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

chrisdavidmills · 2024-02-11T16:59:49Z

Thanks a lot for the super helpful review, @dizhang168! I have answered all your comments. There is one outstanding question, and I'll make the change that's needed for that onceyou've provided an answer.

dizhang168

LGTM, all the behavior explanations I expect are there!

chrisdavidmills · 2024-02-14T14:08:17Z

LGTM, all the behavior explanations I expect are there!

@dizhang168 Lovely, thank you for the super helpful tech review! I'll now turn this over to the other editors for an editorial review.

…fected controls

wbamberg · 2024-02-21T03:22:09Z

Hey Chris, I can take a look at this.

chrisdavidmills · 2024-02-21T09:54:44Z

Hey Chris, I can take a look at this.

Yay, thanks @wbamberg!

wbamberg · 2024-02-23T18:54:46Z

I had some questions about the first two examples, the ones about range, meters, and progress bars.

Chrome

(Canary, 124, started with FormControlsVerticalWritingModeDirectionSupport)

In basic example I expect vertical sliders, drawn "top to bottom" (I assume this means that the blue part is at the top and the grey part is at the bottom).

What I see is:

In Drawing the control from bottom to top, I expect to see them going the other way, but I don't:

Firefox

(Nightly, 125)

In basic example I expect vertical sliders, drawn "top to bottom".

What I see is:

...that is, range has the expected direction, but the others don't.

In Drawing the control from bottom to top, I see:

...that is, direction does have an effect, but only for range.

Note that removing appearance: slider-vertical; doesn't seem to affect things either way.

Safari

(16.6.1)

In basic example I expect only the range to be displayed vertically, per the BCD, drawn "top to bottom".

What I see is:

But if I remove appearance: slider-vertical;, then I see:

...so it looks like writing-mode isn't having any effect in Safari.

chrisdavidmills · 2024-02-26T11:56:00Z

@wbamberg so, for Safari, for writing-mode, I say "Support for range sliders, textual inputs, and textareas only". I think this is correct, but I also think I'm missing that this is available in Safari beta only, not full release version. @dizhang168 are you able to confirm that?

For Firefox, I've got the effect of direction listed as false, which I'm pretty sure it was when I first wrote this. Another thing I need to update.

For Chrome, I've documented it how I was told the state would be in Chrome 124, but it isn't there yet. @dizhang168, have you got any updates on when this behavior is going to be in the final Chrome release version?

Thanks.

dizhang168 · 2024-02-26T18:44:53Z

I am working on the Intent to Ship for it (still planning for 124). To see the behavior for now, you need the latest 123 in Chrome Canary with experimental features enabled or by setting direction as on.

For safari, I saw the feature was added in this release note:
https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes

Co-authored-by: wbamberg <will@bootbonnet.ca>

chrisdavidmills · 2024-03-06T10:13:52Z

OK, so I think we are pretty much done here.

Thanks so much for a great editorial review, @wbamberg. Before I leave this, I'll review all the compat comments and make any changes needed to the BCD.

And thanks for the technical review @dizhang168. I wanted to check in with you to see how the Chrome implementation is going. Looking at the examples in the new tutorial in the latest Canary, it looks like everything is working as it should, expect that the direction property doesn't seem to have any effect on range/meter/progress. When I look at the examples under https://pr32142.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#range_sliders_meters_and_progress_bars, the default seems to be bottom to top rendering (it should be top to bottom, right?), and direction seems to have no effect.

Is that your current understanding, and if so, is this still on track to be implemented in Chrome 124? I'm thinking that maybe I should delay publishing this new content until all the support is in place and published.

dizhang168 · 2024-03-06T18:34:26Z

Hi, that is correct. We are on track to ship it fully in stable in M124 (April 16, 2024 [1]). The Intent to Ship was approved last week. Would definitely appreciate if we can hold off until then, thanks!

[1] https://chromiumdash.appspot.com/schedule

chrisdavidmills · 2024-03-07T11:39:03Z

Hi, that is correct. We are on track to ship it fully in stable in M124 (April 16, 2024 [1]). The Intent to Ship was approved last week. Would definitely appreciate if we can hold off until then, thanks!

[1] https://chromiumdash.appspot.com/schedule

@dizhang168 Thanks for the info. I'm happy to hold off on publishing until the Chrome release. One question — I understand that it won't be in stable before then. But when that version hits beta, will this feature be enabled by default in beta? Or will it be behind a flag until it is in the release version? If the former, then I think we could publish it earlier than that.

chrisdavidmills · 2024-04-02T12:16:00Z

Hi there @dizhang168! Any updates on when this might be enabled in Chrome? I just checked on the latest (125) Nightly, and the behavior still doesn't seem as expected.

dizhang168 · 2024-04-03T18:55:11Z

Hi @chrisdavidmills! The feature is shipping soon, we are currently at 50% on stable and should reach 100% within the next two weeks. I think it is safe to publish these changes.

estelle

Please include labels on all form controls.

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

estelle · 2024-04-03T20:37:46Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+
+In older browsers that do not support the creation of vertical form controls with `writing-mode` and `direction`, there are limited alternatives available. The following only work on `<input type="range">`, causing the text to flow from bottom to top — they have no effect on `<meter>` and `<progress>` elements:
+
+- The non-standard `appearance: slider-vertical` property can be used in older versions of Safari and Chrome.


link appearance property

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

estelle

Only include a link to the guide on pages where people are likely to rotate the form control. Limit to <input type=range>, <progress>, and <meter>.

The range page should include an example of a vertical bar. The progress and meter don't need to.

estelle · 2024-04-03T21:48:14Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+{{CSSRef}}
+
+The guide explains how to use the CSS {{cssxref("writing-mode")}} and {{cssxref("direction")}} properties to create and configure vertical form controls. This includes:
+


It would be great to put a basic example here.

I'm not spending lots more time on this article. It was already reviewed and approved once. There are many examples further down the page.

estelle · 2024-04-03T21:50:49Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+
+## General technique
+
+In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to cause relevant form controls to display vertically with normally horizontal text characters (for example in Latin languages) written on their side at a 90 degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.


Suggested change

In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to cause relevant form controls to display vertically with normally horizontal text characters (for example in Latin languages) written on their side at a 90 degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.

In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to vertically display form controls with text characters that are normally horizontal (for example in Latin languages), with text displayed at a 90-degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.

Do we want to include a note like this or something similar:

Note: While the {{cssxref("writing-mode")}} property is well supported, creating vertically-oriented form controls with the writing-mode only gained full browser support in 2024.

estelle · 2024-04-03T21:52:44Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+
+In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to cause relevant form controls to display vertically with normally horizontal text characters (for example in Latin languages) written on their side at a 90 degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.
+
+This is useful when creating vertical language forms. Specifically:


Would be great to suggest an example here.

Suggested change

This is useful when creating vertical language forms. Specifically:

This is useful when creating vertical language forms, such as _______ . Specifically:

Still not clear on a use case here. Why not just do a form.vertical {rotate: 90deg;}?

The answer: the rotation would put it in it's own layer, with the new location possibly covering content while the original position box / location would appear empty / blank for the space taken up by the non-rotated control.

We likely should mention that somewhere in this guide.

Note added about why not rotation. I don't think we need to add examples of vertical language forms.

estelle · 2024-04-03T21:58:22Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+- `writing-mode: vertical-lr` will create vertical form controls with a left-to-right block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the right of previous lines.
+- `writing-mode: vertical-rl` will create vertical form controls with a right-to-left block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the left of previous lines.
+
+> **Note:** The experimental `sideways-lr` and `sideways-rl` values have much the same effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degress to display on their sides, and horizontal text characters (for example in Latin languages) are unaffected in this regard.


Suggested change

> **Note:** The experimental `sideways-lr` and `sideways-rl` values have much the same effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degress to display on their sides, and horizontal text characters (for example in Latin languages) are unaffected in this regard.

> **Note:** The experimental `sideways-lr` and `sideways-rl` values have a similar effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degrees to display on their sides, while horizontal text characters (for example in Latin languages) are unaffected by these values.

is that what "in this regard" meant?

Suggestion used

estelle · 2024-04-03T22:06:00Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+
+> **Note:** The experimental `sideways-lr` and `sideways-rl` values have much the same effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degress to display on their sides, and horizontal text characters (for example in Latin languages) are unaffected in this regard.
+
+In addition, the {{cssxref("direction")}} property can be used to control the direction of the content inside the controls:


Suggested change

In addition, the {{cssxref("direction")}} property can be used to control the direction of the content inside the controls:

The {{cssxref("direction")}} property can be used to control the direction of content. This property can be used to control the direction of the content inside normally horizontal form controls that have been rotated 90 degrees with the `writing-mode` property:

It property isn't limited to form controls. This makes that abundantly clear before going into the property's impacts on form controls.

But this is contextual; this is what we are already talking about. We don't need to spell it out exhaustively.

estelle · 2024-04-03T23:05:13Z

files/en-us/web/html/element/input/button/index.md

@@ -347,6 +347,7 @@ draw();

 ## See also

+- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)


Very rarely do people have to create vertical form controls out of input elements other than possibly range. Please remove from all the input pages other than range, and remove from select and textarea, but keep on meter and progress. Also, do add to https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling and https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms,

I disagree; it is much more likely if you are creating Chinese or Japanese pages. I'm not spending ages updating all these See also sections again.

Let's just pick a few places to include the guide. How about meter, progress, range and, optionally, the input main page

Note that it is already in the range and input pages, in the content of the page, as well

estelle · 2024-04-03T23:05:59Z

files/en-us/web/html/element/input/index.md

@@ -1431,3 +1431,4 @@ Interactive elements such as form input should provide an area large enough that
 - [Styling HTML forms](/en-US/docs/Learn/Forms/Styling_web_forms)
 - [Advanced styling for HTML forms](/en-US/docs/Learn/Forms/Advanced_form_styling)
 - [CSS property compatibility table](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
+- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)


remove here. keep on line 698

No; I think it is useful to expose here as well.

let's keep this one, but remove it from all the sub-input pages (all the type pages).

estelle · 2024-04-03T23:07:04Z

files/en-us/web/html/element/input/range/index.md

@@ -71,14 +71,6 @@ The `step` attribute can also be set to the `any` string value. This `step` valu

 The default stepping value for `range` inputs is 1, allowing only integers to be entered, _unless_ the stepping base is not an integer; for example, if you set `min` to -10 and `value` to 1.5, then a `step` of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the [HTML `step` attribute](/en-US/docs/Web/HTML/Attributes/step).

-## Non-standard Attributes


do not delete this section

ok, added back.

estelle · 2024-04-03T23:11:51Z

files/en-us/web/html/element/input/range/index.md

-```
-
-{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}
+To create a vertical range wherein the knob slides up and down, you can set the {{cssxref("writing-mode")}} property to a value of `vertical-rl` or `vertical-lr`, as explained in [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls). You can also set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value if you want to support older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox.


Suggested change

To create a vertical range wherein the knob slides up and down, you can set the {{cssxref("writing-mode")}} property to a value of `vertical-rl` or `vertical-lr`, as explained in [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls). You can also set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value if you want to support older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox.

To create a vertical range wherein the thumb slides up and down, set the {{cssxref("writing-mode")}} property with a value of either `vertical-rl` or `vertical-lr`.

To provide a fallback for non-supporting browsers, set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value for older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox. To learn more, see [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls).

Then include examples to show top to bottom and bottom to top with vertical-rl or vertical-lr and the fallback example.

I've made this change and adjusted things around a bit. I'm not adding in another example as we link to the "Creating vertical form controls" page for examples.

estelle · 2024-04-03T23:13:26Z

files/en-us/web/html/element/textarea/index.md

- {{ HTMLElement("output") }}
- {{ HTMLElement("progress") }}
- {{ HTMLElement("meter") }}
+- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)


No, as explained in an earlier comment.

…t into vertical-controls

estelle · 2024-04-04T17:54:47Z

files/en-us/web/css/css_writing_modes/vertical_controls/index.md

+- `writing-mode: vertical-lr` will create vertical form controls with a left-to-right block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the right of previous lines.
+- `writing-mode: vertical-rl` will create vertical form controls with a right-to-left block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the left of previous lines.
+
+You could use a [transform](/en-US/docs/Web/CSS/transform) to rotate the controls by 90 degrees, but that would place the controls in their own layer and cause unintended layout side effects such as other content being overlapped. Using `writing-mode` offers a more reliable solution.


estelle

just added a quick example to range. After that we should be good to go.

files/en-us/web/html/element/input/range/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

files/en-us/web/html/element/input/range/index.md

Add content covering modern approach to vertical form controls

a23217a

chrisdavidmills requested review from a team as code owners February 6, 2024 16:18

chrisdavidmills requested review from dipikabh and removed request for a team February 6, 2024 16:18

github-actions bot added Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs labels Feb 6, 2024

chrisdavidmills changed the title ~~Add content covering modern approach to vertical form controls~~ Technical review: Add content covering modern approach to vertical form controls Feb 6, 2024

github-actions bot added the size/m [PR only] 51-500 LoC changed label Feb 6, 2024

dizhang168 reviewed Feb 9, 2024

View reviewed changes

Making fixes for dizhang review comments

19c13a2

Merge branch 'main' into vertical-controls

966b09e

chrisdavidmills requested a review from dizhang168 February 11, 2024 17:00

chrisdavidmills added 2 commits February 13, 2024 12:32

Add in note about sideways-lr/sideways-rl

9dc25b7

Merge branch 'main' into vertical-controls

81d3c17

dizhang168 reviewed Feb 13, 2024

View reviewed changes

chrisdavidmills changed the title ~~Technical review: Add content covering modern approach to vertical form controls~~ feat: Editorial review: Add content covering modern approach to vertical form controls Feb 14, 2024

chrisdavidmills added 2 commits February 19, 2024 15:47

Merge branch 'main' into vertical-controls

7a584fd

Add vertical form controls page link to the reference pages of all af…

f5f315d

…fected controls

github-actions bot added size/l [PR only] 501-1000 LoC changed and removed size/m [PR only] 51-500 LoC changed labels Feb 19, 2024

wbamberg mentioned this pull request Feb 23, 2024

<input type="range">: slider-vertical to be removed from Chrome #28550

Closed

chrisdavidmills and others added 2 commits March 6, 2024 09:50

Update files/en-us/web/css/css_writing_modes/vertical_controls/index.md

1b7b8ab

Co-authored-by: wbamberg <will@bootbonnet.ca>

Increase frame height to get rid of example vertical scrollbar in Chrome

dd600a9

chrisdavidmills mentioned this pull request Mar 6, 2024

More minor fixes for vertical slider support mdn/browser-compat-data#22560

Merged

dipikabh removed their request for review March 19, 2024 21:30

estelle requested changes Apr 3, 2024

View reviewed changes

Merge branch 'main' into vertical-controls

dc69824

chrisdavidmills requested a review from estelle April 4, 2024 08:28

chrisdavidmills added 2 commits April 4, 2024 09:28

more changes

afde26c

Merge branch 'vertical-controls' of github.com:chrisdavidmills/conten…

33f0732

…t into vertical-controls

estelle reviewed Apr 4, 2024

View reviewed changes

remove unneccessary guide links

4f48e8c

chrisdavidmills requested a review from estelle April 4, 2024 18:49

Merge branch 'main' into vertical-controls

992993c

estelle reviewed Apr 4, 2024

View reviewed changes

files/en-us/web/html/element/input/range/index.md Outdated Show resolved Hide resolved

Update files/en-us/web/html/element/input/range/index.md

fa7612a

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

github-actions bot reviewed Apr 5, 2024

View reviewed changes

files/en-us/web/html/element/input/range/index.md Outdated Show resolved Hide resolved

chrisdavidmills added 3 commits April 5, 2024 09:57

fix broken code example

25f4ec3

clean up wording

dcc0411

Merge branch 'main' into vertical-controls

c94ba48

chrisdavidmills requested a review from estelle April 5, 2024 09:22

estelle approved these changes Apr 5, 2024

View reviewed changes

estelle merged commit 0f4b28b into mdn:main Apr 5, 2024
9 checks passed

oliviertassinari mentioned this pull request Sep 20, 2024

[slider] Vertical slider incorrectly exposed as horizontal in the accessibility tree in Chrome<124 mui/base-ui#635

Closed

jamesnw mentioned this pull request Oct 24, 2024

Add direction to vertical form controls web-platform-dx/web-features#2082

Open


		In older browsers that do not support the creation of vertical form controls with `writing-mode` and `direction`, there are limited alternatives available. The following only work on `<input type="range">`, causing the text to flow from bottom to top — they have no effect on `<meter>` and `<progress>` elements:

		- The non-standard `appearance: slider-vertical` property can be used in older versions of Safari and Chrome.

		{{CSSRef}}

		The guide explains how to use the CSS {{cssxref("writing-mode")}} and {{cssxref("direction")}} properties to create and configure vertical form controls. This includes:


		## General technique

		In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to cause relevant form controls to display vertically with normally horizontal text characters (for example in Latin languages) written on their side at a 90 degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.


		In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to cause relevant form controls to display vertically with normally horizontal text characters (for example in Latin languages) written on their side at a 90 degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard.

		This is useful when creating vertical language forms. Specifically:

	> Note: The experimental `sideways-lr` and `sideways-rl` values have much the same effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degress to display on their sides, and horizontal text characters (for example in Latin languages) are unaffected in this regard.
	> Note: The experimental `sideways-lr` and `sideways-rl` values have a similar effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degrees to display on their sides, while horizontal text characters (for example in Latin languages) are unaffected by these values.


		> Note: The experimental `sideways-lr` and `sideways-rl` values have much the same effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degress to display on their sides, and horizontal text characters (for example in Latin languages) are unaffected in this regard.

		In addition, the {{cssxref("direction")}} property can be used to control the direction of the content inside the controls:

	In addition, the {{cssxref("direction")}} property can be used to control the direction of the content inside the controls:
	The {{cssxref("direction")}} property can be used to control the direction of content. This property can be used to control the direction of the content inside normally horizontal form controls that have been rotated 90 degrees with the `writing-mode` property:

		@@ -347,6 +347,7 @@ draw();

		## See also

		- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)

		@@ -71,14 +71,6 @@ The `step` attribute can also be set to the `any` string value. This `step` valu

		The default stepping value for `range` inputs is 1, allowing only integers to be entered, _unless_ the stepping base is not an integer; for example, if you set `min` to -10 and `value` to 1.5, then a `step` of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the [HTML `step` attribute](/en-US/docs/Web/HTML/Attributes/step).

		## Non-standard Attributes

-To create a vertical range wherein the knob slides up and down, you can set the {{cssxref("writing-mode")}} property to a value of `vertical-rl` or `vertical-lr`, as explained in [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls). You can also set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value if you want to support older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox.
+To create a vertical range wherein the thumb slides up and down, set the {{cssxref("writing-mode")}} property with a value of either `vertical-rl` or `vertical-lr`.
+To provide a fallback for non-supporting browsers, set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value for older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox. To learn more, see [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls).

feat: Editorial review: Add content covering modern approach to vertical form controls #32142

feat: Editorial review: Add content covering modern approach to vertical form controls #32142

Conversation

chrisdavidmills commented Feb 6, 2024 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Feb 6, 2024 • edited Loading

dizhang168 left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Feb 11, 2024

dizhang168 left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Feb 14, 2024

wbamberg commented Feb 21, 2024

chrisdavidmills commented Feb 21, 2024

wbamberg commented Feb 23, 2024

Chrome

Firefox

Safari

chrisdavidmills commented Feb 26, 2024

dizhang168 commented Feb 26, 2024

chrisdavidmills commented Mar 6, 2024 • edited Loading

dizhang168 commented Mar 6, 2024

chrisdavidmills commented Mar 7, 2024

chrisdavidmills commented Apr 2, 2024

dizhang168 commented Apr 3, 2024

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle Apr 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle Apr 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Feb 6, 2024 •

edited

Loading

github-actions bot commented Feb 6, 2024 •

edited

Loading

chrisdavidmills commented Mar 6, 2024 •

edited

Loading

estelle Apr 3, 2024 •

edited

Loading

estelle Apr 4, 2024 •

edited

Loading