W3C home > Mailing lists > Public > www-style@w3.org > October 2013

Re: [css-shapes] how to size and position <image>s

From: Alan Stearns <stearns@adobe.com>
Date: Fri, 18 Oct 2013 13:12:39 -0700
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <CE86DEBC.31FBE%stearns@adobe.com>
On 10/18/13 11:56 AM, "fantasai" <fantasai.lists@inkedblade.net> wrote:

>On 10/18/2013 11:52 AM, fantasai wrote:
>> On 10/17/2013 07:41 PM, Alan Stearns wrote:
>>> fantasai wrote:
>>>>
>>>> Okay, now let's consider an element that contains text, but has a
>>>>shape
>>>> derived from an image. This means that the size of the image and what
>>>> it's box would be is potentially very different from the size of the
>>>> box resulting from sizing the text. That size is therefore mismatched,
>>>> though well-defined. What is its position with respect to the actual
>>>> box?
>>>
>>> I would expect the top-left corner of the image would be in the
>>>top-left
>>> corner of the content box. What would you suggest?
>>
>> I would suggest centering the image. Any time we pick a side, it's gives
>> us a bias. That has two problems: it's non-symmetrical--and most designs
>> are better off if we're being symmetrical--and it's i18n-unfriendly.
>
>Btw, we might actually want to key off object-fit/object-position instead,
>taking the used content box size as the image's content box for this
>purpose.
>This not only guarantees that the images match, but also let's the author
>play around with settings in the case that the element being shaped is
>not a replaced image.

Since object-fit and object-position are part of the 'rules that would
apply' I agree it makes sense to use them. And object-position's initial
value makes the image centered, so we get your desired result.

You suggested this wording on IRC today:

---
The image is sized and positioned
as if it were a replaced element
with a specified width and height
of the element's used content-box size.

---

This works for the case I'm concerned about (an <img> float where we're
getting the shape from the displayed image). And it gives a clear result
for all other cases where the image isn't actually the displayed content.
If there's a mismatch, then object-position will center the image in its
initial state, but you can fiddle with the image placement with different
object-position values.

I've edited in the sentence above.

Thanks,

Alan
Received on Friday, 18 October 2013 20:13:05 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:03 UTC