W3C home > Mailing lists > Public > www-style@w3.org > February 2016

object-fit/view-box for element content

From: Jake Archibald <jaffathecake@gmail.com>
Date: Sun, 28 Feb 2016 09:45:10 +0000
Message-ID: <CAJ5xic_3r1JT3Rw65Gqf=XyvfNewAM2Cv4sDq=XKdj74WUKB0Q@mail.gmail.com>
To: W3C CSS Mailing List <www-style@w3.org>
I imagine this has been requested before, but couldn't find anything.

I'm looking for a way to scale and position the contents of an element
depending on the size of the element. The scaling would have no impact on
the dimensions of the element, it would act like scale transforms on the
children.

If I were displaying a slide or a page of a document, I could use it to
display the whole thing, regardless of parent element size.

If a headline text was overflowing due to a long word that couldn't wrap, I
could use it to scale the content down to stay within the parent.

If I was dynamically loading part of a page (some share icons or *sigh* an
advert), I could reserve a fixed area of the page and scale content down if
it tries to overflow. This avoids the page shifting as content loads.

The nearest things we have to this already are object-fit and SVG's viewBox.

Rough proposal:

view-box: <x offset> <y offset> <width> <height>;

Default:
view-box: 0 0 auto auto;

x/y offset can be absolute, or "content", which is the offset of the
top/left of the unioned child boxes.

width/height can be absolute, "auto" which takes on the dimension of the
element itself, or "contents" which takes the dimension from the union of
the child boxes.

Could we have max(auto, contents) here?

view-box-position: <x> <y> <cover|contain>;

Default:
view-box-position: 0 0 contain;

x/y is the alignment of the content within the element, like
background-position. Cover|contain behaves like background-size. This is
basically a CSS-friendly version of SVG's perserveAspectRatio, although
I've lost the ability to not-preserve aspect ratio, so there may be a
better solution.

Auto-fitting a slide/document:

.container {
  width: 200px;
  height: 100px;
  view-box: 0 0 content content;
  view-box-position: 50% 50% contain;
}

Scaling down an overflowing headline:

.headline {
  view-box: 0 0 max(auto, content) auto;
  view-box-position: 0 100% contain;
}

If the headline overflows it would leave a gap at the top of the element,
but the text would be fully visible.

Is this worth pursuing?
Received on Sunday, 28 February 2016 09:45:50 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:00 UTC