0

So the actual height of an inline text element is not simply the font-size value, but is determined by the individual font's metrics, as explained in this answer (see also this article).

So for the font I'm using, the ascent is 96.7%, the descent is 28.3%, resulting in a total content-area of 125%.

This means that for a base font size of 15px, the actual element's height should be 18.75px. The browser rounds that up to 19px. I can work with that.

Except, that when you zoom in or out, the height changes! This table shows the height in virtual CSS pixels, as reported by Chrome dev tools:

Zoom Height
50% 18px
67% 19.5px
75% 18.67px
80% 18.75px
90% 18.89px
100% 19px
110% 19.09px
125% 18.4px
150% 18.67px
175% 18.29px
200% 18.5px
250% 18.8px
300% 19px
400% 18.75%
500% 18.8px

This is quite a wide range of values, and makes trying to align things difficult. I'm trying to apply padding to fill out the background-color to the full line-height as explained in this answer, which is not working reliably when the calculated element height changes but the padding value doesn't.

So to the question(s):

  1. How are these actual element height values calculated?
  2. Bonus question: is there any way to make it consistent across all zoom levels?
curiousdannii
  • 1,658
  • 1
  • 25
  • 40
  • 1
    I really expected this question to have been asked before, but I searched for a while and couldn't find it. – curiousdannii Jun 09 '22 at 23:27
  • In my experience, when dealing with sub-pixel rendering. the starting position can matter. Have you checked the results for different top positions? – Alohci Jun 10 '22 at 01:32
  • @Alohci From what I can tell the starting position isn't making a difference. The same height is being reported for each row. – curiousdannii Jun 10 '22 at 03:19

1 Answers1

0

A partial answer:

It seems like Chrome is always setting the inline text element's height to an integer value in real device pixels, after multiplying the ideal height of 18.75 by the zoom. So for example, for 125%, it's 18.75 * 1.25 = 23.4375. This gets rounded down to 23 real pixels. Dev tools (and probably other browser measuring functions) report the real pixels divided by the zoom: 23 / 1.25 = 18.4, which is what my table shows.

Except that doesn't work for 175%...

Unfortunately I haven't found a way to adjust the padding by a corresponding amount. I think I'll have to go back to setting display: inline-block, but that then causes trouble if any span is longer than a line, so I think I'll have to break the spans apart into words...

curiousdannii
  • 1,658
  • 1
  • 25
  • 40