RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

This line of code is about to be in every single stylesheet.

h1, p, button {
  text-box: trim-both cap alphabetic;
}

Centering in CSS is about to get even finer grained.

Try it demo 1 • demo 2 • demo 3

6 mentions #

65likes
17reposts
  • Jon Henshaw :coywolf:
  • Apple Annie :prami:
  • Jonathan Dallas
  • Iron
  • Tony Ward
  • Fynn Becker
  • bmsuseluda
  • Nilesh Prajapati
  • Toby Evans
  • Tyler Sticka
  • Ryan Mulligan
  • Steven Fail / imgradeone
  • Daniel P H Fox
  • Jeroen Zwartepoorte
  • mrtnvh
  • Germán Freixinós
  • Paul Shryock

Join the conversation on

Interesting. I like the border effect. And the rotated text - kewl!
Bob DinittoBob Dinitto
I always second guess my CSS when I see this. Love this fix!
Zach NeibaurZach Neibaur

@argyleink it is time that all browser see the importance of this. it is such a pain to align several fonts with each other or icons

bmsuseludabmsuseluda

@argyleink It sounds exciting but tbh, without context, or a browser that supports it, I don't get it.

Mikael GramontMikael Gramont
Yes! Been waiting for this for so long. The Seek folks did an amazing job with the Capsize lib, but it’ll be great to have this finally available natively.
Jeff StrandingJeff Stranding
Always designing in browser first! Wow this is nifty!!
Tim HolmanTim Holman