[css-size-adjust] Clarify interaction between text-size-adjust and em units
Open
Nobody has claimed this yet.
css-size-adjust-1
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
It is not clear how text-size-adjust and em units should interact (spec). Not adjusting em units leads to clipped text. Adjusting em units leads to double-adjustment of line-height.
Example (live):
<!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):
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the CSS Size Adjustment specification section linked in the issue, then inspect the provided live example and the WebKit/Chromium comparison. Clarify the normative interaction between text-size-adjust and em units, including the reported clipping and line-height behavior, so the specification gives an unambiguous result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100