Chapter 7 Chapter 7 Characters and Fonts Multimedia Systems

Key Points Character sets map abstract characters to bit-patterns. Character sets map abstract characters to bit-patterns. The widely used ASCII character set can only accommodate 96 printable characters. Eight bit extensions to ASCII have been developed, culminating in the ISO 8859 standards. The widely used ASCII character set can only accommodate 96 printable characters. Eight bit extensions to ASCII have been developed, culminating in the ISO 8859 standards. Unicode, which is identical to the 16-bit subset of ISO can, with the use of UTF-16 encoding, represent over a million characters, which is enough for all known languages. Unicode, which is identical to the 16-bit subset of ISO can, with the use of UTF-16 encoding, represent over a million characters, which is enough for all known languages. A font is a collection of glyphs, which are small images of character shapes. A font is a collection of glyphs, which are small images of character shapes. Fonts may be monospaced or proportionally spaced; serifed or sans serif; upright, italic or other shapes; they may vary in width from condensed to extended and in weight from ultra-light to ultra-bold. Fonts may be monospaced or proportionally spaced; serifed or sans serif; upright, italic or other shapes; they may vary in width from condensed to extended and in weight from ultra-light to ultra-bold.

Key Points Fonts may be classified as text or display. Fonts may be classified as text or display. The choice of fonts for multimedia productions must take account of the special requirements of display on a computer monitor. The choice of fonts for multimedia productions must take account of the special requirements of display on a computer monitor. Fonts may use bitmaps or outlines of glyphs. Bitmapped fonts cannot be scaled accurately; outline fonts need special software to render the glyphs on screen. Fonts may use bitmaps or outlines of glyphs. Bitmapped fonts cannot be scaled accurately; outline fonts need special software to render the glyphs on screen. Common outline font formats are Adobe Type1 (PostScript) and TrueType Common outline font formats are Adobe Type1 (PostScript) and TrueType Multiple Master fonts can be used to generate arbitrary instances of a typeface. Multiple Master fonts can be used to generate arbitrary instances of a typeface.

Character Sets Character sets map abstract characters to bit-patterns. Character sets map abstract characters to bit-patterns. Abstract character and its graphic representation Abstract character and its graphic representation Character repertoire Character repertoire Code points (code value) Code points (code value) Each abstract character maps to a code point Each abstract character maps to a code point

ASCII ASCII (American Standard Code for Information Interchange) ASCII (American Standard Code for Information Interchange) 128 code points 128 code points 0-31, 127: control characters 0-31, 127: control characters ISO 646, 1972 ISO 646, bit extension 8-bit extension ISO : ISO Latin 1 ISO : ISO Latin 1 ISO : Latin 2, Eastern European ISO : Latin 2, Eastern European ISO (Cyrillic), (modern Greek) ISO (Cyrillic), (modern Greek) Shortcomings Shortcomings Not achieve universal adoption Not achieve universal adoption 256 is not enough 256 is not enough

ISO Universal Multiple-Octet Coded Character Set (UCS) 32-bit character set 32-bit character set Hypercube, 4-D cube Hypercube, 4-D cube 256 groups 256 groups A group= 256 planes of 256 rows A group= 256 planes of 256 rows A row= 256 characters A row= 256 characters Each character (g, p, r, c) Each character (g, p, r, c) Group g, plane p, row r, and column c Group g, plane p, row r, and column c ISO Latin1= (0, 0, 0, *) ISO Latin1= (0, 0, 0, *) Fig. 7.1 Fig. 7.1

Unicode 16-bit character set 16-bit character set CJK consolidation ( 合併 ) CJK consolidation ( 合併 ) 字太多 字太多 Contemporary major language and classical forms Contemporary major language and classical forms Punctuation marks, technical and mathematical symbols, arrow, dingbats (miscellaneous symbols), … Punctuation marks, technical and mathematical symbols, arrow, dingbats (miscellaneous symbols), … Dingbats Dingbats Point hands, stars Point hands, stars

Unicode (2) 39,000 symbols 39,000 symbols Reserved for UTF-16 expansion Reserved for UTF-16 expansion 6400 code points for private use 6400 code points for private use Not for music notation or other symbolic writing system Not for music notation or other symbolic writing system Basic Multilingual Plane (BMP) Basic Multilingual Plane (BMP) (0, 0, *, *) (0, 0, *, *)

Encoding Quoted-Printable (QP) Quoted-Printable (QP) 8-bit ASCII => 7-bit ASCII 8-bit ASCII => 7-bit ASCII = three bytes = three bytes First byte: ACSII code for = First byte: ACSII code for = Remaining two: hexadecimal digitals Remaining two: hexadecimal digitals MIME content type MIME content type Text/html; charset = iso Text/html; charset = iso

ISO Encoding ISO ISO UCS-4 (4 bytes) UCS-4 (4 bytes) BMP (0, 0, *, *) : top two bytes set to zero BMP (0, 0, *, *) : top two bytes set to zero Universal Character Set Universal Character Set UCS-2 (2 bytes) UCS-2 (2 bytes) Drop top two bytes Drop top two bytes UCS-2 = Unicode UCS-2 = Unicode

Unicode Encoding Three UCS Transformation Formats (UTFs) Three UCS Transformation Formats (UTFs) UTF-7, UTF-8, UTF-16 UTF-7, UTF-8, UTF-16 UTF-8 (8-bit bytes) UTF-8 (8-bit bytes) If their high-order byte is zero, low-order byte a single byte If their high-order byte is zero, low-order byte a single byte Otherwise up to 6 bytes with highest bit = 1 Otherwise up to 6 bytes with highest bit = 1 UTF-7 UTF-7 ~ QP, pure ASCII text ~ QP, pure ASCII text UTF-16 UTF-16 Transforming a subset of the UCS-4 repertoire into pairs of UCS- 2 values from a reserved range Transforming a subset of the UCS-4 repertoire into pairs of UCS- 2 values from a reserved range Access to an extra 15 planes of ISO Access to an extra 15 planes of ISO 10646

UTF-16 UCS-4UTF-16 x< 0x10000 x FFFF y;z; y = ((x ) / 400) + D800 z = ((x ) % 400) + DC00 x >= unmapped

Fonts Glyph as a specific representation of a character A A A A font as a collection of glyphs used for the visual depiction of characters A font is often associated with a set of parameters (size, posture, weight, …) set to certain value

Classification and Choice of Fonts Monospaced & Proportional Monospaced & Proportional Serif & Sans serif Serif & Sans serif Upright shape & Italic shape Upright shape & Italic shape Condensed & Extended Condensed & Extended Weight Weight

Monospaced & Proportional Monospaced (or fixed-width) Monospaced (or fixed-width) Lucida Console Lucida Console Each letter occupies the same amount of horizontal space, so that the text looks as if it was typed on a typewriter. Each letter occupies the same amount of horizontal space, so that the text looks as if it was typed on a typewriter. Proportional Proportional Times New Roman Times New Roman Each letter occupies an amount of horizontal space proportional to the width of the glyph, so that the text looks as if it was printed in a book. Each letter occupies an amount of horizontal space proportional to the width of the glyph, so that the text looks as if it was printed in a book.

Serif & Sans serif Serifs: little stroke Serifs: little stroke MS Reference Serif MS Reference SerifC Sans Serif Font Sans Serif Font Sans: without Sans: without MS Reference Sans Serif MS Reference Sans SerifC

Serifs Difficult to render accurately at low resolutions Difficult to render accurately at low resolutions Hard to read on a computer screen Hard to read on a computer screen Sans Serif fonts are widely used for windows titles and menu entries. Sans Serif fonts are widely used for windows titles and menu entries.

Upright shape & Italic shape Upright: vertical strokes Upright: vertical strokes Italic: slanted to the right (Fig. 7.7) Italic: slanted to the right (Fig. 7.7) Slanted fonts (Fig. 7.8) Slanted fonts (Fig. 7.8) Share the rightward slope of italic fonts but lack their calligraphic ( 書法的 ) quality Share the rightward slope of italic fonts but lack their calligraphic ( 書法的 ) quality Apply a shear transformation to an upright font Apply a shear transformation to an upright font Some italic fonts: handwriting Some italic fonts: handwriting Calligraphic font Calligraphic font

Shapes Outline fonts Outline fonts Hollow fonts Hollow fonts Fonts with drop shadows Fonts with drop shadows Condensed fonts Condensed fonts Extended fonts Extended fonts Weight Weight Boldface (bold) Boldface (bold) Ultra-bold, semi-bold, light, ultra-light Ultra-bold, semi-bold, light, ultra-light Reserved for Headings Reserved for Headings Never use boldface for emphasis, always italics Never use boldface for emphasis, always italics Italic text renders badly at low resolutions => Bold text Italic text renders badly at low resolutions => Bold text

Families Atalic version, bold version of an upright font Atalic version, bold version of an upright font Group in to a family Group in to a family Lucida Bright family = 20 fonts Lucida Bright family = 20 fonts When fonts from different families are combined, their differences can be very noticeable (Fig. 7.12) => Carefully avoided When fonts from different families are combined, their differences can be very noticeable (Fig. 7.12) => Carefully avoided

Text & Display Text: for continuous text Text: for continuous text Unobtrusive ( 不突出 ) Unobtrusive ( 不突出 ) Problematical: low resolution of monitors Problematical: low resolution of monitors Text for display: 60% larger Text for display: 60% larger Display: heading, signs or advertising slogans on poster Display: heading, signs or advertising slogans on poster Short message Short message Eye-catching Eye-catching Fig Fig. 7.13

Desktop publishing (DTP): printing on paper Desktop publishing (DTP): printing on paper No control over fonts that will be used when text is finally displayed No control over fonts that will be used when text is finally displayed Software used for display may let users override the original fonts with those of their own choosing. Software used for display may let users override the original fonts with those of their own choosing. Most fonts’ repertoires consist of the letters from some alphabet. Most fonts’ repertoires consist of the letters from some alphabet. Not include lower case letters Not include lower case letters Mathematical symbols are usually grouped into their own fonts, knows as symbol fonts or pi fonts. Mathematical symbols are usually grouped into their own fonts, knows as symbol fonts or pi fonts.

Font Measurement Absolute length units Absolute length units points (pt) points (pt) 1/72 inch = mm 1/72 inch = mm picas (pc) picas (pc) 12 point = mm 12 point = mm Relative length units Relative length units ex units (ex) ex units (ex) X-height X-height em units (em) em units (em) The width of a capital letter M The width of a capital letter M one ex is equal to one-half em one ex is equal to one-half em

Font Terminology

Horizontal Layout Bounding box Bounding box Left side bearing bearingX Left side bearing bearingX Top side bearing bearingY Top side bearing bearingY

Vertical Layout

Kerning Kerning is the art of character fitting so that the space between characters is visually correct rather proportionally set by the machine. Kerning is the art of character fitting so that the space between characters is visually correct rather proportionally set by the machine. Most often recommended in headlines, and larger settings of type, it's the art of carefully moving characters together so the word looks and reads better without holes within the word. Most often recommended in headlines, and larger settings of type, it's the art of carefully moving characters together so the word looks and reads better without holes within the word. Good cases are: Ta, To, Wo, Po or other situations where a hole is formed by a wide portion of a letter. Good cases are: Ta, To, Wo, Po or other situations where a hole is formed by a wide portion of a letter.

Ligature A ligature ( 連字體 ) is a set of two or more characters that have been designed into a harmonious "set". A ligature ( 連字體 ) is a set of two or more characters that have been designed into a harmonious "set". Kerning, ligatures: High-quality text layout software Kerning, ligatures: High-quality text layout software Word processors and web browsers cannot do this. Word processors and web browsers cannot do this.

Bitmap Fonts Bitmap Fonts Bitmap Fonts Bitmap fonts are by nature pre-rasterized, they render very quickly, making them a good choice where speed is important. Bitmap fonts are by nature pre-rasterized, they render very quickly, making them a good choice where speed is important. Cannot be scaled gracefully Cannot be scaled gracefully Each platform has its own native Bitmapped font format. Each platform has its own native Bitmapped font format.

Outline Fonts Outline Fonts Outline Fonts Outline fonts describe the character outlines with a combination of control points and curves. Outline fonts describe the character outlines with a combination of control points and curves. Cross-plateform Cross-plateform Adobe type 1 (PostScript fonts), TrueType Adobe type 1 (PostScript fonts), TrueType Scaled arbitrarily Scaled arbitrarily The same font for display and printing. The same font for display and printing. Adobe type manager (ATM): Adobe type 1 Adobe type manager (ATM): Adobe type 1

TrueType & PostScript TrueType: quadratic ( 二次 ) curves TrueType: quadratic ( 二次 ) curves PostScript: cubic Bezier curves PostScript: cubic Bezier curves TrueType font is stored as a series of points which define the lines and curves making up its shape. TrueType font is stored as a series of points which define the lines and curves making up its shape. OpenType unifies Type 1 and TrueType OpenType unifies Type 1 and TrueType

Hints and Instruction Extra information for low resolutions Extra information for low resolutions Type 1: hints Type 1: hints TrueType: instruction TrueType: instruction

ClearType Windows XP ClearType delivers improved font display resolution over traditional anti-aliasing. Windows XP ClearType delivers improved font display resolution over traditional anti-aliasing. It improves readability on color LCD monitors with a digital interface. It improves readability on color LCD monitors with a digital interface. Readability on CRT screens can also be somewhat improved. Readability on CRT screens can also be somewhat improved.

ClearType This is a picture of ClearType under extreme magnification, with the sub-pixels of an LCD explicitly rendered to show the structure of the ClearType letterforms. This is a picture of ClearType under extreme magnification, with the sub-pixels of an LCD explicitly rendered to show the structure of the ClearType letterforms.

Anti-Aliasing Fig Fig Anti-aliasing should be applied to large fonts. Anti-aliasing should be applied to large fonts.

Multiple Master Fonts A new development A new development Medium weight font might lie half-way between ultra-bold and ultra-light glyphs Medium weight font might lie half-way between ultra-bold and ultra-light glyphs 4 Design axes: weight, width, optical size, serif style 4 Design axes: weight, width, optical size, serif style Fig 7.19: 3 design axis Fig 7.19: 3 design axis A partial answer to font substitution problem A partial answer to font substitution problem