w3c / w3c/csswg-drafts

[css-inline-3] Propose N/A value for em-top and em-bottom baselines

Open
#5,380 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-inline-3
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

A follow up for #5312.

I'd like to propose using some N/A value (undefined in JavaScript, 0, or something else) for when the font doesn't have none of top, bottom, nor central of em-box.

Imagine a case:

const ctx = canvas.getContext('2d');
ctx.font = '20px Arial, CJKFont';
const metrics = ctx.measureText('日本語');

I think the expectation is to get em-box from the CJKFont.

Another example:

ctx.font = '20px Arial, CJKFont1, CJKFont2';

and CJKFont1 doesn't have BASE table but CJKFont2 has. Is the expectation to synthesize from Arial, synthesize from CJKFont1, or use BASE table from CJKFont2?

Because this is JavaScript API, if author knows that the first available font doesn't have accurate metrics, they can choose options such as synthesize from ascent/descent of the first available font, fallback to the next font, or something else. If browser returns possibly inaccurate synthesized values, authors doesn't have a good way to determine how much they can trust it.

WDYT?

/cc @jfkthame @litherum @fantasai @annevk @yiyix @macnmm

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading issue #5312 and the CSS Inline 3 definitions for em-top and em-bottom baselines, then review the Canvas measureText examples here. The work is done when the specification resolves whether missing BASE data produces an N/A value, synthesized metrics, or fallback-font metrics, including the multiple-font case.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
api, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.