The result of the discussion here:
http://www.w3.org/mid/514a17d4.3070...@jwatt.org
is that I've changed Firefox Nightly's handling of <input type=range> to allow
it to render as a vertical slider if it has an orient="vertical" attribute on
it. There was only one reply to my email to www-style, but the author suggested
using an attribute which I'd also concluded was the best thing to do.
I'd like to propose that this attribute be added to the HTML5 specification.
My original email to www-style is reproduced below in case anyone wants to reply
here, directly quoting parts of my original description of the problem.
-Jonathan
I'm working on <input type=range> support in Mozilla, and one of the questions
that has come up is how best to allow content authors to change the orientation
of <input type=range> to be vertical (so the slider runs up/down instead of
left/right).
There is some vague text in the HTML5 spec describing an <input type=range>
example that hints that a UA might change a range's orientation based on the
ratio of its width to height[1], which says:
Note how the UA determined the orientation of the control from the
ratio of the style-sheet-specified height and width properties.
As far as I can tell that's all that any relevant specifications say on the
matter though.
This issue becomes tricky when user agents provide pseudo-elements to allow
content authors to style the component parts of a range. Typically there are two
main component parts: the thumb (the bit that can be dragged left/right or
up/down) and the track (a visual "gutter" or "line" that the thumb is fixed to
move along).
It seems like, A), it would be desirable to be able to apply different styles to
the thumb and track depending on whether the range is horizontal or vertical.
For example, content authors might want to give the thumb a background image
that would make it appear like one of the following two diagrams depending on
its orientation:
| |
| |
__ | |
/ \ _|_|_
----------| |-------- | \
----------| |-------- |_____/
|__| | |
| |
| |
| |
It also seems like, B), it would be desirable to be able to use CSS to specify
the orientation of the range, since, to a certain extent, whether the range is
vertical or not is a matter or presentation.
Unfortunately, B (specifying the orientation using a new CSS property called
'orient', say) seem to conflict with A. Content author's don't have a way to
select on the computed value of one property to specify the values of other
properties, so they can't select on the computed value of an 'orient' property
to specify different styling for horizontal/vertical range.
One way to solve the issue would be to reject B and have an 'orient' _attribute_
instead, since it _is_ possible to select on attributes.
It may seem tempting to say that if content authors are specifying different
styles for vertical and horizontal range, then they can specify those styles in
the same rules that specify the 'orient' property. It doesn't seem like that is
going to provide for authors' needs in some circumstances though. For example,
if a JavaScript library provides API to insert a "vertical range", and it
specifies style="orient:vertical" on the range that it inserts.
Does anyone have any thoughts on the mechanism that should be provided to
content authors to specify that an <input type=range> should be vertical, given
the above?
Jonathan
1.
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-%28type=range%29
