allow `font-size` to be based on element width

[SaraSoueidan]

I’m currently working on a redesign of my website and have been using viewport units for larger headlines. Viewport units are perfect for creating fluid-sized text without having to resort to media queries to specify a font size based on those. (That being said, we do need to use media queries at present to “limit” the font size to a minimum and maximum, otherwise it will become too small on very small viewports, or too big on bigger widths.)

On my website, I have elements representing a calendar entry (basically just a rectangular shape with a date and some text in it)(see attached image below). I want the date to be sized proportional to the entry's width instead of the viewport width because:

1. Using viewport width would cause the date's font size to be too small on smaller viewports, even though the entry isn't really small. The text needs to be bigger and viewport units don't give me that without resorting to media queries.
2. Using viewport units would cause the date's size to be TOO big when on desktop. For example, say the maximum width of the entry is around 350px—even on wider screens. Using viewport units, the size would be to big to fit inside the entry. I would have to explicitly set the sizes using media queries again to make it work—which negates the whole idea of fluid text using these units.

Attached is a screenshot of the current state of these “calendar entries”.

The date's size needs to be changed using media queries for it to work as needed. If I were able to set it relative to its container's size, it would resize as much as needed and stop at a certain limit when the element's width doesn't increase anymore.

I realize this may be one of those "circular/infinite loop" situations since the element's width is based on its content's width, but it does fall under the element queries use cases nonetheless.

[SaraSoueidan]

It’s worth noting that the calendar entry’s width is currently specified in percentages, which means it’s relative to the size of the container whose width is set relative to the viewport using vw. So the size of the entry isn’t really based on the content inside it. I realize the problem would persist with floated elements, though.

[pdaoust]

There's a discussion in issue #7 about CQ's overlap with the CSS Containment. contain: layout would prevent an element's contents from affecting its layout, essentially like making it a mini-viewport. In that case, perhaps viewport units would always be connected to their nearest viewporty ancestor's dimensions?

In terms of flow (floated containers, for example), I think that if the contents didn't have any influence on their container, then it'd be as if the contents had zero width. So you'd have to size your floated element explicitly anyway.

[Wilto]

Heads up: @beep opened an issue to start distilling things down to iron-clad requirements, a-la http://usecases.responsiveimages.org/#requirements

@SaraSoueidan, @pdaoust: we’ve love to have you both involved there.

[beep]

Thanks, @wilto! The issue’s available at https://github.com/ResponsiveImagesCG/cq-usecases/issues/36, if folks want to review it.

[Wilto]

whoop meant to link that i am not good at compu

[beep]

extremely same voice extremely same

[beep]

Closing this out for now, per the ongoing use cases/reqs work. (Please reopen if #36 doesn’t address this.)

[beep]

(Also pinging #43, for the overlap there.)