- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Wed, 25 May 2011 18:08:23 -0700
- To: "www-style@w3.org" <www-style@w3.org>
I just did some CVS archaeology for Tab on why the definitions for object-fit
interact with the min/max properties the way they do in the definitions agreed
to by the CSSWG. You can see that text in old drafts of CSS3 Paged Media:
http://dev.w3.org/cvsweb/~checkout~/csswg/css3-page/Overview.html?rev=1.71;content-type=text%2Fhtml#img-fit
The text was added originally on 14 November 2006, based on proposed text
from mid-October 2006, following discussions across the F2F and the internal
mailing list. (This was before the CSSWG decision to work in public.)
The discussion at the F2F was triggered by something I posted at
http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/
which I will reproduce here for archiving.
====== min-max-replaced-2 ======
[Problem Statement]
Constraints:
specified min width/height
specified max width/height
specified width/height
intrinsic aspect ratio
Can't always satisfy all of these at once, so which ones get dropped?
* Consensus is that min+max constraints must always be honored,
with min overriding max in case of conflict.
* Consensus is that when both width and height are specified, the
aspect ratio is ignored.
* Consensus is that when both width and height are auto, the aspect
ratio is honored insofar as possible.
? Question is how to balance specified width/height and aspect ratio
when either width or height (but not both) is auto.
[Solution Space]
Three possible balancing acts:
A) Use the aspect ratio to find the missing dimension, then ignore
it when applying min/max constraints.
-> Changes to one dimension due to applying constraints won't
affect the other dimension
-> For example, for a 1:1 image with
width: 300px;
max-width: 100px;
the resulting dimensions will be
width = 100px
height = 300px
-> I don't think we really want this interpretation.
B) Honor aspect ratio insofar as possible, but don't violate any
author declarations.
-> A specified width or height is always honored unless it
violates min/max constraints.
-> Missing dimension is calculated from the final value of
the given dimension, subject to min/max constraints.
-> Underlying assumption: author's declarations best represent
author's intention.
-> For example, for a 1:1 image with
width: 150px;
min-height: 300px;
the resulting dimensions will be
width = 150px
height = 300px
C) Honor the aspect ratio even if it means violating author-specified
width or height.
-> Use the given dimension to calculate the missing dimension.
-> Treat resulting dimensions as the intrinsic dimensions and
apply constraints as if both dimensions were auto.
-> Underlying assumption: aspect ratio best represents author's
intention.
-> Resulting image may be smaller /or bigger/ than specified
dimensions.
-> For example, for a 1:1 image with
width: 150px;
min-height: 300px;
the resulting dimensions will be
width = 300px;
height = 300px;
[Examples]
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/intrinsic.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/intrinsic.svg>
Example 1.
For a 1:1 image with
width: 200px;
max-width: 100px;
width wmax
|---------------------+----------+---------> width
|------------------------------------------> height
the resulting dimensions will be
A) width = 100px B) width = 100px C) width = 100px
height = 200px height = 100px height = 100px
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex1b.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex1b.svg>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex1c.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex1c.svg>
Example 2.
For a 1:1 image with
width: 150px;
min-height: 200px;
width
|---------------------+--------------------> width
hmin
|--------------------------------+---------> height
`150px `200px
the resulting dimensions will be
A) width = 150px B) width = 150px C) width = 200px
height = 200px height = 200px height = 200px
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex2b.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex2b.svg>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex2c.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex2c.svg>
Example 3.
For a 1:1 image with
width: 200px;
max-height: 100px;
width
|---------------------+--------------------> width
hmax
|---------+--------------------------------> height
`100px `200px
the resulting dimensions will be
A) width = 200px B) width = 200px C) width = 100px
height = 100px height = 100px height = 100px
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex3b.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex3b.svg>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex3c.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex3c.svg>
Example 4.
For a 1:1 image with
min-width: 150px;
height: 200px;
max-height: 100px;
wmin
|---------------------+--------------------> width
hmax height
|---------+---------------------+----------> height
`100px `150px `200px
the resulting dimensions will be
A) width = 200px B) width = 150px C) width = 150px
height = 100px height = 100px height = 100px
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex4b.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex4b.svg>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex4c.png>
<http://fantasai.inkedblade.net/style/specs/css2.1/min-max-replaced-2/ex4c.svg>
[Spec Text]
After rereading the text carefully, I believe
A) would require changing "used" to "computed" in the formula in 10.3.2
and 10.6.2
C) is using the constraint table, with the given dimension and the
missing value calculated from the given dimension as the values
for intrinsic width and height
B) is actually what the last published draft says
Are you sure this time?
Yes. :)
The order is enforced by min/max-height/width stating that the steps that
apply the constraints are what define the used width.
Let's step through Bert's example.
http://www.w3.org/Style/Group/css2-src/visudet.html
http://lists.w3.org/Archives/Member/w3c-css-wg/2006JulSep/0036.html
| Assume a landscape-style, inline image twice as wide as high. I set
| the following:
| width: 300px;
| height: auto;
| max-width: 100px;
| max-height: 100px;
The second interpretation is wrong because section 10.6.2 says:
http://www.w3.org/Style/Group/css2-src/visudet.html#inline-replaced-height
# if 'height' has a computed value of 'auto', 'width' has some other
# computed value, and the element does have an intrinsic ratio; then
# the used value of 'height' is: (used width) / (intrinsic ratio)
The used width is calculated in 10.4
http://www.w3.org/Style/Group/css2-src/visudet.html#min-max-widths
The used width is the value of width after max-width has been applied,
i.e. 100px
Therefore the tentative used height is width/2 = 100px/2 = 50px, and since
that's within the max-height constraint, it is also the final used height.
So what should we clarify?
Maybe clarify that the used width/height calculated in 10.3/10.6 is
tentative and subject to the algorithms in 10.4/10.7.
[Photo Grid Case]
The main proposed use case for C was arranging photos in a grid by setting
either width or height to some large value, then constraining it with max-width
and max-height. There are several problems with this approach imho.
1. It's a hack. The author doesn't /really/ want to target his super-large
height value at all. That would break his layout.
2. It assumes that all authors don't really care about the width or height
that they specified. (We've given authors a channel to communicate, and
now it's corrupted.)
3. As we saw above, in the case where min constraints are used instead of max
constraints, the image actually gets bigger than its specified dimensions.
Yes, this use case is very important. But it would make more sense if we gave
the author a channel designed to say what they mean than if we tweaked our
width/height calculations to let them write a hack to get this behavior. The
'fit' property is close, and is already there to control aspect ratio
handling, so why not use that?
[Using 'fit']
First problem: 'fit' doesn't apply unless both width and height are 'auto'.
# The 'fit' property gives a hint for how to scale a replaced element
# if neither its 'width' nor its 'height' property is 'auto'.
We can fix that by changing it to
| The 'fit' property gives a hint for how to scale a replaced element
| with an intrinsic ratio when it's used width and height result in an
| aspect ratio different from the intrinsic ratio.
Second problem: 'fit' doesn't resize the image box, it just changes how the
image is painted within it.
We can fix that by adding a new value that resizes the box, or by defining
different behavior for when min/max constraints take effect. For example,
| If both 'height' and 'width' are 'auto' and both 'max-width' and
| 'max-height' are given, then the calculate the used value of the width
| and height as if the intrinsic size of the image were infinitely large.
We can put this under the definition of 'fit: meet'.
~fantasai
[Post Script]
The CSS WG has decided to expand the 'fit' property as described above,
and to change the names of the 'fit' property and values as follows:
fit => image-scaling
fill => fill
hidden => none
meet => contain
slice => cover
Received on Thursday, 26 May 2011 01:09:11 UTC