[csswg-drafts] [css21][css-inline] height of the content area of inline level boxes

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css21][css-inline] height of the content area of inline level boxes ==
**This is part of the #1796 series. Read that issue for context**

| test 1 | test 2 | test 3 | test 4 | test 5 |
|-|-|-|-|-|
| [Test source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/content-height-001.html) <br> [Ref source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/reference/content-height-001-ref.html) <br> [Live test](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/content-height-001.html) <br> [Live ref](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/reference/content-height-001-ref.html) | [Test source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/content-height-002.html) <br> [Ref source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/reference/content-height-002-ref.html) <br> [Live test](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/content-height-002.html) <br> [Live ref](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/reference/content-height-002-ref.html) | [Test source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/content-height-003.html) <br> [Ref source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/reference/content-height-003-ref.html) <br> [Live test](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/content-height-003.html) <br> [Live ref](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/reference/content-height-003-ref.html) | [Test source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/content-height-004.html) <br> [Ref source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/reference/content-height-004-ref.html) <br> [Live test](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/content-height-004.html) <br> [Live ref](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/reference/content-height-004-ref.html) | [Test source](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/content-height-005.html) <br> [Ref source (mismatch)](https://github.com/frivoal/web-platform-tests/blob/line-height-experiments/css/css-line-height/reference/content-height-005-ref.html) <br> [Live test](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/content-height-005.html) <br> [Live ref (mismatch)](https://rawgit.com/frivoal/web-platform-tests/line-height-experiments/css/css-line-height/reference/content-height-005-ref.html) |

In the general case (see #1798 for a possible exception), all browsers (Edge, Safari, Blink, Firefox) agree that the height of the content area of an inline level box is solely determined based on (font-size adjusted) font metrics of the primary font, and does not depend on either on the line-height property, nor on fallback fonts. This remains true if there are no characters used from the primary font at all.

CSS21 says a number of things, including:
> The 'height' property does not apply [to non replaced inlines]. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.) 

Since all browsers pick the same option ("the later"), we should lift the ambiguity, and specify (in css-inline-3?) that the UA must use the font metrics, not the em box.

and

> If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.

This should probably be superseded (in css-inline-3?) by something like

> if more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not affected by the glyphs from the fallback fonts, and only depends on the primary font.

Even once we've done that, there's still some ambiguity as I don't believe there's any clear definition anywhere of which of the font metrics found in the font file the UA is supposed to use, but we'll have at least narrowed it down significantly.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1804 using your GitHub account

Received on Tuesday, 12 September 2017 00:03:57 UTC