topic 2 text
TRANSCRIPT
TOPIC 2 – TEXT
Overview
• Importance of text in a multimedia presentation.
• Understanding fonts and typefaces.
• Using text elements in a multimedia presentation.
• Computers and text.
• Font editing and design tools.
• Multimedia and hypertext.
CSC253 2
Introduction To Text
• Using text and symbols for communication began about 6,000 years ago in Mediterranean Fertile Crescent: Mesopotamia, Egypt, Sumeria and Babylonia.
• In some former eras, not all people were allowed to learn writing and reading.
• Today, text and ability to read it are doorways to power and knowledge.
• Since the explosion of the Internet and the World Wide Web(WWW), text has become more important than ever.
CSC253 3
Importance of Text in a Multimedia Presentation
• 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.
CSC253 4
• A single word may be cloaked in many meanings, so it is important to cultivate accuracy and conciseness in the specific words you choose.
• It is important to design labels for title screens, menus, buttons or tabs using words that have the most precise and powerful meaningsto express what you need to say
CSC253 5
(cont.) Importance of Text in a Multimedia Presentation
• Factors affecting legibility of text:
– Size.
– Background and foreground color.
– Style.
– Leading.
CSC253 6
Understanding Fonts and Typefaces
CSC253 7
(cont.) Understanding Fonts and Typefaces
• The study of fonts and typefaces includes the following:
– Font styles.
– Font sizes.
– Cases.
– Serif versus Sans Serif.
CSC253 8
Font Styles
Font styles include:
– Boldface
– Italic
– Underlining
– Outlining
CSC253 9
Font Sizes
• Font size is measured in points. (pt)
– 1 point = 0.0138 inch(1/72)
• Character metrics are the general measurements applied to individual characters.
• Kerning is the spacing between character pairs.
• Leading is the space between lines.
CSC253 10
Kerning vs Leading
CSC253 11
Kerning is the spacing between character pairs.
Leading is the space between lines.
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 intercap.
• Example : LibraryBox,
CSC253 12
Two classes of fonts: Serif or Sans
Serif
Serif Sans Serif
little decoration at the end of a letter stroke.
do not have a serif at the end of a letter stroke.
used for body text These fonts are used for headlines and bold statements.
CSC253 13
Types of Fonts
• For computer displays, Sans Serif fonts considered better because of the sharper contrast.
Example of Serif fonts Example of Sans Serif
Times New Roman Bookman Rockwell Light Courier New
Century
Century Gothic
Arial
Comic Sans MS
Impact
Tahoma
CSC253 14
CSC253 15
Text Characteristics
• This example shows the Times New Roman font
FD xhp Descender
Capital Height
Point size
Ascender
Serif
x-Height
p -Height
CSC253 16
Tracking, Kerning and Leading
Av v A Unkerned Kerned
CSC253 17
Tracking, Kerning and Leading
Reading Line One
Reading Line One Leading
o Ascender : an upstroke on a character (h)
o Descender : the down stroke below the baseline of a character(p)
o Leading : spacing above and below a font or Line spacing
o Tracking : spacing between characters
o Kerning : space between pairs of characters, usually as an overlap for improvement appearance
CSC253 18
Bitmapped and vector fonts
• Fonts can either be stored as bitmapped or vector graphics
• Bitmaps font depend to the size and the pixel numbers - File size increases as more sizes are added
• Vector fonts can draw any size by scaling the vector drawing primitives mathematically
– File size is much smaller than bitmaps
– TrueType and PostScript are vector font formats
CSC253 19
Bitmapped and vector fonts
A bitmapped font A vector font
CSC253 20
Jaggies and Antialiasing
• Jaggies are the jagged edges you see when a bitmapped image is resized – It is a consequence of the underlying array of pixels
from which the image is composed
• Antialiasing is a technique that can be used to
eliminate jagged edges – It substitutes additional pixels in other colours to fool
the brain into thinking it is seeing continuous lines – The technique is used to blend the font into the
background by transitioning the colour from the font colour to background.
– This technique minimizes the jagged edges making for a smoother overall appearance.
CSC253 21
Jaggies and Antialiasing
CSC253 22
Using Text Elements in a Multimedia Presentation
• Anti-aliased text must be used when a gentle and blended look for titles and headlines is needed.
• Ideas and concepts can be highlighted by making the text bold or by emphasizing text.
• A pleasant look can be created by experimenting with different font faces, sizes, leadings, and kerning.
• The text elements used in multimedia are: – Menus for navigation. – Interactive buttons. – Fields for reading. – HTML documents. – Symbols and icons.
CSC253 23
Menus for Navigation
• A user navigates through content using a menu.
• A simple menu consists of a text list of topics.
CSC253 24
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.
CSC253 25
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.
CSC253 26
HTML Documents
• HTML stands for Hypertext Markup Language.
• It is the standard document format used for Web pages.
• HTML documents are marked using tags.
CSC253 27
HTML Documents
• An advanced form of HTML is DHTML.
• DHTML stands for Dynamic Hypertext Markup Language.
• DHTML uses Cascading Style Sheets (CSS).
• Some of the commonly used tags are:
– The <B> tag for making text bold faced.
– The <OL> tag for creating an ordered list.
– The <IMG> tag for inserting images.
CSC253 28
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.
CSC253 29
• Mapping across platforms:
• Fonts and characters are not cross-platform compatible [ between Windows and Macintosh platforms ]
• They must be mapped to the other machine using font substitution.
CSC253 30
Computers and Text
• The font wars.
– PostScript
– TrueType
• Character sets.
CSC253 31
PostScript
• PostScript is a method of describing an image in terms of mathematical constructs.
• PostScript characters are scalable and can be drawn much faster.
• The two types of PostScript fonts are Type 3 and Type 1.
CSC253 32
TrueType
• Apple and Microsoft developed the TrueType methodology.
• TrueType is a system of scalable outline fonts, and can draw characters at low resolution.
CSC253 33
Character Sets
• The American Standard Code for Information Interchange (ASCII) is a 7-bit coding system.
• The extended character set is commonly filled with ANSI standard characters.
• The ISO-Latin-1 character set is used while programming the text of HTML pages.
CSC253 34
Character Sets
• Unicode is a 16-bit architecture for multilingual text and character encoding.
• The shared symbols of each character set are unified into collections of symbols called scripts.
• Mapping across platforms:
– Fonts and characters are not cross-platform compatible.
– They must be mapped to the other machine using font substitution.
CSC253 35
Font Editing and Design Tools
• Macromedia Fontographer. – Fontographer is a specialized graphics editor. – It is compatible with both Macintosh and Windows
platform. – It can be used to develop PostScript, TrueType, and
bitmapped fonts. – It can also modify existing typefaces and incorporate
PostScript artwork.
• Creating attractive texts.
– Applications that are used to enhance texts and images include: Adobe Photoshop, TypeStyler, COOL 3D, HotTEXT and TypeCaster
CSC253 36
Fontographer
CSC253 37
Multimedia and Hypertext
• Multimedia.
• Hypertext system.
• Using hypertext systems.
• Searching for words.
• Hypermedia structures.
• Hypertext tools.
CSC253 38
Multimedia
• Multimedia is defined as the combination of text, graphics, and audio elements into a single presentation.
• When the user have control over the presentation, it is called interactive multimedia.
• Interactive multimedia becomes hypermedia when a structure of linked elements is provided to the user for navigation and interaction.
CSC253 39
Hypertext System
• Hypertext is defined as the organized cross-linking of words, images, and other Web elements.
• A system in which words are keyed or indexed to other words is referred to as a hypertext system.
• A hypertext system enables the user to navigate through text in a non-linear way.
CSC253 40
Using Hypertext Systems
• Information management and hypertext programs present electronic text, images, and other elements in a database fashion.
• Software robots visit Web pages and index entire Web sites.
CSC253 41
(cont.) Using Hypertext Systems
• Hypertext databases make use of proprietary indexing systems.
• Server-based hypertext and database engines are widely available.
CSC253 42
Searching for Words
• Typical methods for word searching in hypermedia systems are: – Categorical search
• Selecting or limiting the documents, pages, or fields of text within which to search for a word or words
– Word relationship • Searching for the words according to their general proximity and order. Example :
“birthday party” and “cake”.
– Adjacency • Searching for words occurring next to one another
– Alternates • Applying an OR criterion to search for two or more words. Example: “meat”
or “egg”
– Association • Applying AND criterion to search for two or more words.
CSC253 43
(cont.) Searching for Words
• (cont.) Typical methods for word searching in hypermedia systems are: – Negation
• Applying a NOT criterion
– Truncation
• Searching for word with any of its possible suffixes. Example : geo# (geology, geometry)
– Intermediate words
• Searching for words that occur between what might normally be adjacent words, such as a middle name.
– Frequency
• Searching for words based on how often they appear
CSC253 44
Hypermedia Structures
• Links.
• Nodes.
• Anchors.
• Navigating hypermedia structures.
CSC253 45
Links
• Links are connections between conceptual elements.
• Links are the navigation pathways and menus.
NODES
Nodes are accessible topics, documents, messages, and content elements.
Nodes and links form the backbone of a knowledge access system.
CSC253 46
Anchor
• Anchor is defined as the reference from one document to another document, image, sound, or file on the Web.
• The source node linked to the anchor is referred to as a link anchor.
• The destination node linked to the anchor is referred to as a link end.
CSC253 47
Navigating Hypermedia Structures
• The simplest way to navigate hypermedia structures is via buttons.
• Location markers must be provided to make navigation user-friendly.
CSC253 48
Hypertext Tools
• Two functions common to most hypermedia text management systems are building (authoring) and reading.
• The functions of ‘builder’ are: – Creating links. – Identifying nodes. – Generating an index of words.
• Hypertext systems are used for: – Electronic publishing and reference works. – Technical documentation. – Educational courseware. – Interactive kiosks. – Electronic catalogs.
CSC253 49
Summary
• Text is one of the most important elements of multimedia.
• The standard document format used for Web pages is called HTML.
• Multimedia is the combination of text, graphics, and audio elements into a single presentation.
• A hypertext system enables the user to navigate through text in a non-linear way
CSC253 50