Advanced Css-2 topics

CSS 2 - advanced topics

@font-face - continued

The example on the previous page is very simple, but it is possible to specify everything about a font - font-style, font-weight, font-variant, font-size and font-stretch.

These follow the same syntax as the normal properties, except font-style takes a comma-delimited list of the font's available styles or all (initial). Font-variant can be 'normal' (initial), 'small-caps', 'normal, small-caps', or 'small-caps, normal'. Font-weight takes a comma-delimited list of available weights or all (initial). Font-stretch takes a comma-delimited list of types or all. Normal is the initial value. Font-size takes all (initial), or one or more comma-delimited absolute lengths.

Thus you can specify the url for the small-caps version of your font, etc.

unicode-range property

E.g. unicode-range: U+0-1F, U+10C-F*. The syntax of this is the literal string 'U+' followed by a hexadecimal number (the start of the range), a dash and a hexadecimal number (the end of the range). Wildcard characters ? (indicates any value for that digit) and * (indicates any number of digits with any value) are permissible. The initial value for this is U+0-7FFFFFFF. The purpose of this property is to inform the browser if a character is missing from the font.

src

The src property takes this syntax: src: url(address1), url(address2) format.

Valid would be src: local("Arial Black"), url (http://FT300/ft300) format("truetype"), indicating an address and type of the font if it is not available locally. The type is designed to save a fruitless download if the browser does not support the font. The purpose of the local keyword is to specify a local font to save download time - thus you could specify Arial Black as the bold Arial font, and failing that get it downloaded.

panose-1

This is followed by exactly 10 decimal integers. This indicates the font's panose number for font matching.

units-per-em

In addition, units-per-em is a valid property, which takes a number. This property indicates the number of units that the em square is divided into. Typical values include 2048 (Truetype) and 250 (Intellifont). Once declared, a unit that requires it will divide by this value to get the true measurement. E.g. stemh: 200 would divided by units-per-em to get the true height.

stemv and stemh

This indicates the font's vertical (horizontal with stemh) stem width as a number. If declared, units-per-em must be declared.

slope

This specifies the vertical slope angle, and is intially 0.


Also valid are cap-height, x-height (essential if font-size-adjust is used), ascentL, descent = the uppercase font height/x height/max unaccented font height/max unaccented font depth. If declared, units-per-em must be declared.

Font synthesising

This provides an approximation of a font whilst the real one is being downloaded. This means that when the real one is downloaded, it will not be necessary to completely redraw the page. Essential are widths and bbox.

widths

Here you specify a unicode range followed by a number for the widths of the glyph. E.g. widths: U+1* 1490. Or widths: U+1-3 1200 1456 1357, U+1? 1167.

If not enough glyph widths are provided, the last in the list is assumed to cover all omitted values. If urange is omitted, U+0-7FFFFFFF is implied.

If declared, units-per-em must be declared.

bbox

This is used to specify the maximal bounding box of the font. It is exactly four comma-delimited numbers specifying lower left x, lower left y, upper right x, upper right y in that order of the font.

definition-src

This provides the url of a separate font definition resource so that if multiple stylesheets use the same definition, download time is reduced.

baseline

This is specified as a number, initially 0 that describes the lower baseline (used for alignment in Latin, Greek, and Cyrillic fonts) of a font. It is the position in the em square, and as such if declared, so must units-per-em.

centerline

This defines the central baseline (used for alignment in ideographic scripts) of the font, as a number. It is the position in the em square, and as such if declared, so must units-per-em.

mathline

This defines the mathematical baseline (used for alignment in mathematical fonts) of the font, and if undefined equals baseline. It is the position in the em square, and as such if declared, so must units-per-em.

topline

This defines the top baseline of a font (used for alignment in Sanscrit-based fonts). It is the position in the em square, and as such if declared, so must units-per-em.


Aural stylesheets

Volume

This takes any number between 0 and 100, where 0 is the minimum audible level, and 100 the maximum comfortable level. Volume is inherited, and can be specified as a percentage of the inherited value. Also valid are the keywords silent, x-soft (equivalent to 0), soft (=25), medium (=50), loud (=75), x-loud (=100).

Speak

Valid keywords are none (don't speak - different from volume: silent insofar as volume: silent is actually spoken and takes up the time that this would take, where as speak: none is completely ignored), normal, and spell-out (one letter at a time). Speak is inherited

Speech-rate

This specifies the number of words per minute as a number or as x-slow (=80 wpm), slow (120 wpm), medium (=200 wpm), fast (=300 wpm), x-fast (500wpm), faster (40 wpm faster than the current rate), slower (40 wpm slower). It is inherited and is initially medium.

Pause-before, pause-after

These can be specified as a time or as a percentage of the time it takes to speak one word. For example, speech-rate: 240 wpm = 0.25 s/word, so pause-before: 10% = 0.025s = 25ms. Percentages are recommended because of large possible changes in speech-rate. It refers to the pause before/after speaking an element. They are not inherited.

Pause

If one value is specified for this shortcut, it applies to both before and after. If two values are specified, the first one applies to before and the second to after.

Cue-before, cue-after

This specifies the url of an audio file to play before speaking the element. It can also be set to the keyword none (initial value). E.g. cue-before: url(dingdong.wav). It is not inherited.

Cue

If one value is specified for this shortcut, it applies to both before and after. If two values are specified, the first one applies to before and the second to after.

Play-during

This specifies a background sound to be played simultaneously. It is not inherited.

In addition to a url, either mix or repeat or mix repeat may be specified. Mix causes the parent's background to continue playing mixed with it. If mix is not specified, the element's background sound replaces the parents. Repeat overrides the default behaviour of playing only once and repeats it for all the time that the element is spoken. E.g. play-during: url(hello.mid) mix repeat;

As an alternative, auto (initial value - causing any parent background sound to continue) or none (stop all parent background but continue it when the element has finished being spoken) can be specified.

Azimuth

This is specified as an angle between -360deg and 360 deg, which refers to the voice's position in the sound stage. 0deg means to the centre of the sound stage, 90deg to the right of the sound stage, 180deg to the back of the sound stage, and 270deg (equivalent to -90def) to the left. Alternatively a keyword can be specified as one of left-side (=270deg), far-left (=300deg), left (=320deg), center-left (340deg), center (0deg), center-right (20deg), right (40deg), far-right (60deg), right-side (90deg). In addition, a relative keyword can be specified as leftwards (subtract 20deg from the current angle) or rightwards (add 20deg to the current angle). Azimuth is inherited. E.g. azimuth: center-left. In addition to specifiying one of the keywords, behind may be specified. This has the effect of changing the angle: left-side (270deg), far-left (=240deg), left (=220deg), center-left (200deg), center (180deg), center-right (160deg), right (140deg), far-right (120deg), right-side (90deg). E.g. azimuth: center-left behind.

Elevation

This is inherited, and takes an angle between -90 and 90deg. 0deg is level with the listener, 90deg is directly overhead, and -90deg directly below. Alternatively, a keyword can be specified: below (-90deg), level (0deg), above (90deg) or higher (add 10deg) or lower (subtract 10deg).

Voice-family

This is a comma delimited list of voices, possibly including a generic voice-family (can be male, female or child). E.g. voice-family: "Julia Roberts", actress, female.

Pitch

This can be specified as a frequency, x-low, low, medium, high or x-high. The average male frequency is 120Hz, and 210Hz for females. Pitch is inherited.

Pitch-range

This indicates the inflection. Valid values are any number between 0 and 100, where 0 is monotonic and 50 is normal. Pitch-range is inherited.

Stress

This indicates the amount of stress given to stressed parts of sentences. Valid values are numbers between 0 and 100, where 50 is the initial value. Stress is inherited.

Richness

This indicates the brightness of the voice. Valid values are numbers between 0 and 100, where 50 is the initial value. Higher values give a voice greater 'carry', but lower values make it softer. Richness is inherited.

Speak-punctuation

This can be set to code (i.e. speak the punctuation marks literally) or none (initial). It is inherited.

Speak-numeral

This can be set to digits (speak 123 as one two three) or continuous (initial - 123 = one hundred and twenty three).