[csswg-drafts] [css-inline-3] Clarification needed: Line box height can exceed a fixed line-height with mixed fonts (#12764)

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

== [css-inline-3] Clarification needed: Line box height can exceed a fixed line-height with mixed fonts ==
Hello CSS Working Group,

This issue is a request for clarification regarding the calculation of line box height when a line contains multiple fonts with different metrics.

The Issue:

A common interpretation of the CSS specification, and a frequently cited rule, is that:

> "Metrics from fonts other than the first available font only impact the layout bounds of an inline box with line-height: normal."

However, this is not always the case. A secondary font on a line can also impact the layout bounds even when a specific, fixed line-height is used.

**Minimal Reproducible Example:**

This code demonstrates the behavior in modern browsers (e.g., Chrome and Firefox on Windows).

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            font-family: Roboto, serif;
            font-size: 100px;
            line-height: 1.2; /* Explicitly set to 120px */
            background-color: lightblue;
        }
        span {
            font-family: "Edu NSW ACT Cursive", cursive;
        }
    </style>
</head>
<body>
    <div>
        Gg <span>tg</span>
    </div>
</body>
</html>
```
**Observed vs. Expected Behavior:**

- **Expected Height (based on the simplified rule):** One would expect the div's height to be exactly 1.2 * 100px = 120px.
- **Observed Height:** The actual computed height of the div is 128px. 

<img width="442" height="178" alt="Image" src="https://github.com/user-attachments/assets/08d6f429-fd3d-44ae-b25e-be36ec4697c0" />

**Technical Explanation:**

This appears to happen because the line-height property is used to determine the height of the individual inline boxes. The browser then aligns these boxes on a common baseline. The final line box height is the distance from the highest point reached by any box to the lowest point. In this case, the taller ascender of the Cursive font forces the final line box to be taller than the 120px specified by the line-height.

**Request for Clarification:**

This behavior is very subtle and contradicts the common understanding. Could the css-inline-3 module be updated to clarify this mechanism? Explicitly stating that a fixed line-height is used to size the inline boxes, but that the final line box may become taller due to mixed font metrics, would greatly improve developer understanding.

Thank you for your time and consideration.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 10 September 2025 11:54:41 UTC