Container based clamping

[gornycreative]

Hello friends,

I was playing around with the clamp techniques used to provide progressive font sizing, and it has replaced flowtype.js in most projects.

But one of the things that I really missed was the ability to scale based on container width - rather than full viewpoint width. I was also interested in trying to replace fittext.js and learned a very useful technique with reasonable browser support:

https://codepen.io/solonmg/pen/ZEwGEay

instead of using vw units, you can apply:

container-type: size;
container-type: inline-size;

And then by dividing the character count of a line by 100 and applying the outcome to use cqw units instead of vw units, you get the same scaling type features.

If you are trying to get that optimal character/word line length in a given column, this will certainly help! The same clamping limits that already exist based on viewport widths work for containers.

I don't know if it makes sense to have separate clamping settings for display text (like headings) and body text, but this is just something I have been playing around with.

[szabesz]

Promising technique indeed, thanks for posting about it! I will explore it when starting my next project.

[bernhard]

I'm aware of container queries being something coming in the future but I thought it's not there yet or at least not well enough supported to be used just now. Let me know if I'm wrong and I'm happy to add support for it if that's possible.

I think rfGrow() is a great helper and I'm happy that it's useful for you as well 🙂 

[gornycreative]

Despite being a working draft feature, support is at around 88% so it isn't full but looking at the browser compatibility and the browser support I already need I figured it was okay for my purposes.

https://caniuse.com/css-container-query-units

For those who aren't yet comfortable, it's probably still worth earmarking.