2.0-CSC441-Elements-of-Multimedia-Text (1).pdf

CSC441 ELEMENTS OF MULTIMEDIA TEXT Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Character Sets Texts and Graphics Text Layout using HTML & CSS 2 Fonts Layout Important of Text CHARACTER SETS • Abstract characters are grouped into alph...

CSC441 ELEMENTS OF MULTIMEDIA TEXT Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Character Sets Texts and Graphics Text Layout using HTML & CSS 2 Fonts Layout Important of Text CHARACTER SETS • Abstract characters are grouped into alphabets • Any set of distinct symbols, usually forming the basis of written language • A character set is a mapping between the characters of some alphabet (its characterrepertoire) and bit patterns • For each character in its repertoire, acharacter set defines a code value, belonging to its set of code points 3 TYPE OF CHARACTER SETS Character sets https://www.edn.com/how-it-was-ascii-ebcdic-iso-and-unicode/ 4 American Standard Code for Information Interchange ASCII 7 bits for each code value, hence 128 code points EBCDIC 8-bit Character Sets Extended Binary Coded Decimal Interchange Code is an eight-bit character encoding used mainly on IBM mainframe and IBM midrange computer operating systems ISO 8859 ISO 8859 is a multi-part standard which defines a collection of character sets, each designed to accommodate the needs of a group of related languages FONTS • Visual representation of a character is called a glyph. • In typography, a glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing. • Glyphs are arranged into collections called fonts. • Fonts are stored in specified locations on a computer system, may be embedded in documents 5 CLASSIFICATION OF FONTS • Spacing: monospaced (fixed width)/proportional • Serifs: serifed/sans serif • Serifs are the small strokes added to the ends of character shapes in conventional book fonts • Shape: upright/italic/slanted • Slant is a vertical shear effect, italic uses different glyph shapes with a slant 6 CHOICE OF FONTS • Text fonts – suitable for continuous text (e.g. body of a book or article) • Must be unobtrusive, easy to read • Display fonts – suitable for isolated pieces of short text (e.g. headings, signs or slogans) • Intention is to get a short message across, so eye-catching design that would be inappropriate for continuous text is OK. 7 FONTS FOR MULTIMEDIA • Text fonts may be problematical • Low resolution of computer displays leads to loss of details (e.g. fine serifs) and distortion of letter shapes. • Use larger sizes than in print, prefer sans serif, use fonts such as Arial and Verdana designed to be readable at low resolution • Display fonts work better and may be suitable for small pieces of continuous text 8 UNDERSTANDING FONTS AND TYPEFACES • A typeface is a family of graphic characters, often with many type sizes and styles. • E.g. Verdana, Impact, Times New Roman • A font is a collection of characters of a single size and style belonging to a particular typeface family. • E.g. Verdana 20-point Bold Italic, Courier 18-point underlined UNDERSTANDING FONTS AND TYPEFACES (CONTINUED) • The study of fonts and typefaces includes the following: – Font styles – Font sizes – Cases – Serif versus sans serif UNDERSTANDING FONTS AND TYPEFACES (CONTINUED) • Font styles include: Boldface Italic Underlining UNDERSTANDING FONTS AND TYPEFACES (CONTINUED) • Font sizes – Font size is measured in points. – Character metrics are the general measurements applied to individual characters. – Points: 1pt = 1/72" = 0.3528mm – Exact size is not standard; 1/72" is invariably used by computer systems – Kerning is the spacing between character pairs. – Leading is the space between lines. KERNING the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. TRACKING • The consistent degree of increase (or sometimes decrease) of space between letters to affect density in a line or block of text. UNDERSTANDING FONTS AND TYPEFACES (CONTINUED) • Cases – A CAPITALIZED letter is referred to as UPPERCASE, while a small letter is referred to as lowercase. – Placing an uppercase letter in the middle of a word is referred to as an intercap (e.g. WorldWideWeb, GlaxoSmithKline). UNDERSTANDING FONTS AND TYPEFACES (CONTINUED) • Serif versus sans serif – A serif is the little decoration at the end of a letter stroke. – Serif fonts are used for body text (e.g. Times New Roman, Century, Bookman, Palatino). – Sans serif fonts do not have a serif at the end of a letter stroke (e.g. Arial, Tahoma, Verdana). – These fonts are used for headlines and bold statements. FONT TERMINOLOGY • Baseline – the line on which the bases of characters are arranged • Leading – the distance between successive baselines • x-height – the distance between the baseline and the top of a lower-case letter x • Ascenders/descenders – strokes that rise above the x-height/drop below the baseline 17 TEXT IN GRAPHICS • The text elements used in multimedia are: 1. Menus for navigation 2. Interactive buttons 3. Fields for reading 4. HTML documents 5. Symbols and icons 18 1. MENUS FOR NAVIGATION • A user navigates through content using a menu. • A simple menu consists of a text list of topics. 19 2. INTERACTIVE BUTTONS • A button is a clickable object that executes a command when activated. • Users can create their own buttons from bitmaps and graphics. • The design and labeling of the buttons should be treated as an industrial art project. 20 3. FIELDS FOR READING • Reading a hard copy is easier and faster than reading from the computer screen. • A document can be printed in one of two orientations: portrait or landscape. • The taller-than-wide orientation used for printing documents is called portrait. • The wider-than-tall orientation that is normal to monitors is called landscape. 21 4. HTML DOCUMENTS • HTML stands for Hypertext Markup Language. • HTML documents are marked using tags. • An advanced form of HTML is DHTML. • DHTML stands for Dynamic Hypertext Markup Language. • DHTML uses Cascading Style Sheets (CSS). – The <B> tag for making text boldfaced – The <OL> tag for creating an ordered list – The <IMG> tag for inserting images 22 5. SYMBOLS AND ICONS • Symbols and icons – Symbols are concentrated text in the form of stand-alone graphic constructs. – They are used to convey meaningful messages. – Symbols used to convey human emotions are called emoticons. – Icons are symbolic representations of objects and processes. 23 CHOOSING TEXT FONTS – Consider legibility and readability. – Avoid too many faces. – Use color purposefully. – Use anti-aliased text. – Use drop caps and initial caps for accent. – Minimize centered text. – Use white space. – Use animated text to grab attention. 24 DIGITAL FONTS • Glyphs are just images, so we can have bitmapped or vector (outline) fonts • Bitmapped fonts don't scale well or reproduce at different resolutions • Vector font formats: • Adobe PostScript Type 1 • TrueType • OpenType PostScript, TrueType, and OpenType outline fonts allow text to be drawn at any size without jaggies. Antialiasing text and graphics creates “smooth” boundaries between colors. 25 POSTSCRIPT • PostScript is a method of describing an image in terms of mathematical constructs (Bézier curves), so it is used not only to describe the individual characters of a font but also to describe entire illustrations and whole pages of text. • PostScript characters are scalable and can be drawn much faster. • The two types of PostScript fonts are Type 3 and Type 1. 26 TRUETYPE • Apple and Microsoft developed the TrueType methodology. • TrueType is a system of scalable outline fonts and can draw characters at low resolution. 27 OPENTYPE • Adobe and Microsoft developed OpenType, now the international standard. • It incorporates the best features of PostScript and TrueType. • Developed in 2007, OpenType is a free publicly available international standard of fonts which can be installed on any system. 28 TEXT LAYOUT The text layout software’s rules for selecting and arranging font glyphs to match given character data, including interpreting text in different scripts and languages, how to rearrange characters from different scripts, how to identify word breaks, how to space words on a page, and many more possibilities depending on the complexity of the software For web documents, the character data is contained in the document markup or inserted into the document object model (DOM) by a script. The font data may be accessed from the user’s operating system or downloaded as a supplementary resource; CSS style rules indicate which fonts should be used. 29 IMPORTANT OF TEXT 30 • Words and symbols in any form, spoken or written, are the most common means of communication. • Text is a vital element of multimedia menus, navigation systems, and content. • It is the simplest, and often the most effective way to get one's message across. • Insufficient attention given to the presentation and flow of text within multimedia application can result in the failure to communicate the presentation's central message. “GOOD D ES IGN IS LIK E A REFRIGERATOR— W H EN IT WORK S, N O ON E N OT ICES, BUT WHEN IT D OES N ’ T, IT S URE S T IN K S.” – IREN E AU Thank you