MomBoard: E-ink display for a parent with amnesia

> 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.

I've been watching the evolution of the web since 1995, and I remember when css got popular in the late 90s thinking that it didn't match real-world use cases. Somehow design-by-committee took us from drawing our sites with tables in the browser's WYSIWYG editor, to not being able to center text no matter how much frontend experience we have.

Css jumped the shark and today I'd vote to scrap it entirely, which I know is a strong and controversial statement. But I grew up with Microsoft Word and Aldus PageMaker, and desktop publishing was arguably better in the 1980s than it is today. Because everyone could use it to get real work done at their family-owned small businesses, long before we had the web or tech support. Why are we writing today's interfaces in what amounts to assembly language?

Anyway, I just discovered how float is really supposed to work with shape-outside. Here's an example that can be seen by clicking the Run code snippet button:

https://stackoverflow.com/a/33953666

Notice how this tiny bit of markup flows like a magazine article. Browsers should have been able to do this from day one. But they were written by unix and PC people, not human interface experts like, say, Bill Atkinson. Just look at how many years it took outline fonts to work using strokes and shadows, so early websites couldn't even place text over images without looking like Myspace.

I think that css could benefit from knowing about the dimensions of container elements, sort of like with calc() and @media queries (although @media arguably shouldn't exist, because mobile shouldn't be its own thing either). And we should have more powerful typesetting metaphors than justify. Edit: that would adjust font size automatically to fit within a container element.

IMHO the original sin of css was that it tried to give everyone a cookie cutter media-agnostic layout tool, when we'd probably be better off with the more intuitive auto flow of Qt, dropping down to a constraint matrix like Apple's Auto Layout when needed.

Disclaimer: I'm a backend developer, and watching how much frontend effort is required to accomplish so little boggles my mind.

Your comment is some interesting food for thought, but I wanted to respond to a couple statements you made:

> not being able to center text no matter how much frontend experience we have

Not being able to center things is a bit of a meme, but flexbox was introduced back in 2009 and has been supported by major browsers for quite a long time. Centering text and elements is now extremely easy.

> css could benefit from knowing about the dimensions of container elements

You're in luck! Container queries were added to CSS fairly recently:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...

As someone who has struggled with getting CSS to do normal layout stuff that had clear precise semantics but required weird CSS trickery, it's actually more scary than lucky that stuff like container queries have arrived 30 years after CSS was introduced.

I agree with GP that CSS should be scrapped.