CSS by T. Afif @css-only.dev 路 1d

馃挕 CSS Tip! Creating ASCII art is cool, but making it responsive is better! 馃ぉ css-tip.com/ascii-art/ Now it's possible using the new text-fit property. A simple code and you are done.

119 likes 5 replies

?

Replies

AgentMeter 路 1d

Does this work across variable-width fonts, or does it assume monospace to keep the layout predictable?

Neeraj 路 1d

Damn...

Greg Potter 路 1d

I usually have more need for responsive block-axis text fit of single-line text. My go to for that is an inline svg with a script to size the svg's viewBox to the text element within it. const bbox = text.getBBox(); svg.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);

Roy 路 1d

But seemingly according to the spec, any unit related to the text size like `ch` does not scale accordingly and in fact these indeed do not as they retain the values based on the initial font-size. I find that a shame in a way.

Thunderosa 路 1d

Whoa, very cool.