CSS Cap Unit
While I was working on a recent article on the gap property, I needed to place a box between two words and keep it aligned. I thought about a way to size the box to be equal to the capital letter height. After some research, I found the cap unit and it worked as expected. In this article, I will demonstrate the problem and how I solved it.
It works! Yay. At this stage, I wasn’t sure if this was the best solution. The only downside is that you need to play with the ex value to a point where it’s equal to the uppercase letter height.
At this point, even though it was solved, I thought about researching for a CSS unit that is equal to the uppercase height. I remember seeing an announcement on Twitter but couldn’t recall it.
A quick Google search revealed the cap and rcap units that were first released in Firefox (Feb 2022), Chrome (Sep 2023) and Safari (Dec 2023).
That’s it for this article. Do you have other use cases for the CSS cap unit? If yes, I would love to hear from you on Twitter (X), Mastodon or Threads.
