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.

container queries have a very obvious chicken and egg problem if used a certain way: If this container is less than 30px wide, make its content 60px wide. Otherwise make it 20px wide. Now that container exists in a quantum state of being both 30 and 60px wide. I actually haven't looked into container queries to see how they ended up dealing with this yet.

Obviously this is a very contrived example but it can also express itself in subtler ways.

> so early websites couldn't even place text over images

I take offense at this! We weren't that stupid back then! We just put the text 5 times on the page, with position: relative, 4x in the outline color, each copy with a 1px offset in a different direction, and the final one in the text color. That trick worked with pretty early CSS.

CSS was doomed from the start, IMO. It was a poorly-targeted solution to a the wrong problem that could never have worked. But you don't have to use it. You can keep using tables for layout, all browsers render them well (generally faster than CSS, and with better progressive rendering too), real-world screenreaders and the like have had great support for them since before CSS emerged, there's no actual downside.

I made a handful of corporate sites, e-commerce, CMS and even flash lol, just out of college with boring defense contractor job. I didn't have time to be picky because I had a full time job so I always worked with whatever they had and a lot of stuff was made in Dreamweaver, and even a corporate site exported from Word. The code was awful but worked everywhere. And you always had to get into code anyway, so there was no time to even think about which of the tools was best. Something was always missing in some integration so you gotta code/script. I think a lot of people made money in the last cycle tech cycles and had nothing to do but create or fund a bunch of stuff to confuse the marketplace.

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.

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;

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

Comeau has a piece on that. Another property to constrain it is the solution.

https://www.joshwcomeau.com/css/container-queries-introducti...

i asked this on bluesky (https://bsky.app/profile/swyx.io/post/3lb2x53wuwc2y) and immiediately got this https://kizu.dev/fit-to-width/ which means theres no technical barrier now, we just need the powers that be to prioritize it

anyone with influence on the CSSWG?

There is pure CSS solution: https://kizu.dev/fit-to-width/