1. 3 Characters and Fonts

2. Character Sets (code page) • Character sets map abstract characters to bit-patterns • how you store or transmit data • string processing • ASCII • 7-bit • 8-bit • OEM 8-bit characters • Windows ANSI • the lower 128 is identical to ASCII, and the upper 128 is different for each ANSI character set, and is where the various international characters are parked • Unicode / ISO 10646

3. Unicode • Universal character encoding scheme for written characters and text • It uses a 16-bit encoding that provides codes for more than 65,000 characters • Unicode two encoding forms: • a default 16-bit form called UTF-16 • a byte-oriented form called UTF-8 • The Unicode Standard defines codes for characters used in the major languages written today • The Unicode Standard also includes punctuation marks, diacritics, mathematical symbols, technical symbols, arrows, dingbats, etc. • The Unicode Standard, Version 3.0, contains 49,194 characters from the world's scripts

4. … Unicode • There are 7,827 unused code values for future expansion • It also contains 6400 code values that developers can assign internally • Arabic • 0622; MADDA ON ALEF 0623; HAMZA ON ALEF 0624; HAMZA ON WAW0625; HAMZA UNDER ALEF0626; HAMZA ON YEH0627; ALEF0628; BEH… • MIME content type • Text/html; charset = iso-8859-6

5. Fonts • A font is a collection of glyphs, which are small images of character shapes • Fonts may be monospaced or proportionally spaced • Typeface • a set of characters that share common characteristics (Arial, Courier) • Font • the name of a typeface, excluding attributes such as bold or italic • Font family • group of typefaces with similar characteristics: Roman, Swiss, Modern, Script and Decorative • Font character set • the symbols used for each ASCII value: ANSI (Windows character set), Symbol, Unicode

6. Font Technology • Raster fonts • bitmaps • cannot be clearly scaled or rotated • included in operating system as default display typefaces for monitor display • MS Serif, MS Sans Serif, Courier, System, and Terminal (.FON) • Vector fonts • rendered from a mathematical model, each character is defined as a set of lines drawn between points • Plotter fonts • Roman, Modern, and script (.FON) • Outline fonts • stored as mathematical models that define the outline of each character • PostScript (Type 1), TrueType, OpenType

7. Font Attributes • Style • italic, bold, bold italic, and normal • Size • Effect • underlining, strikeout, and color • Spacing • fixed font (e.g. Courier) • pitch: horizontal spacing: 10-pitch equals 12-points • proportional font (e.g. Arial) • Serif and sans serif • Width • normal, condensed, expanded • Kerning C

8. Font Terminology

9. Horizontal Layout • Bounding box • Left side bearing bearingX • Top side bearing bearingY

10. Vertical Layout

11. Kerning • Kerning is the art of character fitting so that the space between characters is visually correct rather proportionally set by the machine • It is 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

12. Ligature • 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 • Word processors and web browsers cannot do this.

13. Postscript Type 1 • Associated with Adobe’s page description language • Oldest and most used in traditional publishing • Originally included on all Macintoshes • Requires add-on to use in Windows 95/98/NT • Adobe Type Manager (ATM) Light for Windows 95/98/NT free from Adobe; also supports Opentype • Windows NT: built-in Postscript to TrueType conversion • Windows 2000/XP handles Postscript fonts natively • Scaleable • Commonly referred to as Type 1 or Postscript

14. TrueType Fonts • Developed for scaleable fonts in Windows • Now in Macs as well • Open technology • Screen and printer fonts: WYSIWYG • Can be scaled and rotated • Arial, Courier New, Times New Roman, Symbol, and Windings (.TTF) • TrueType rasterizer in GDI

15. OpenType Fonts • Union of Adobe/Microsoft type engines; supports Postscript Type 1, TrueType & Opentype • Mac OS X • Windows 2000/XP • Superset of TrueType and Postscript Type 1 formats • Extended character sets using Unicode • Developed jointly by Microsoft and Adobe • It allows fonts to contain: TrueType, PostScript, or both • Goals • broader multi-platformsupport • Better support forinternational character sets • Better protection for font data • Smaller file sizes

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

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

18. Anti-Aliasing • Anti-aliasing should be applied to large fonts

19. Font Editors • FontLab • Macromedia Fontographer • High Logic Font Creator

20. 3 Characters and Fonts 3.1 Layout

21. Markup Language • Markup: instructions that specify how text is to be formatted • Structural: separates a document's appearance from its logical structure • Structural markup languages: SGML, HTML and XML • Document Type Definition (DTD) • defines the set of document elements that make up a class of documents, together with their attributes and the tags that can be used to mark up documents belonging to that class • HTML is defined by an SGML DTD • HTML document elements correspond to simple text components such as paragraphs, headings and lists • HTML also allows documents to be arranged in frames

22. The Difference Between XML and HTML • XML stands for EXtensible Markup Language • XML was designed to describe data and to focus on what data is • XML tags are not predefined in XML, You must define your own tags • XML uses a Document Type Definition (DTD) or an XML Schema to describe the data • XML with a DTD or XML Schema is designed to be self-descriptive • XML is not a replacement for HTML • XML and HTML were designed with different goals: • HTML was designed to display data and to focus on how data looks

23. Web Development • Development • Publishing • URLs • Static and Dynamic Web Pages • Interactive Web Pages • Tools • HTML, XHTML, XML, scripting, applets, ActiveX controls

24. Arabic Web Pages • <html dir="rtl"> • <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

25. HTML Fonts • The HTML <font> Tag • <font face=“arial, helvetica” size=4 color=#0099ff > • face is not an official HTML tag and is supposed to be removed in a future version of HTML • has many problems • you should try to avoid it, and use styles instead • Cascading Style Sheets are the best way to specify fonts and typographic layout within Web pages

26. Style Sheets (CSS) • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one • CSS rules control the appearance of document elements, including the font, color and alignment • rules can also control absolute positioning

27. … Style Sheets (CSS) • Three types • Inline • <p style=font: 13pt arial; color: red; … > • Embedded • <head><style >body { background: #FFFFFF; color: #000000; margin-top: .25in;margin-left: .75in; margin-right: .75in }h1 {font-family: Arial, sans-serif; font-weight: bold; font-size: 12pt;color: #0000FF }P {font: bold 12pt verdana; line-height: 13pt; text-indent:.2in}a:link { color:blue; text-decoration: none }a:visited { color:red; text-decoration: none }a:active { color:red; text-decoration: none } • Linked • mystyle.css • <link rel=stylesheet href=“mystyle.css” type=“text/css”> • Cascading

28. Style Class • A custom set of formatting specifications • Examples • h1.decorative { ... }h1.sans { … } • <h1 class=decorative><h1 class=sans>

29. Typography on the web • Only about half the material that is visible at any one time on a printed page is visible on the web page • The author has less control of the font than in a printed page • The author has less control of the formatting than in the printed page • Different browsers display formatted web pages slightly (and sometime not so slightly) different • Readers tend to scan rather than read • Retention is about 50% less than for the printed page • Scroll bars add a new factor

30. Font Embedding for the Web • Web fonts • Bitstream Technology - the Netscape Solution • Web Embedding Font Technology - the Microsoft Solution • Panose Numbers - the HP solution • MS Web Embedding Fonts Tool "WEFT" • Font objects

31. … Font Embedding for the Web • Subsetting • Per Page • Per Site • Family based (default) • Language • No Subsetting • The code in a page <style TYPE="text/css"> @font-face { font-family: myfont; src: url(VERDANA1.eot) } </style> </head> <body> <font face=myfont size=5> a b c d e f g </font>

32. Adobe Acrobat • Adobe Portable Document Format (PDF) is the open de facto standard for electronic document distribution worldwide • PDF (Portable Document Format) provides a means of distributing documents with their layout intact • PDF is a universal file format that preserves all of the fonts, formatting, colors, and graphics of any source document • You can convert any document to PDF • Free Acrobat Reader • Adobe Acrobat  6.0 • Acrobat Distiller 6.0

33. 3 Characters and Fonts 3.2 Hypertext

34. Hypertext • Nonsequentail navigation • Hypertext is text augmented with links that point to other pieces of text • HTML supports simple uni-directional links using URLs to identify destinations • Hypermedia • Hyperlinks • Navigation in a large hypertext collection is problematical • suitable structures are still undeveloped

35. Linking in HTML • The anchor tag <a> … </a> • The essence of HTML • The <A> tag accepts several attributes, but either the NAME or HREF attribute is required • HREF="…" - URL of the linked resource • Methods of linking • Relative • <a herf="pagetwo.htm"> Go to page 2 </a> • <a herf="Directory2/pagetwo.htm"> Go to page 2 </a> • <a herf=“../default.htm"> Go to page 2 </a> • Absolute • See <a herf="http://www.yahoo.com"> Yahoo Site </a> • Link renderings • a:link { color: red; text-decoration: none } /* unvisited link */ a:visited { color: blue; text-decoration: none } /* visited links */ a:active { color: lime; text-decoration: none } /* active links */a:hover { … }

36. … Linking to Other Web Pages • Text links and image links • The <img> tag • <img src="magic.gif"> • Attributes • src • alt • align • height • width • border • Linking an image • <a herf="help.htm"> <img src="help.gif"> </a> • Image maps • TITLE attribute • <a herf="staff/index.htm" title="Resume and information about our staff">Staff</a>

37. Intra-Page Links • Named anchors • <a name="top"> Top of page </a> • <a href="#top"> Return to top of document.</a> • The <a href="document.htm#glossary"> glossary </a> defines terms used in the document <ul> <li> <a href="#features"> Product Features </a> <li> <a href="#comparison"> Comparison </a> <li> <a href="#price"> Price Information </a> </ul> <p> <a name="features"> <h2> Product Features </h2> </a> <p>

38. Linking to Other Addresses • Linking to an e-mail address • <a href="mailto:…"> • Linking to an ftp site • <a href="ftp://..."> • Linking to documents • <a href="spec.doc"> • <a href="my.ppt"> • <a href="spec.pdf"> • Browser plug-ins

39. Reading List • Check: • http://www.ccse.kfupm.edu.sa/sukairi/swe423/course_resources/3-Charcters and Fonts/ • If you need to learn HTML • http://www.ccse.kfupm.edu.sa/sukairi/swe444/course_resources/2-HTML/