Email or username:

Password:

Forgot your password?
Roma Komarov

New post: “Cap-Height Vertical Align”.

blog.kizu.dev/cap-height-align

The new year is here, and, with it, a season where people put out their CSS wishlists for the future.

One thing caught my attention in @tylersticka’s list: an ability to vertically align to the middle of the font’s cap-height.

I am thrilled to report that there are at least two relatively ok workarounds available in the most recent browsers, courtesy of the new `cap` unit!

A screenshot of an example showing a pink square centered over the “Nicely Aligned” text’s cap height.

CSS snippet for this example is visible: 

	.example1 .icon {
		vertical-align: middle;
		margin-block-start: calc(1ex - 1cap);
	}
6 comments
Roma Komarov

As usual, credits:

- @tylersticka (wishlist, and the original CSSWG issue!)
- @xgebi (I mentioned her wishlist from December!)
- @michaeltaranto (Capsize!)
- @pepelsbey (pointed me towards the Baseline URL on MDN)

Roma Komarov

@tylersticka Thanks for the wishlist! Always fun to look at what others want from CSS, and to think about how we can achieve some of it already :D

Roma Komarov

(oops, forgot to put hashtags for the post's announcement: #CSS and #Typography — here you go!)

Roma Komarov

For years, what I was mindlessly doing instead: applying a negative margin with “random” values of 0.2em-0.3em for cases like this, which, coincidentally, almost the same!

Intuitively, and by testing, I was pleased with these values all this time, but having a proper method on one hand, and a confirmation that this type of adjustment results in what the fallback ends up being in the end is nice, haha.

Go Up