Rendering vertically · Issue #4177 · whatwg/html (original) (raw)
The Rendering section suggests that:
When the control is taller than it is wide, it is expected to be a vertical slider
This is bad for a few reasons:
- it forces the style sheet author to specify an explicit definite
width/heightof the control. This is bad since the intrinsic size of this element varies between platforms and is affected by the user's native theme, so it cannot be known in advance by the style sheet author. Specifying definite sizes are bad in general since they don't work well if the user has set a non-default preferred font-size in their Preferences. - there is a use case for having a vertical control that is in fact wider than it's tall due to having very long
<option label>text. This use case can't be supported if the control magically switches to horizontal layout when that happens.
There needs to be a way for authors to request a vertical/horizontal control and still have it intrinsically sized. Authors currently do that in incompatible ways for each UA. This note summarizes the problems with current solutions:
https://css-tricks.com/sliding-nightmare-understanding-range-input/#orientation
Using CSS transform or writing-mode for this is bad since a vertical control may not have the same appearance as a rotated horizontal control. It also rotates the label text which is undesirable. The Blink/WebKit solution to have different -webkit-appearance value (slider-vertical) is also bad since it prevents the author from applying custom styling to a vertical control (you generally want -webkit-appearance:none for that). The Gecko solution of using a orient attribute is not good since this is something that should be controlled by CSS.
I think we need to standardize something that works in all UAs without those problems.
I propose that <input type=range> should have -webkit-appearance:range in the UA sheet for both horizontal and vertical controls and that we introduce a new CSS property to control the orientation,
e.g. orientation: horizontal | vertical | inline-axis | block-axis.