CSS Kerning

css-kerning-proposal.md

Syntax

This proposal introduces a new text-kerning property:

text-kerning: [ <upoint> <upoint> <length> ] #

The <upoint> pairs are the left and right code points of a kerning pair and <value> is the kern value. Kerning pairs and values can be repeated multiple times by separating them with a comma. Kerning is applied to all unicode code point pairs in an element that match the kerning pairs specified in the text-kerning property of that element.

The <upoint> token is a single unicode code point, identical to the single unicode code points in the unicode-range property of the @font-face syntax. Ideally we would modify CSS tokens to introduce a UNICODE-POINT token that matches a single unicode code point (e.g. u\+[0-9a-f?]{1,6}) and modify the UNICODE-RANGE token to use it (e.g. {unicode-point}(-{unicode-point})?).

Kerning is applied cumulative. This is in line with the "kern" table in OpenType fonts and similar CSS properties such as word-spacing and letter-spacing.

When ligatures are available for kerning pairs, the kerning pair is ignored and the ligature is used (unless ligatures are turned off.) Partial matches within a ligature have kerning applied as usual.

If the font-kerning property is set to none on an element that also has a text-kerning property, the text-kerning property is ignored by the user agent.

Examples

text-kerning: U+56 U+41 -0.02em;

This defines a kern pair between "V" and "A" and subtracts 0.02em from the default kern value.

text-kerning: U+56 U+41 -0.03em, U+54 U+54 1px;

This defines two kerning pairs, the first one decreases the default kern value between "V" and "A" with 0.03em, and the second one increases the default kern value between "T" and "T" by 1px.

font-kerning: none;
text-kerning: U+69 U+69 2px;

This should increases the default kern value between "i" and "i" by two pixels, but the property is ignored because font-kerning is set to none.

text-kerning: U+66 U+69 -0.1pt;

This decreases the kerning between "f" and "i" by 0.1pt. If the active font contains an "fi" ligature, the kerning pair is ignored.

Note that with this syntax you cannot accumulate kern pairs using multiple declarations. If you had a style block with these two declarations:

text-kerning: U+56 U+41 -0.03em, U+54 U+54 1px;
text-kerning: U+66 U+69 -0.1pt;

then you'd only have the one kern pair defined between "f" and "i" - the two kern pairs in the first declaration would be discarded. To accumulate kern pairs, you'd need to add them to the list of a single declaration.

FWIW, I want to clarify that this proposal is for a CSS property that will ultimately be implemented in browsers and authoring tools.

For the sake of simplicity and readability, what do you think of the option to use actual characters in quotes, such as

text-kerning: "V" "A" -0.02em;

Read two codepoints from a string, allow multiple strings:

  text-kerning: "VA" "WA" "YA" -0.02em;

CSS doesn't have a nice way to accumulate rules other than by cascade:

:kerning("VA") {letter-spacing: -0.02em;}
:kerning("WA") {letter-spacing: -0.02em;}

Like @pornel's idea, but it gets confusing mixing code points and strings if you use space to separate:

text-kerning: U+56 U+41 "WA" -0.03em, "YA" -0.02em;

What about changing the syntax a bit so spaces separate groups and / separates code points:

text-kerning: U+56/U+41 "WA" -0.03em, "Z"/U+41 "YA" -0.02em;

(Or a character other than /, it just worked for highlighting to get the point across.)

Please discuss this on the CSS WG’s mailing list, that’s where spec editors and implementors are: http://lists.w3.org/Archives/Public/www-style/

@bfrohs Syntax with / is nice, but maybe not even necessary—you can also use codepoints in CSS strings: "\56\41".

I second what SimonSapin said above, please take that discussion to www-style so the whole community can contribute. Thanks!

Daniel Glazman, CSS WG Co-chair