CSS Cap Unit

Introduction

Whereas I used to be engaged on a current article on the hole property, I wanted to position a field between two phrases and preserve it aligned. I considered a approach to dimension the field to be equal to the capital letter top. After some analysis, I discovered the cap unit and it labored as anticipated. On this article, I’ll display the issue and the way I solved it.

The issue

Within the following determine, I’ve a field between the phrases. I have to make its top equal to the uppercase letters (H and W).

Answer 1: Mounted dimension

The very first thing I considered was to divide every phrase into a component and use Flexbox to deal with the structure.

<p class="title">
  <span>Hi there</span>
  <span class="spacer"></span>
  <span>World</span>
</p>

.title {
  show: flex;
  hole: 0.5rem;
}

Cool. The subsequent step is so as to add the spacer styling. As a begin, I did this:

.spacer {
  --size: 2rem;
  width: var(--size);
  top: var(--size);
  background-color: var(--brand-1);
}

Right here is the outcome.

At first look, it appears like we solved it. Let’s attempt to change the font dimension a bit and see what occurs.

This isn’t good. I have to make the sq. top equal to the uppercase letter.

Answer 2: The ex unit

On this iteration, I attempted utilizing the ex CSS unit which is the same as the lowercase letter top.

.spacer {
  --size: 1.55ex;
  width: var(--size);
  top: var(--size);
  background-color: var(--brand-1);
}

Attempt to resize the textual content beneath.

It really works! Yay. At this stage, I wasn’t positive if this was the most effective resolution. The one draw back is that you have to play with the ex worth to a degree the place it’s equal to the uppercase letter top.

Answer 3: The cap unit

At this level, although it was solved, I considered researching for a CSS unit that is the same as the uppercase top. I keep in mind seeing an announcement on Twitter however couldn’t recollect it.

A fast Google search revealed the cap and rcap items that had been first launched in Firefox (Feb 2022), Chrome (Sep 2023) and Safari (Dec 2023).

.spacer {
  --size: 1cap;
  width: var(--size);
  top: var(--size);
  background-color: var(--brand-1);
}

One phrase to explain this. Perfection. With that, I used the cap unit for a real-life use case that I’m proud of.

Answer 3: cherry on prime

Now that I discovered the right resolution, is it attainable to make it even higher?

The final concern I observed is that after I add an overview to the title, there’s a area on the prime and backside.

What if I added top: 1cap to the title?

.title {
  top: 1cap;
  define: strong 1px;
}

Higher, proper?

Aligning textual content and icon

One other manner to make use of the CSS cap could possibly be to maintain an icon aligned with the adjoining textual content.

.button {
  
  padding-block: 1cap;
  show: flex;
  align-items: heart;
  justify-content: heart;
  hole: 0.5cap;

  svg {
    --size: 1.65cap;
    flex: 0 0 var(--size);
    width: var(--size);
    top: var(--size);
  }
}

Within the demo beneath, play with the slider to vary the font dimension.

Outro

That’s it for this text. Do you’ve different use instances for the CSS cap unit? If sure, I’d love to listen to from you on Twitter (X), Mastodon or Threads.