Re: [css3-ui] image cursors and high-dpi displays

Rick Byers-2 wrote:
> 
> There are lots of different discussions of how images should be handled on
> high-DPI displays, but as far as I can find there hasn't been any
> discussion about what to do with image cursors (
> http://www.w3.org/TR/css3-ui/#cursor).
> 
> For compatibility, both Safari and Chrome will scale up any cursor image,
> so for example on the retina macbook (2 dppx) every cursor image is pixel
> doubled.  This is necessary to prevent tiny mouse cursors, but looks ugly.
>  Sites need some way to opt-into supplying high-DPI cursor images, and as
> far as I can tell no such way exists today or has been discussed publicly
> (please point me at anything I've missed).
> 
> Here are some options (not all of which necessarily require a change to
> the
> spec, but included here for discussion anyway).  For chromium, we're
> considering implementing at least #1 and possibly #2 (see
> http://crbug.com/136034), since they seem legitimate without any additions
> to the CSS3 standard.
> 
>    1. *Extend image-set support to image cursors*
>    For browsers that already support the image-set function (
>    http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html) it
>    makes sense to also support it in cursor declarations.  eg.:
>      cursor: image-set( url('hand.cur') 1x, url('hand2x.cur') 2x),
>                              url(hand.cur),
>                              pointer);
>    In this case, if the user-agent supports image-set, it would choose the
>    image whose scale factor most closely matches the device scale factor,
> and
>    (if none match exactly) scale the image so that it's combined scale
> factor
>    matches that of the device.
> 
>    2. *Support multi-resolution ico and cur files*
>    The ico and cur file formats already in common use for cursors support
>    multiple images of different resolutions in the same file.  In the case
> of
>    ico files, this is already used to support high-dpi favicons.  Unlike
> for
>    favicons though, a user agent doesn't necessarily have any preferred
>    physical size for a mouse cursor - websites are free to choose cursors
> that
>    they want to appear smaller or larger than normal to the user.  One
>    approach here could be to use the smallest image in an ico/cur file (or
>    perhaps the last one for maximum compatibility) as an indication of the
>    logical size requested by the website.  Then the user-agent can select
> any
>    other image from the file whose physical size most closely matches the
>    device scale factor, and scale it appropriately to fill the logical
> size.
> 
>    3. *Extend the cursor declaration to take a <resolution>*
>    The fundamental problem here is that the site doesn't communicate
>    anything about the intended resolution of the cursor image (i.e. so the
> UA
>    can tell when it's designed to be used on a high-dpi display without
>    scaling).  image-resolution (
>    http://dev.w3.org/csswg/css4-images/#the-image-resolution) is almost
>    exactly what we want, except as far as I can tell there's no way to
> apply
>    it to an image cursor (except perhaps using the element syntax which
> seems
>    too complex for the common case).  Perhaps we can just add an optional
>    <resolution> to the cursor declaration (perhaps requiring the hotspot
>    co-ordinates to be specified).  Or perhaps there should be a different
>    property to specify the resolution for a cursor, eg. cursor-resolution. 
> eg.
>      cursor: url(hand2x.png) 5 5 2dppx
> 
> *Questions*
> 
>    - Should any of this be in terms of CSS pixels, or strictly in an
>    abstract concept of logical pixels?
>    Eg. should operations such as browser zoom that impact the size of the
>    CSS px impact how mouse cursors are drawn?  I think I'd prefer mouse
> cursor
>    size to be fixed across browser zoom, and so we should not be using the
> CSS
>    px unit in this discussion.
>    - How should hotspot values be applied when multiple images are
>    provided?
>    For both #1 and #2 the UA may need to map a single hotspot co-ordinate
>    onto images of different sizes.  The only reasonable solutions seems to
> be
>    to treat the hotspot co-ordinates as being in the logical pixel
> co-ordinate
>    space and scale them appropriately with the image scale factor.  Of
> course
>    a cur file can always be used to specify a distinct hotspot per image
> in
>    the image co-ordinate system.
> 
> Thanks,
>    Rick
> 
> 

Hello Rick,
I just found this article because I was searching for a possibility this
issue.
As of now -webkit-image-set() is supported by Safari 6 and Chrome 20+ and it
really works very smooth just as one could wish. Are there any news about
the support for HiRes custom cursor images?

Greetings Christoph
-- 
View this message in context: http://old.nabble.com/-css3-ui--image-cursors-and-high-dpi-displays-tp34118675p34439356.html
Sent from the w3.org - www-style mailing list archive at Nabble.com.

Received on Monday, 17 September 2012 10:16:33 UTC