Hacker News Reader

It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.

View on HN

You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.

I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.

Here's an example:

https://jsfiddle.net/a3q87ucs/

The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it.

[1]: https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-...

Reply on news.ycombinator.com