 New post: “Cap-Height Vertical Align”. https://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! 6 comments
@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 (oops, forgot to put hashtags for the post's announcement: #CSS and #Typography — here you go!) 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. |
Gregory's Server
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)