- From: Philip Rogers via GitHub <sysbot+gh@w3.org>
- Date: Mon, 03 Feb 2025 19:28:56 +0000
- To: public-css-archive@w3.org
progers has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-size-adjust] Clarify interaction between text-size-adjust and em units ==
It is not clear how `text-size-adjust` and `em` units should interact ([spec](https://drafts.csswg.org/css-size-adjust/#adjustment-control)). Not adjusting em units leads to clipped text. Adjusting em units leads to double-adjustment of line-height.
Example ([live](https://balsam-juvenile-pufferfish.glitch.me)):
```
<!doctype html>
<meta name="viewport" content="width=device-width">
<style>
html { -webkit-text-size-adjust: 250%; text-size-adjust: 250%; }
</style>
<p>
height (em, px):
<div style="height: 1em; width: 16px; background: lightblue; display: inline-block;">a</div>
<div style="height: 16px; width: 16px; background: lightgreen; display: inline-block;">a</div>
</p>
<p>
border-width (em, px):
<div style="border-top: 1em solid blue; width: 16px; background: lightblue; display: inline-block;">a</div>
<div style="border-top: 16px solid green; width: 16px; background: lightgreen; display: inline-block;">a</div>
</p>
<p>
line-height (em, px):
<div style="line-height: 1em; width: 16px; background: orange; display: inline-block;">a</div>
<div style="line-height: 16px; width: 16px; background: purple; display: inline-block;">a</div>
</p>
```
Comparison between Webkit (left) and Chromium (right):
<img width="375" alt="Image" src="https://github.com/user-attachments/assets/6e3aa5b1-0e86-41e9-8851-55c245e2572e" />
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11636 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 3 February 2025 19:28:56 UTC