Stylus Studio XML Editor

Table of contents

Appendices

7.8 Common Font Properties

Common Font Properties

The following common-font-properties all are taken from CSS2. The reference to CSS2 is: http://www.w3.org/TR/REC-CSS2/fonts.html

NOTE: 

Although these properties reference the individual properties in the CSS specification, it is recommended that you read the entire font section of the CSS2 specification.

Fonts and Font Data[top]

Fonts and Font Data

XSL uses an abstract model of a font. This model is described in this section and is based on current font technology as exemplified by the OpenType specification [OpenType] .

A font consists of a collection of glyphs together with the information, the font tables, necessary to use those glyphs to present characters on some medium. A glyph is a recognizable abstract graphic symbol which is independent of any specific design. The combination of the collection of glyphs and the font tables is called the font data.

The font tables include the information necessary to map characters to glyphs, to determine the size of glyph areas and to position the glyph area. Each font table consists of one or more font characteristics, such as the font-weight and font-style.

The geometric font characteristics are expressed in a coordinate system based on the em box. (The em is a relative measure of the height of the glyphs in the font; see [relative.lengths] .) This box that is 1 em high and 1 em wide is called the design space. Points in this design space are expressed in geometric coordinates in terms of fractional units of the em.

The coordinate space of the em box is called the design space coordinate system. For scalable fonts, the curves and lines that are used to draw a glyph are represented using this coordinate system.

NOTE: 

Most often, the (0,0) point in this coordinate system is positioned on the left edge of the em box, but not at the bottom left corner. The Y coordinate of the bottom of a Roman capital letter is usually zero. In addition, the descenders on lower case Roman letters have negative coordinate values.

XSL assumes that the font tables will provide at least three font characteristics: an ascent, a descent and a set of baseline-tables. The coordinate values for these are given in the design space coordinate system. The ascent is given by the vertical coordinate of the top of the em box; the descent is given by the vertical coordinate of the bottom of the em box. The baseline-table is explained below.

The glyphs of a given script are positioned so that a particular point on each glyph, the alignment-point, is aligned with the alignment-points of the other glyphs in that script. The glyphs of different scripts are typically aligned at different points on the glyph. For example, Western glyphs are aligned on the bottoms of the capital letters, certain Indic glyphs (including glyphs from the Devanagari, Gurmukhi and Bengali scripts) are aligned at the top of a horizontal stroke near the top of the glyphs and Far Eastern glyphs are aligned either at the bottom or center of the em box of the glyph. Within a script and within a line of text having a single font-size, the sequence of alignment-points defines, in the inline-progression-direction, a geometric line called a baseline. Western and most other alphabetic and syllabic glyphs are aligned to an "alphabetic" baseline, the above Indic glyphs are aligned to a "hanging" baseline and the Far Eastern glyphs are aligned to an "ideographic" baseline.

Three examples of baselines

This figure shows the vertical position of the alignment-point for alphabetic and many syllabic scripts, illustrated by a Roman "A"; for certain Indic scripts, illustrated by a Gurmukhi syllable "ji"; and for ideographic scripts, illustrated by the ideograhic glyph meaning "country". The thin black rectangle around the ideographic glyph illustrates the em box for that glyph and shows the typical positioning of the "black marks" of the glyph within the em box.

A baseline-table specifies the position of one or more baselines in the design space coordinate system. The function of the baseline table is to facilitate the alignment of different scripts with respect to each other when they are mixed on the same text line. Because the desired relative alignments may depend on which script is dominant in a line (or block), there may be a different baseline table for each script. In addition, different alignment positions are needed for horizontal and vertical writing modes. Therefore, the font may have a set of baseline tables: typically, one or more for horizontal writing-modes and zero or more for vertical writing-modes.

Horizontal and vertical baseline alignment

Examples of horizontal and vertical baseline positions. The thin lined box in each example is the "em box". For the Latin glyphs, only the em box of the first glyph is shown. Example 1 shows typical Latin text written horizontally. This text is positioned relative to the alphabetic baseline, shown in blue. Example 2 shows a typical ideographic glyph positioned on the horizontal ideographic baseline. Note that the em box is positioned differently for these two cases. Examples 3 and 4 show the same set of baselines used in vertical writing. The Latin text, example 3, is shown with a glyph-orientation of 90 degrees which is typical for proportionally space Latin glyphs in vertical writing. Even though the ideographic glyph in example 4 is positioned on the vertical ideographic baseline, because it is centered in the em box, all glyphs with the same em box are centered, vertically, with respect to one another. Additional examples showing the positioning of mixed scripts are given in the introductions to [area-alignment] and [writing-mode-related] .

The font tables for a font include font characteristics for the individual glyphs in the font. XSL assumes that the font tables include, for each glyph in the font, one width value, one alignment-baseline and one alignment-point for the horizontal writing-modes. If vertical writing-modes are supported, then each glyph must have another width value, alignment-baseline and alignment-point for the vertical writing-modes. (Even though it is specified as a width, for vertical writing-modes the width is used in the vertical direction.)

The script to which a glyph belongs determines an alignment-baseline to which the glyph is to be aligned. The position of this baseline in the design space coordinate system determines the default block-progression-direction position of the alignment-point. The inline-progression-direction position of the alignment-point is on the start-edge of the glyph. (These positions are adjusted according to the specifications in [alignment-adjust] when an instance of a glyph is used in an inline or block formatting object. The "space-start" and/or the "space-end" properties of the fo:character that maps to the glyph may be adjusted to effect "kerning" with respect to adjacent glyphs.)

Baseline alignment of glyphs from different scripts

This figure shows glyphs from three different scripts, each with its em box and within the em box, the baseline table applicable to that glyph. The alignment-point of each glyph is shown by an "X" on the start edge of the em box and by making alignment-baseline blue. The baseline-table of the parent formatting object of the characters that mapped to these glyphs is shown as a set of dashed lines.

In addition to the font characteristics required above, a font may also supply substitution and positioning tables that can be used by a formatter to re-order, combine, and position a sequence of glyphs to make one or more composite glyphs. The combination may be as simple as a ligature, or as complex as an Indic syllable which combines, usually with some re-ordering, multiple consonants and vowel glyphs. See [area-linebuild] .

NOTE: 

If the font tables do not define values for required font characteristics, heuristics may be used to approximate these values.

font-family[top]

"font-family"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x73]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
11lefttopInitial: 11lefttopdepends on user agent
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-family" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-family

This property specifies a prioritized list of font family names and/or generic family names. To deal with the problem that a single font may not contain glyphs to display all the characters in a document, or that not all fonts are available on all systems, this property allows authors to specify a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. This list is called a font set.

The generic font family will be used if one or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set.

There are two types of font family names:

<family-name>

The name of a font-family of choice. In the previous example [in the CSS2 Recommendation], "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

<generic-family>

The following generic families are defined: "serif", "sans-serif", "cursive", "fantasy", and "monospace". Please see the section on generic font families for descriptions of these families. Generic font family names are keywords, and therefore must not be quoted.

XSL modifications to the CSS definition:

<string>

The names are syntactically expressed as strings.

NOTE: 

See the expression language for a two-argument "system-font" function that returns a characteristic of a system-font. This may be used, instead of the "font" shorthand, to specify the name of a system-font.

font-selection-strategy[top]

"font-selection-strategy"

XSL Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopauto | character-by-character | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

There is no XSL mechanism to specify a particular font; instead, a selected font is chosen from the fonts available to the User Agent based on a set of selection criteria. The selection criteria are the following font properties: "font-family", "font-style", "font-variant", "font-weight", "font-stretch", and "font-size", plus, for some formatting objects, one or more characters. These characters are called the contextual characters. The contextual characters can be as few as a single character and as many as the entire character complement of the result tree being processed.

Except for the fo:character formatting object, for all other formatting objects where "font-family" applies, the selection criteria consist of the above font properties only. For the fo:character formatting object, the selection criteria are these properties plus either the value of the "character" property of the fo:character alone or that character together with other contextual characters.

The strategy to be followed for selecting a font based on these criteria is specified by the "font-selection-strategy" property.

The "font-family" property is a prioritized list of font family names, which are tried in sequence to find an available font that matches the selection criteria. The font property selection criteria are matched if the corresponding font characteristics match the properties as specified in the property descriptions.

If no matching font is found, a fallback selection is determined in a system-dependent manner.

NOTE: 

This fallback may be to seek a match using a User Agent default "font-family", or it may be a more elaborate fallback strategy where, for example, "Helvetica" would be used as a fallback for "Univers".

If no match has been found for a particular character, there is no selected font and the User Agent should provide a visual indication that a character is not being displayed (for example, using the 'missing character' glyph).

Values of the "font-selection-strategy" property have the following meanings:

auto

The selection criterion given by the contextual characters is used in an implementation defined manner.

NOTE: 

An implementation may, for example, use an algorithm where all characters in the result tree having the same set of font selection property values influence the selection, or it may only use the character property of a single fo:character formatting object for which a font is to be selected. Consider, for example, a case where the available fonts include a font that covers all of Latin, Greek and Cyrillic as well as three better quality fonts that cover those three separately, but match each other badly stylistically. An implementation that takes a larger view for its set of contextual characters may consider the glyph complement to allow the selection of the better font if it covers the glyph complement, but to use the broader font to get a consistent style if the glyph complement is larger than any one of the other fonts can cover.

character-by-character

The set of contextual characters consists of the single character that is the value of the "character" property of the fo:character for which a font is to be selected.

NOTE: 

This selection strategy is the same as the strategy used to select fonts in CSS.

Describes the criteria for selecting fonts and the different strategies for using these criteria to determine a selected font.

font-size[top]

"font-size"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x74]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<absolute-size> | <relative-size> | <length> | <percentage> | inherit
11lefttopInitial: 11lefttopmedium
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes, the computed value is inherited
11lefttopPercentages: 11lefttoprefer to parent element's font size
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-size" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size

This property describes the size of the font when set solid. The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares. Values have the following meanings:

<absolute-size>

An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; if the "medium" font is 12pt, the "large" font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another. Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.

<relative-size>

A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:

[ larger | smaller ]

For example, if the parent element has a font size of "medium", a value of "larger" will make the font size of the current element be "large". If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.

<length>

A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal.

<percentage>

A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in "em's", leads to more robust and cascadable stylesheets.

The actual value of this property may differ from the computed value due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes.

Child elements inherit the computed 'font-size' value (otherwise, the effect of 'font-size-adjust' would compound).

XSL modifications to the CSS definition:

XSL incorporates the following text from CSS2 15.5 ( [http://www.w3.org/TR/REC-CSS2/fonts.html#algorithm"] ) as part of the property definition.

'font-size' must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by 'em' values in other properties, are based on the computed 'font-size' value.

font-stretch[top]

"font-stretch"

CSS2 Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
11lefttopInitial: 11lefttopnormal
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-stretch" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#font-styling

The 'font-stretch' property selects a normal, condensed, or extended face from a font family.

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

Absolute keyword values have the following ordering, from narrowest to widest :

  1. ultra-condensed

  2. extra-condensed

  3. condensed

  4. semi-condensed

  5. normal

  6. semi-expanded

  7. expanded

  8. extra-expanded

  9. ultra-expanded

wider

The relative keyword "wider" sets the value to the next expanded value above the inherited value (while not increasing it above "ultra-expanded").

narrower

The relative keyword "narrower" sets the value to the next condensed value below the inherited value (while not decreasing it below "ultra-condensed").

font-size-adjust[top]

"font-size-adjust"

CSS2 Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<number> | none | inherit
11lefttopInitial: 11lefttopnone
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-size-adjust" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props

In bicameral scripts, the subjective apparent size and legibility of a font are less dependent on their 'font-size' value than on the value of their 'x-height', or, more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters.

For example, the popular font Verdana has an aspect value of 0.58; when Verdana's font size 100 units, its x-height is 58 units. For comparison, Times New Roman has an aspect value of 0.46. Verdana will therefore tend to remain legible at smaller sizes than Times New Roman. Conversely, Verdana will often look 'too big' if substituted for Times New Roman at a chosen size.

This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font. Values have the following meanings:

none

Do not preserve the font's x-height.

<number>

Specifies the aspect value. The number refers to the aspect value of the first choice font. The scaling factor for available fonts is computed according to the following formula:

y(a/a') = c

where:

y="font-size" of first-choice font

a' = aspect value of available font

c="font-size" to apply to available font

This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font.

Font size adjustments take place when computing the actual value of "font-size". Since inheritance is based on the computed value, child elements will inherit unadjusted values.

font-style[top]

"font-style"

CSS2 Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopnormal | italic | oblique | backslant | inherit
11lefttopInitial: 11lefttopnormal
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-style" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#font-styling

The "font-style" property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings:

normal

Specifies a font that is classified as "normal" in the UA's font database.

oblique

Specifies a font that is classified as "oblique" in the UA's font database. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled "oblique" in the font database. A font that is labeled "oblique" in the UA's font database may actually have been generated by electronically slanting a normal font.

italic

Specifies a font that is classified as "italic" in the UA's font database, or, if that is not available, one labeled 'oblique'. Fonts with Italic, Cursive, or Kursiv in their names will typically be labeled "italic".

XSL modifications to the CSS definition:

The following value type has been added for XSL:

backslant

Specifies a font that is classified as "backslant" in the UA's font database.

XSL incorporates the following text from CSS2 15.5 ( [http://www.w3.org/TR/REC-CSS2/fonts.html#algorithm] ) as part of the property definition, except that for XSL the information is obtained from the font tables of the available fonts.

'italic' will be satisfied if there is either a face in the UA's font database labeled with the CSS keyword 'italic' (preferred) or 'oblique'. Otherwise the values must be matched exactly or font-style will fail.

font-variant[top]

"font-variant"

CSS2 Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopnormal | small-caps | inherit
11lefttopInitial: 11lefttopnormal
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-variant" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#font-styling

In a small-caps font, the glyphs for lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The "font-variant" property requests such a font for bicameral (having two cases, as with Roman script). This property has no visible effect for scripts that are unicameral (having only one case, as with most of the world's writing systems). Values have the following meanings:

normal

Specifies a font that is not labeled as a small-caps font.

small-caps

Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font, for example by taking a normal font and replacing the lowercase letters by scaled uppercase characters. As a last resort, unscaled uppercase letter glyphs in a normal font may replace glyphs in a small-caps font so that the text appears in all uppercase letters.

Insofar as this property causes text to be transformed to uppercase, the same considerations as for "text-transform" apply.

XSL modifications to the CSS definition:

XSL incorporates the following text from CSS2 15.5 ( [http://www.w3.org/TR/REC-CSS2/fonts.html#algorithm] ) as part of the property definition.

'normal' matches a font not labeled as 'small-caps'; 'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in which the small caps are synthesized, or (3) a font where all lowercase letters are replaced by uppercase letters. A small-caps font may be synthesized by electronically scaling uppercase letters from a normal font.

font-weight[top]

"font-weight"

CSS2 Definition:

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
11lefttopInitial: 11lefttopnormal
11lefttopApplies to: 11lefttopall elements
11lefttopInherited: 11lefttopyes
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "font-weight" property ] http://www.w3.org/TR/REC-CSS2/fonts.html#font-styling

The "font-weight" property specifies the weight of the font.

normal

Same as "400".

bold

Same as "700".

bolder

Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was "900", in which case the resulting weight is also "900".

lighter

Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was "100", in which case the resulting weight is also "100".

<integer>

These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.

Child elements inherit the computed value of the weight.

XSL modifications to the CSS definition:

XSL incorporates the following text from CSS2 15.5.1 ( [http://www.w3.org/TR/REC-CSS2/fonts.html#q46] ) as part of the property definition.

The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of weights within that family. User agents must map names to values in a way that preserves visual order; a face mapped to a value must not be lighter than faces mapped to lower values. There is no guarantee on how a user agent will map fonts within a family to weight values. However, the following heuristics tell how the assignment is done in typical cases: If the font family already uses a numerical scale with nine values (as e.g., OpenType does), the font weights should be mapped directly.

If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'.

The font labeled "Bold" will often correspond to the weight value '700'.

If there are fewer then 9 weights in the family, the default algorithm for filling the "holes" is as follows. If '500' is unassigned, it will be assigned the same font as '400'. If any of the values '600', '700', '800', or '900' remains unassigned, they are assigned to the same face as the next darker assigned keyword, if any, or the next lighter one otherwise. If any of '300', '200', or '100' remains unassigned, it is assigned to the next lighter assigned keyword, if any, or the next darker otherwise.

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, others may have eight different face weights.