bolder/lighter redefinition

Attached below is the wording I propose to simplify the definition of
bolder/lighter in CSS 2.1.  In place of "relative" mappings, I'm
proposing an explicit table of mappings, such that the computed weight
can be calculated independent of the available fonts of the content of
the elements to which the style properties apply.

I've put together a test trunk build of Firefox with the proposed
change.  Mac, Windows and Linux versions can be downloaded here:

  http://tinyurl.com/bolderlightertable

Firefox development builds are labeled "Minefield".  The use of the
bolder/lighter table mapping is on by default but can be disabled using
a preference.  To disable the bolder/lighter table and use existing
bolder/lighter behavior use:

1. Enter about:config in the location bar
2. If a dialog appears, click the button to allow changes
3. In the filter input, enter "layout.use" and hit enter
4. Double-click on "layout.use_bolderlighter_table" to set it to false

[Note: this build will only be available for two weeks.  If you'd like
to test this version after that, contact me directly]

I've put together a set of examples for this.  Since there generally
aren't multi-weight fonts families available on all platforms, I've
created some tests that use both platform fonts and downloadable fonts.

Table of bolder/lighter mappings with different weights
Test font family has 100, 200, 400, 500, 700, 800, 900 weights
http://people.mozilla.org/~jdaggett/bolderlightertable.html

  Rendering of test above using existing Firefox behavior:
  http://people.mozilla.org/~jdaggett/bolderlighterrelative.png

  Rendering of test with proposed mapping table:
  http://people.mozilla.org/~jdaggett/bolderlightertable.png

Testcase testing various font families with actual text:
http://people.mozilla.org/~jdaggett/bolderlightertext.html

  Rendering of test above for family with several weights:
  http://people.mozilla.org/~jdaggett/bolderlightercomparison.png
  
  Rendering of test case for family with light weights
  http://people.mozilla.org/~jdaggett/bolderlighterlightweights.png
  
  Rendering of how nested bolder/lighter
  http://people.mozilla.org/~jdaggett/bolderlighternesting.png
  
In the renderings above, the left reflects current behavior, the right
the proposed behavior (in the nesting example, top is current, bottom is
proposed).

For more background, see the previous threads:

http://lists.w3.org/Archives/Public/www-style/2009May/0145.html

John Daggett
Mozilla Japan

Current definition of bolder/lighter:

CSS 2.1 Fonts (23 April 2009)
http://www.w3.org/TR/2009/CR-CSS2-20090423/fonts.html

> Since the intent of the relative keywords 'bolder' and 'lighter' is to
> darken or lighten the face within the family and because a family may
> not have faces aligned with all the symbolic weight values, the matching
> of 'bolder' is to the next darker face available on the client within
> the family and the matching of 'lighter' is to the next lighter face
> within the family. To be precise, the meaning of the relative keywords
> 'bolder' and 'lighter' is as follows:
> 
> * 'bolder' selects the next weight that is assigned to a font that is
>   darker than the inherited one.
> 
> * 'lighter' is similar, but works in the opposite direction: it selects
>   the next lighter keyword with a different font from the inherited one.
> 
> There is no guarantee that there will be a darker face for each of the
> 'font-weight' values; for example, some fonts may have only a normal and
> a bold face, while others may have eight face weights. There is no
> guarantee on how a UA will map font faces within a family to weight
> values. The only guarantee is that a face of a given value will be no
> less dark than the faces of lighter values.
> 
> Note: A set of nested elements that mix 'bolder' and 'lighter' will give
> unpredictable results depending on the UA, OS, and font availability.
> This behavior will be more precisely defined in CSS3.
> 
> CSS 2.1 does not specify how the computed value of font-weight is
> represented internally or externally.

Proposed revised definition, replacing text above:

> Values of 'bolder' and 'lighter' indicate values relative to the weight
> of the parent element.  Based on the inherited weight value, the weight
> used is calculated using the chart below.  Child elements inherit the
> calculated weight, not a value of 'bolder' or 'lighter'.
> 
>   Inherited value   bolder  lighter
>   100               400     100
>   200               400     100
>   300               400     100
>   400               700     100
>   500               700     100
>   600               900     400
>   700               900     400
>   800               900     700
>   900               900     700
>   
> The table above is equivalent to selecting the next relative bolder or
> lighter face, given a font family containing normal and bold faces along
> with a thin and a heavy face. Authors who desire finer control over the
> exact weight values used for a given element should use numerical values
> instead of relative weights.

Received on Thursday, 4 June 2009 15:17:39 UTC