Mastodon Feed
Reblogged by slightlyoff@toot.cafe ("Alex Russell"):
kizu@front-end.social ("Roma Komarov") wrote:
I wrote a new article: “Fit-to-Width Text: A New Technique”.
https://kizu.dev/fit-to-width/
Registered custom properties are now available in all modern browsers.
Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
Attachments:
- A screen recording showing a square block of text, where each line has text fit to width by resizing it. The video shows how the element is resized by dragging the container by a corner, and text becoming smaller, different lines stopping at different points when reaching a certain font size limit. The text in the example is: What if I will tell you how we could use registered custom properties (alongside container query length units and math) to solve fit-to-width text in all latest browsers? The text is in a century font with serifs, “registered custom properties” and “container style units” are written in italic, “to solve” in bold, and “math” and “in the latest browsers?” are in a “black” version of the font-face (bolder than bold). (remote)