Skip to content

Commit f041c3e

Browse files
author
litherum
committed
[css-fonts-4] Update color fonts support according to CSSWG resolution during 2017 Seattle F2F
Resolution was to migrate from @palette-entries in @font-feature-values to a new @font-palette-values property.
1 parent 91afb79 commit f041c3e

1 file changed

Lines changed: 141 additions & 32 deletions

File tree

‎css-fonts-4/Overview.bs‎

Lines changed: 141 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,42 +1376,151 @@ at least as dark as its predecessor. Only values between 1 - 999 are valid, and
13761376
the "from" values of the animation are swapped to the "to" values at an unspecified time during
13771377
the animation.
13781378

1379+
<h2 id="color-font-support">Color Font Support</h2>
1380+
1381+
Color fonts allow for font files to describe not just the contours describing the edges of glyphs, but also the colors present inside the glyphs.
1382+
1383+
Issue: Add a picture.
1384+
1385+
<h3 id="font-palette-prop">Controlling Color Font Palettes: The 'font-palette' property</h3>
1386+
1387+
Many color font file formats allow colors within glyphs to be parameterized. In these fonts, colors are referenced by index when describing the geometry of each glyph. These indices are resolved within a current active palette using a lookup table present inside the font. However, many fonts contain multiple palettes, each containing a set of complimentary colors chosen by the font designer to provide pleasing visual results.
1388+
1389+
<pre class="propdef">
1390+
Name: font-palette
1391+
Value: normal | light | dark | <<palette-identifier>>
1392+
Initial: normal
1393+
Applies to: all elements
1394+
Inherited: yes
1395+
Percentages: N/a
1396+
Computed value: As specified
1397+
Media: visual
1398+
Animatable: No (see below)
1399+
</pre>
1400+
1401+
<dl dfn-for=font-palette dfn-type=value>
1402+
<dt><dfn>normal</dfn></dt>
1403+
<dd>
1404+
User-Agents attempt to treat the color font as closely as possible to a non-color font. In particular, user-agents use a palette which will yield the best default result for reading. User-agents may take the computed value of the 'color' property into consideration when making this decision. User agents may also construct and use a palette not defined in the font.
1405+
</dd>
1406+
1407+
<dt><dfn>light</dfn></dt>
1408+
<dd>
1409+
Some color font formats include metadata marking certain palettes as applicable on a light (close to white) background. This keyword causes the user-agent to use the first available palette in the font file marked this way. If the font file format does not account for this metadata, or no palette in the font is marked this way, this value behaves as 'normal'.
1410+
</dd>
1411+
1412+
<dt><dfn>dark</dfn></dt>
1413+
<dd>
1414+
Some color font formats include metadata marking certain palettes as applicable on a dark (close to black) background. This keyword causes the user-agent to use the first available palette in the font file marked this way. If the font file format does not account for this metadata, or no palette in the font is marked this way, this value behaves as 'normal'.
1415+
</dd>
1416+
1417+
<dt><dfn><<palette-identifier>></dfn></dt>
1418+
<dd>
1419+
This value identifies an author-define palette to use. Users can define a palette by using the '@font-palette-values' rule. If no applicable '@font-palette-values' rule is present, this value behaves as 'normal'.
1420+
</dd>
1421+
</dl>
1422+
1423+
Issue: Add examples and pictures.
1424+
1425+
<h3 id="font-palette-values">User-defined font color palettes: The '@font-palette-values' rule</h3>
1426+
1427+
The '@font-palette-values' rule defines a color palette and associates that color palette with a specific font. This allows a web author to select arbitrary colors to use inside a color font rather than being limited to the preexisting palettes inside font files. In addition, this rule's association with a specific font allows a name of a palette to apply differently to different fonts, which allows similar colors to be used across multiple fonts when multiple fonts are used in an element (i.e. for font fallback). A web author may wish to create multiple palettes for a single font in order to create multiple themes for their web content. A web author may also wish to create matching palettes for multiple fonts to achieve a consistent design across a collection of different fonts.
1428+
1429+
A '@font-palette-values' rule represents a palette of colors used in a font. A palette consists of an ordered collection of colors. Using the '@font-palette-values' allows a web author to reference a palette existing within a font as well as creating a palette populated with author-defined colors. In addition, it allows overriding a set of colors from a palette in the font with colors described by the web author.
1430+
1431+
The '@font-palette-values' rule consists of the '@font-palette-values' at-keyword followed by a block of descriptor declarations. In terms of the grammar, this specification defines the following productions:
1432+
1433+
<pre><dfn>font_palette_values_rule</dfn>
1434+
: <i>FONT_PALETTE_VALUES_SYM</i> <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>descriptor_declaration</i>? [ ';' <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>descriptor_declaration</i>? ]* '}' <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
1435+
;
1436+
1437+
<dfn>descriptor_declaration</dfn>
1438+
: <a href="https://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="https://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a>
1439+
;</pre>
1440+
1441+
<p>The following new token is introduced:</p>
1442+
1443+
<pre>@{F}{O}{N}{T}{-}{P}{A}{L}{E}{T}{T}{E}{-}{V}{A}{L}{U}{E}{S} {return <dfn>FONT_PALETTE_VALUES_SYM</dfn>;}</pre>
1444+
1445+
<div class="example">
1446+
<p>Modify Handover Sans's color palette</p>
1447+
<pre>@font-palette-values Augusta {
1448+
1449+
font-family: Handover Sans;
1450+
base-palette: 3;
1451+
1: rgb(43, 12, 9);
1452+
3: var(--highlight);
1453+
}</pre>
1454+
</div>
1455+
1456+
The presence of a particular descriptor within in '@font-palette-values' has semantic meaning; missing descriptors are not filled in with default values. These descriptors apply solely within the context of the @font-palette-values rule in which they are defined, and do not apply to document language elements. When a given descriptor occurs multiple times in a given '@font-palette-values' rule, only the last descriptor declaration is used and all prior declarations for that descriptor are ignored.
1457+
1458+
A given set of '@font-palette-values' rules define which author-defined palettes are available for use within the documents that contain these rules.
1459+
1460+
An author-defined font color palette is only available to the documents that reference it. Using an author-defined color palette outside of the documents that reference it would constitute a security leak since the contents of one page would be able to affect other pages, something an attacker could use as an attack vector.
1461+
1462+
This at-rule follows the forward-compatible parsing rules of CSS. Like properties in a declaration block, declarations of any descriptors that are not supported by the user agent must be ignored. @font-palette-values rules require a font-family descriptor; if it is missing, the @font-palette-values rule is invalid and must be ignored entirely.
1463+
1464+
In cases where user agents have limited platform resources, do not implement support for color fonts, or implement the ability to disable color fonts, '@font-palette-values' rules must simply be ignored; the behavior of individual descriptors as defined in this specification should not be altered.
1465+
1466+
<h3 id="font-family-desc">Font family: the 'font-family' descriptor</h3>
1467+
1468+
<pre class='descdef mq'>
1469+
Name: font-family
1470+
Value: <<font-family>>
1471+
For: @font-palette-values
1472+
</pre>
1473+
1474+
This descriptor defines the font family name that this palette applies to. This palette will only ever be applied to the font with this name. The value of this descriptor matches the definition of the <<family-name>> for the 'font-family' property. This means that only named font families are allowed and rules that including generic or system fonts in the list of font families are syntax errors. If syntax errors occur within the font family list, the entire rule must be ignored.
1475+
1476+
<h3 id="base-palette-desc">Specifying the base palette: the 'base-palette' descriptor</h3>
1477+
1478+
<pre class='descdef mq'>
1479+
Name: base-palette
1480+
Value: <<integer>>
1481+
For: @font-palette-values
1482+
</pre>
1483+
1484+
This descriptor specifies a palette in the font which the containing '@font-palette-values' rule uses as an initial value. If no <<integer>> keys are present in the '@font-palette-values' rule, then the '@font-palette-values' rule represents the palette in the font with the same index as the value of this descriptor. If <<integer>> keys are present in the '@font-palette-values' rule, each one of those descriptors overrides a single color in the color palette represented by this '@font-palette-values' block.
1485+
1486+
<div class="example">
1487+
<p>Rename Handover Sans's 3rd color palette</p>
1488+
<pre>@font-palette-values Augusta {
1489+
1490+
font-family: Handover Sans;
1491+
base-palette: 3;
1492+
}</pre>
1493+
</div>
1494+
1495+
If this descriptor is not present in the '@font-palette-values', a value of 0 is used. If the font does not contain a palette at the index of the value of 'base-palette', a value of 0 is used. If a font does not contain any color palettes, no colors are included in the initial color palette represented by this '@font-palette-values' rule. Colors can be added to the color palette by using the <<integer>> descriptor in the '@font-palette-values' rule.
1496+
1497+
<h3 id="palette-integer-desc">Overriding a color in the palette: The <<integer>> descriptor</h3>
1498+
1499+
<pre class='descdef mq'>
1500+
Name: <<integer>>
1501+
Value: <<color>>
1502+
For: @font-palette-values
1503+
</pre>
1504+
1505+
This descriptor overrides or adds a color to the initial color palette represented by this '@font-palette-values' rule. If the initial color palette represented by the '@font-palette-values' rule (i.e. by using the 'base-palette' descriptor) already includes a color at the index of this descriptor's key, that color is overwritten by the color specified in this descriptor's value. Otherwise, a new color is added to this color palette at the index of this descriptor's key.
1506+
1507+
<div class="example">
1508+
<p>Create a new color palette for Handover Sans</p>
1509+
<pre>@font-palette-values Augusta {
1510+
1511+
font-family: Handover Sans;
1512+
1: rgb(43, 12, 9);
1513+
2: rgb(208, 112, 96);
1514+
3: var(--highlight);
1515+
}</pre>
1516+
</div>
1517+
1518+
Using CSS Variables is explicitly expected to be valid in the value of this descriptor. Using CSS Variables is disallowed in the key of this descriptor. CSS Variables are resolved in the context of the element to which the 'font-palette' property applies. This means that using 'font-palette' with the same value on two different elements may result in different used palettes because the value of variables inside the '@font-palette-values' rule may apply differently in the context of those two elements.
1519+
13791520
<h2 id="platform-props-to-css" class="no-num">Appendix A: Mapping platform font properties to CSS properties</h2>
13801521

13811522
Issue: Import from level 3
13821523

1383-
<h2 id="font-palette-control">Controlling font palette colors</h2>
1384-
1385-
<div>
1386-
Resolved at 2015 Sydney to add font-palette control.
1387-
<a href="https://lists.w3.org/Archives/Public/www-style/2015Feb/0211.html">Original proposal</a>.
1388-
1389-
Details: multicolor fonts now exist.
1390-
They expose several "palette indexes" that can be given different colors.
1391-
They might also expose predefined palettes.
1392-
We want to be able to tell the browser to use a predefined palette,
1393-
or to provide our own colors for a palette.
1394-
1395-
Final proposal is:
1396-
1397-
1. Add a 'font-palette' property. For now the grammar is just:
1398-
1399-
<pre class=prod><<integer>> | light | dark | <<named-palette-color>>#</pre>
1400-
1401-
with <<integer>> selecting the nth palette in the font,
1402-
and ''light'' and ''dark'' selecting the first palette designated "light" or "dark"
1403-
(this is metadata that's already part of the format).
1404-
If there's any font fallback, the fallback fonts don't use a palette.
1405-
2. Add ''@palette-entries'' to ''@font-feature-values'',
1406-
with the name of each declaration defining a name for a particular palette color,
1407-
and the value being an integer for the index of that palette color.
1408-
<<named-palette-color>> is <code><<ident>> <<color>></code>.
1409-
Any palette colors not given an explicit value default to value of 'color'
1410-
(so by default it just renders solidly with 'color' value, as normal).
1411-
If a palette color name occurs more than once, the last one wins
1412-
(so you can declare a palette in a variable, and override bits as desired).
1413-
</div>
1414-
14151524
<h2 id="min-max-font-size">Minimum and maximum <code>font-size</code></h2>
14161525

14171526
<p>Define new properties to control the minimum and maximum font-size,

0 commit comments

Comments
 (0)