1. Characters and Fonts 3

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 WAW 0625; HAMZA UNDER ALEF 0626; HAMZA ON YEH 0627; ALEF 0628; 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-platform support  Better support for international 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. Characters and Fonts 3 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

25. HTML Fonts The HTML Tag   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  Embedded 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 Cascading

28. Style Class A custom set of formatting specifications Examples  h1.decorative {... } h1.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 @font-face { font-family: myfont; src: url(VERDANA1.eot) } a b c d e f g

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. Characters and Fonts 3.2 Hypertext 3

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 … The essence of HTML The tag accepts several attributes, but either the NAME or HREF attribute is required HREF="…" - URL of the linked resource Methods of linking  Relative Go to page 2  Absolute See Yahoo Site 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 tag   Attributes src alt align height width border Linking an image  Image maps TITLE attribute  Staff

37. Intra-Page Links Named anchors  Top of page  Return to top of document.  The glossary defines terms used in the document Product Features Comparison Price Information Product Features

38. Linking to Other Addresses Linking to an e-mail address  Linking to an ftp site  Linking to documents  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/