"image-resolution: snap" and scaling all lengths in tandem

A designer on an internal project came to me with a problem today
that'll be solved when we support the 'image-resolution' property in
WebKit, but further discussion turned up an interesting suggestion
that I think needs more attention.

His original problem was that he wanted to provide multiple-resolution
images without scaling.  My recommendation was that, once
'image-resolution' was supported, he could use it with the 'snap'
keyword to make the images a properly scaled size so that there's no
sampling/scaling issues, and the pixel details are exactly preserved.

This solved his problem exactly.  However, this means the sizes of the
images aren't quite predictable, which means that the sizing of
related parts of the document won't quite match up anymore.  Text that
was supposed to be the same size as the image now may be slightly
smaller or larger, which is a problem if you're using it as a
background-image on a button, for example, or if it's just placed next
to the image and meant to preserve a certain visual rhythm.

Some discussion led to a suggestion for a general length-scaling
property tied to this.  I'm not sure this is the right solution, but
it has an interesting shape, so I'll provide it here and we can
discuss it or other things that solve the same problem.

resolution-scale: none | <resolution>#
resolution-fit: none | fit

When resolution-scale is specified on an element, it finds the nearest
resolution in the list to the display's actual resolution, then snaps
it to the closest value that has an integer ratio with the actual
resolution (for details, check the "snap" keyword on
'image-resolution').  The ratio between the chosen resolution and the
snapped resolution is the "scale factor".

(Multiple values are used so that you don't have to use a bunch of
resolution MQs just to provide the most appropriate one.  Instead,
just provide all the resolutions you're targetting.  You can avoid MQs
for the images as well by using image-set(), and 'image-resolution:
from-image snap;".)

Then, when an element has "resolution-fit: fit;" specified on it, it
finds the nearest ancestor with non-none resolution-scale, and
automatically scales all lengths on it by the scale factor.  This
happens at computed-value time.

This lets the author explicitly indicate which things are tied to the
scale of snapped images, and adjust them automatically.

Thoughts?

~TJ

Received on Monday, 25 March 2013 23:59:59 UTC