←back to thread

MomBoard: E-ink display for a parent with amnesia

(jan.miksovsky.com)
2093 points pabs3 | 1 comments | 14 Nov 24 12:20 UTC | HN request time: 0s | source
Show context
albert_e ◴[14 Nov 24 13:57 UTC] 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 #
1. Pikamander2 ◴[15 Nov 24 08:57 UTC] No.42145091[source]▶
That's also been one of my biggest CSS wishlist items for years.

I've had dozens of clients complain about headings wrapping onto the next line when they add one too many letters, and ask if we can make the font size smaller without affecting the others. There are several ways to accomplish that, but they're all annoying compared to a theoretical one-line CSS solution like:

font-size: 12-18px 400px;

Or something of that nature that could hopefully do it automatically.