w3c / w3c/csswg-drafts

[css-inline-3] initial-letter sizing for non-western scripts

Open
#5,366 1 comment 1 reaction 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

This is a slightly different scope to #5244

The sizing algorithm defined for the size of the initial-letter is as follows:

Font size of drop cap = ((N-1) * line-height + [cap-height of para] * [font size of paragraph])/[cap-height ratio of drop initial font]

That seems to be working well for Latin and Indic and Hebrew scripts (which is why I'm supporting the "hebrew top" baseline disappearing and from the algorithm to be replaced by cap-height, as suggested in #5208).

However it's not working so well for ideographic scripts, at least in horizontal alignment.

image

The algorithm that is working for me is:

Font size of drop cap = ((N-1) * line-height + [ideographic-face-bottom of para - ideographic-face-top of para] * [font size of paragraph])/[ideographic-face-bottom of drop initial font - ideographic-face-top of drop initial font]

Which gives the following results:

image

Looking ahead to #5244 eventually defining a "top" and "bottom" baseline for various other scripts, it might be worth changing the algorithm to not reference cap-height or ideograph-face baselines directly; the general form is

Font size of drop cap = ((N-1) * line-height + [abs(a - b)] * [font size of paragraph])/[abs(c - d)]

where:

  • a is bottom alignment point of paragraph, as set by initial-letter-align
  • b is top alignment point of paragraph, as set by initial-letter-align
  • c is bottom alignment point of initial-letter, as determined by its content in section just after example 11
  • d is top alignment point of initial-letter, as determined by its content in section just after example 11

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 the css-inline-3 initial-letter sizing algorithm and the alignment definitions referenced in the issue. Compare the current cap-height and ideographic-face formulation with the proposed generalized abs(a-b)/abs(c-d) form for non-western scripts. Done means the Working Group has resolved and specified the correct algorithm.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.