Essential Skills for Computing Fonts André Schappo A.Schappo@lboro.ac.uk

To gain some understanding: Aims To gain some understanding: Fonts The extensive range of characters available Unicode At the end of this lecture students should be able to: Create a simple multi-language web page Essential Skills for Computing

What is this ? 好 Essential Skills for Computing

Terminology depends on context/discipline Could be described as: picture drawing chinese japanese script letter character glyph symbol Terminology depends on context/discipline Essential Skills for Computing

Computer Font A (Computer) Font: is a collection/grouping of characters (Character Set) its characters are (often) related each character has an associated glyph Essential Skills for Computing

A (Computer) Font character: is more a concept than an actuality a character has a consensus agreed label/function/meaning a character can be in many fonts “Exclamation Mark” is a character “Exclamation Mark” is a punctuation character Essential Skills for Computing

Glyphs Glyphs: a glyph is the visual representation/ manifestation of a character the “!” is the glyph for the “Exclamation Mark” character The glyphs of a font have a style (as designed by Font Author) Additional transformation (styling) can be applied by using applications (eg GIMP) Essential Skills for Computing

Otherwise it is “Look and See” Font Naming The character set and/or style is (sometimes) indicated by the font name eg Apple Braille Apple Symbol Hiragino Kaku Gothic Pro (ヒラギノ角ゴ) Edwardian Script ITC Otherwise it is “Look and See” ⾒ Use “Font Book” in Mac OSX to look at these fonts ⾒ Essential Skills for Computing

One Character, Many Fonts The character 好 is in fonts GungSeo Apple LiGothic Hiragino Kaku Osaka Arial Unicode MS .... and more ..... ⾒ Use “Character Palette” in MacOSX to see which fonts contain a character and to see the different styles. ⾒ Essential Skills for Computing

There are many fonts Problem each with its own character set and glyphs What coverage of characters does a computer have? It will certainly not be complete Problem Automatic Font Substitution ie which font to choose for a character Essential Skills for Computing

A font implementation of a “Universal Character Set” The Ideal A “Universal Character Set” that encompasses all characters, including: all natural languages all symbols Braille International Phonetics Alphabet (IPA) ...etc... A font implementation of a “Universal Character Set” Essential Skills for Computing

Available Character Sets There are many Character Sets, each with different character coverage ⾒ ISO-8859-1 ⾒ (Western European) ⾒ ISO-2022-JP ⾒ (Japanese) ⾒ GB2312 ⾒ (Simplified Chinese) ...etc... There are mappings between each Character Set and the font characters Essential Skills for Computing

Unicode is a character set that has extensive coverage, including: Basic Latin Hebrew Tibetan Mathematical Operators Geometric Shapes Hiragana Unihan (hanzi, hanja, kanji) Musical Symbols Braille and much much more Essential Skills for Computing

⾒ http://en.wikipedia.org/wiki/Unicode ⾒ ⾒ http://www.unicode.org/ ⾒ Unicode Info ⾒ Use “Character Palette” in MacOSX to see the Unicode character coverage ⾒ ⾒ http://en.wikipedia.org/wiki/Unicode ⾒ ⾒ http://www.unicode.org/ ⾒ Essential Skills for Computing

Currently there is NO font that contains all the Unicode characters. Unicode Fonts Currently there is NO font that contains all the Unicode characters. Each font contains a subset of Unicode There are two fonts (that I know of) that contain a major part of Unicode. Arial Unicode MS ⾒ http://en.wikipedia.org/wiki/Arial_Unicode_MS ⾒ Code2000 ⾒ http://code2000.net/ ⾒ Essential Skills for Computing

The Unicode Codepoint for 好 is U+597D Unicode Encodings The Unicode Codepoint for 好 is U+597D Different systems use different encodings for 好. Encodings include Unicode UTF-8: E5A5BD (Hexadecimal) Unicode UTF-16: 597D (Hexadecimal) HTML entity: &#22909 ⾒ Use UnicodeChecker to see character encodings ⾒ Essential Skills for Computing

This means that, such an application/system is multi-language capable UTF-8 A UTF-8 capable application/system can display/manipulate/transmit any character from the Unicode character set. This means that, such an application/system is multi-language capable Unicode UTF-8 is becoming a standard. Essential Skills for Computing

Email Systems generally allow for choice of Character Set when sending LU web mail is such a system Generally one should set the default as UTF-8 What happens when an incorrect Character Set is chosen? ⾒ I will demonstrate ⾒ Essential Skills for Computing

Web Pages - Character Sets ⾒ http://lboro.ac.uk/ ⾒ uses ISO-8859-1 ⾒ http://リコー.jp/ ⾒ uses ISO-2022-JP ⾒ UTF-8 Test Page ⾒ uses UTF-8 1 & 2 have constrained character sets 3 can use the full Unicode character set Use Unicode UTF-8 Essential Skills for Computing

Web Safe Fonts ⾒ web safe fonts ⾒ Use fonts that the client machine is likely to have Use Generic Font Families, such as: sans serif cursive serif Arial Unicode MS is a good candidate for a “Web Safe Font” ⾒ web safe fonts ⾒ Essential Skills for Computing

Glyph Safe Machine Glyph Safe Machine Ensure a comprehensive set of fonts that gives complete character coverage Then you will no longer see ▯▯▯▯▯▯ or ��� in your browser/email/word processor ...etc... Essential Skills for Computing

Multi-language/symbol Webpages Setting up a Unicode Webpage Save page as Unicode UTF-8 encoding In the header of your html page include the statement: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> You will now be able to put any Unicode Characters into your html page Whether or not they display correctly is dependent on the client machine. Essential Skills for Computing

The End There are font exercises for you to complete. These exercises will address the issues of Character Sets Client Machine Setup Essential Skills for Computing