←back to thread

2093 points pabs3 | 1 comments | | HN request time: 0s | source
Show context
albert_e ◴[] No.42136173[source]
> One small challenge was maximizing the size of the message text. Sometimes a message is just a word or two; other times it might be several sentences. A single font size can’t accommodate such a wide range of text content. I couldn’t find a pure CSS way to automatically maximize font size so that a text element with word wrapping would display without clipping.

> I ended up writing a small JavaScript function to maximize font size: it makes the text invisible (via CSS visibility: hidden), tries displaying the text at a very large size, and then tries successively smaller font sizes until it finds a size that lets all the text fit. It then makes the text visible again.

Wow -- not just for accessibility but this seems like a very useful feature to have in native CSS.

Nice find.

Overall such a heartwarming use of technology. Love.

replies(4): >>42136955 #>>42145091 #>>42145572 #>>42189463 #
bool3max ◴[] No.42145572[source]
How the hell is this not already a CSS feature?

    font-size: "as-big-as-possible-while-still-fitting-parent-container";
or maybe just

    font-size: max;
replies(2): >>42147760 #>>42156262 #
1. graypegg ◴[] No.42147760[source]
Would combine quite well with `text-wrap` actually! [0] That way, the renderer knows the area it needs to fill (the implicit `max-content`, defined width/height, or flex/grid size of the container) and it knows how to best split up the text amongst the lines. Feels like the renderer would be capable of finding the optimal font size to satisfy those two constraints.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap