1 / 39

Characters and Fonts

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

mikaia
Download Presentation

Characters and Fonts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

More Related