<progress> & <meter> & <input type="range"> progress backwards in vertical writing modes
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
People
(Reporter: ntim, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
|
18.09 KB,
image/png
|
Details |
Screenshot
data:text/html,<body style="writing-mode: vertical-lr"><button>hello</button><progress value="20" max="100"></progress><meter value="20" max="100"></meter><input value="hello"></body>
On the screenshot, you can see that the progression for <progress> and <meter> are in the opposite flow of the rest of the page.
|
Reporter | |
Updated•2 years ago
|
|
||
Comment 1•2 years ago
|
||
Yeah this goes back to -moz-orient: vertical work. We probably want to treat -moz-orient: vertical and -moz-orient: inline differently here.
|
|
Reporter | |
Updated•2 years ago
|
I am working on implementing "writing-mode: vertical-lr/rl" for Blink.
I notice that for data:text/html,<body style="writing-mode: vertical-lr"><input type="range" value="10"></body>, the value is shown top-down on Firefox. That behavior is what this bug is recommending, but it mismatches with how CSS orient: vertical (and appearance: slider-vertical) is implemented.
As we are looking to deprecate the non-standard CSS appearance value slider-vertical, it would be good to offer a standardize alternative solution across browser. What would be a good styling to get that?
I believe we should update the docs to to recommend developers to use writing-mode: vertical-lr with direction: rtl if they want to render a vertical range with bottom to top value. This would allow us to deprecate the appearance: slider-vertical value.
Description
•