Re: [csswg-drafts] [css21][css-inline] Height of an inline-level box with line-height:normal using primary and fallback fonts

The `line-height: normal` as defined in the spec is _not good enough_. Every browser has a slightly different take on what it should be, and different fonts seem to affect it. I dug around for my testing material and I can't find it - but we have [a feature in EQCSS](https://tomhodgins.github.io/element-queries-spec/element-queries.html#lines) that lets you apply styles based on `min-lines` and `max-lines` of text visible inside an element, a calculation which involves knowing the computed `height`, subtracting `border` and `padding`, then dividing the remaining space by (`font-size` * `line-height`) which works great…as long as the `line-height` is specified.

I had the hardest time boiling `line-height: normal` down to a cross-browser value we could use so I had to fudge it. Based on testing in different browsers, fonts, and sizes, the number that I came up with for a real world average was `1.125`. I remember seeing lower than that, and as high as `1.6`.

Here's the relevant [snippet from the plugin](https://github.com/eqcss/eqcss/blob/gh-pages/EQCSS.js#L988&L994):

```javascript
if (element_line_height === 'normal') {

  var element_font_size = parseInt(computed_style.getPropertyValue('font-size'));

  element_line_height = element_font_size * 1.125;

} else {
```

Hopefully we can lock down what `line-height: normal` ought to be, or at least provide a better way to measure what it actually has turned out to be as-rendered.

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1802#issuecomment-329160482 using your GitHub account

Received on Wednesday, 13 September 2017 13:02:51 UTC