Re: [css3-ui][html5] Form control orientation and styling

On Tue, Apr 12, 2011 at 4:00 PM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> The current HTML5 specification suggest using the specified width and height of
> specific form controls to define the orientation of the control for the end user.
> For instance, for the range control (typically represented as a slider), we have [1]:
>
> # Note how the UA determined the orientation of the control from the ratio
> # of the style-sheet-specified height and width properties.
>
> Later, it says more normatively [2]:
>
> # When the control is wider than it is tall (or square), the control is expected
> to be a horizontal slider, with the lowest value on the right if the 'direction'
> # property on this element has a computed value of 'rtl', # and on the left
> # otherwise. When the control is taller than it is wide, it is expected to be a
> # vertical slider, with the lowest value on the bottom.
>
> Opera currently supports this behavior.
>
> A first issue is that one cannot have a square or flat slider that slides
> vertically. This is not an obvious issue with the basic design showed in
> the spec but could be a problem when CSS allows the author to style the
> control e.g. by using a custom background. For instance, imagine the
> vertical equivalent to this design, possibly with marks on both sides of
> the track:
> http://www.filebuzz.com/software_screenshot/full/volcon_options_general.png

We (Chrome) also noted this issue and think it's a problem.  Not sure
what the right solution would be, unfortunately.  You want the
orientation to be separate from the width/height.  You don't want to
specify the orientation in the markup (as an attribute in HTML), as a
reactive design might change the slider orientation when the layout
changes, to better fill the new area.

The only think I can think of that would work properly is a
slider-specific CSS property that specifies the orientation.  (It's
possible this may be usable for other things in the future, but for
now it would be specific to one single HTML element.)

~TJ

Received on Wednesday, 13 April 2011 01:15:09 UTC