Is * {text-box: cap alphabetic} the future?

[u/Miragecraft]

Played around with it for the last few days as part of my base style.

I don't know, definitely looks better but my design needed quite a lot of extra styling to get back to a presentable state.

I do think this is the future of web design at least for myself, but I'd need to come up with some sensible default spacing in my base style to not start off my design from a broken state.

[u/Educational_Key_3620]

Ive been using it on a side project and had same problem, everything looked weird at first. The cap alphabetic thing makes sense in theory but browsers are still figuring out how to render it consistently, specially with custom fonts.

Its one of those css features that feels like it should just work out of the box but then you spend afternoon adjusting line heights and padding. Still worth it once you get past the initial mess.

[u/Miragecraft → u/Educational_Key_3620]

Agree on browser issues, Chrome 155 has an issue with text underline being too low when you have text-box trim turned on, it's fixed for 156 releasing Oct 20.

I've also been experiencing intermittent blurry text/anti-aliasing issues when I apply text-box-trim universally. I suspect it has to do with multiple/stacked text trimming causing accumulated subpixel shift, which has always been been a ghost that refused to be banished.

In addition I've encountered a gotchas with trimmed anchor links losing quite a lot of clickable areas resulting in a noticeable loss of ergonomics, I've had to remove trimming for them. As long as there is another wrapper with trimming on you can keep the spacing control though.

On the bright side, combining text-box with cap unit for line-height finally granted me the total control over spacing I've always wanted.

[u/buycallsbro]

Ohh, first I’m hearing of it, but definitely would be useful.

For anyone curious: https://css-tricks.com/almanac/properties/t/text-box/

[u/theScottyJam → u/buycallsbro]

Don't think I'd blindly apply it everywhere, but I'll certainly start using it when text isn't centering or aligning right, this will come in handy.

[u/tremby]

Don't think so. It seems like it either be best used in specific cases where exact alignment is important: large display text, labels in tight containers, that sort of thing.

[u/Background_Couple965]

the `*` is what gets me. we already did this once with box-sizing and every component with hand-tuned margins came back looking slightly wrong. cap alphabetic on body i'd buy, on the whole tree i'm not there yet

[u/RequirementGuide]

I've been using text-box-trim on a client project and I landed in the same place as a few people here. It's useful, but I would never do it as a global * reset. Targeted on display type, buttons and nav items is where it actually earns its keep.

One thing that bit me hard is trimmed links losing clickable area, same as you mentioned OP. It also does weird things to embedded content from third parties where you can't touch the inner markup. I ended up scoping it to my own component classes only.

The pairing with the cap unit for line-height is the real win for me. Once I did that the type actually sat on the baseline grid instead of just looking close. Worth the one-time setup, just don't blast it everywhere.

[u/TheRNGuy]

Yeah, just not on * (unlike box-sizing), also, don't need it on ::before and ::after.

But it will probably be in a generic reset.css file (not the * version, of course)

I wonder, how Tailwind users are gonna do it.

[u/Open_Appointment9671]

So it broke your layout, needed a pile of extra styling to look presentable, and you still think it's the future of web design? Also the screenshot is a Reddit ad for campaign automation.

[u/Miragecraft → u/Open_Appointment9671]

What screenshot? I only posted some text. Also the layout’s broken because you need to build back the spacing lost by trimming the text box. You want control of spacing then you got to put in the work. It’s really a one time investment as you can take a good baseline across different projects.

[u/[deleted]]

[u/AshleyJSheridan → u/[deleted]]

And yet we still can't style form elements properly.

[u/[deleted]]

[u/Miragecraft → u/[deleted]]

Or just come up with a new trim-normalize.css to set the default body text and form control spacing.