[14]chap11 Dmmtextandlayout New
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View [14]chap11 Dmmtextandlayout New as PDF for free.
More details
- Words: 4,032
- Pages: 84
Text and Layout
Rawesak Tanawongsuwan [email protected]
11
344–345
Text in Graphics •
Maximum flexibility obtained by treating text as graphics and manipulating it in graphics program
•
Ideally suited to graphic design incorporating text
• •
Posters, packaging, letterheads, book jackets, CD and DVD covers,…
Vector graphics with outline fonts or bitmapped images with bitmapped fonts
•
Increasingly, combine the two approaches
11
Vector Text •
Text set in outline fonts can be treated as object in a vector graphics program
• • • •
Transform; apply colour, gradient and patterns Fill shapes with text, set text along a path
Text remains editable Text in shape/along a path will accommodate transformations of the shape/path
345
11
345–346
Bitmapped Text • •
Convert text to pixels Can apply usual effects and filters
• •
Usually keep text on separate layer, so effects can be applied to it independently
Text can no longer be edited as text
• •
Can't change font, spell check, change wording, etc Must be retouched like any other image
11
Layout • • • •
Most text is laid out according to conventions Words are arranged into lines, combined into paragraphs placed on the page Special formatting (e.g. italicization) may be applied to words within a paragraph – inline/character formatting Paragraphs may be set in special ways (e.g. indentation) – block-level/paragraph formatting
347
11
Inline Formatting •
Apply formatting to spans (sequences) of characters within a block
• • • •
Font characteristics and size Colour Baseline offset for superscripts and subscripts
Character styles collect together a set of properties used for some purpose (e.g. emphasis) to be applied by name
•
Ensures consistency, eases modification
348
11
348–351
Block-level Formatting •
Each block will have default settings for the formatting of characters (font, size, etc)
• •
Blocks may be left-aligned, centred, rightaligned or justified
• • •
Over-ridden by inline formatting
May hyphenate
Set spacing on all four sides of block (indent etc) Use paragraph styles for consistency
11
Markup • • •
•
In the early days, manuscripts were produced on a typewrite The original document does not necessarily have the same form as the final published book Manuscripts would be annotated by several people (author, editor, book designer) to indicate how the text should be formatted by the typesetter marking up process Instructions are referred to as markup www.omegatype.com/ Services/editorial.asp
11
Markup • • •
Instructions embedded in a document to control its formatting WYSIWYG – markup consists of invisible control codes, formatting is displayed as you type Tag-based – text of document is interspersed with special commands known as tags; separate rendering phase is needed to display the formatted document
•
Tags are lexically distinguished from text
351–352
11
353–355
Structural Markup • • • • •
In visual markup, tags or commands are used to specify aspects of the appearance of the text such as fonts and type sizes However, in structural markup, tags identify logical elements of a document (headings, lists or tables, …) Formatting may be defined for each type of element (cf. paragraph and character styles) Permits separation of concerns between structure and appearance Makes it easier for programs to analyse structure of documents
11
Visual vs. Structural To distinguish the section headings from the body text
• •
Select each heading, insert space above it and set the font, its size and shape Have to apply the correct settings to each section heading
• •
Define a paragraph style (define the correct font, spacing settings) Apply the defined paragraph style to each heading
11
Advantages of structural markup • • • •
Easy to change the appearance of a document globally by changing the definitions of styles just once Consistency is ensured Allow to try different typographical effects easily Easy localization of documents
• •
Changing the layout of a document depending on the intended destination of the document
Allow the redefinition of the effect of markup tags for different output media
•
Redefine a section heading so that the words of the heading were read with increased emphasis in the audio version read to blind people
11
Advantages of structural markup •
Permit a separation of concerns between the appearance of a document and its structure
• • • •
Writer need only concentrate on identifying the logical divisions within the document Book designers would worry about formatting In the case of visual markup, the processes of writing and layout become intertwined
Easy to identify the structural elements by name
• •
For human to look for certain elements For computer program to search, manipulate
11
Stylesheets •
Logical conclusion of structural markup:
• • • •
Complete separation of content and structure from appearance Markup tags only indicate structure Specification of the appearance is left to a separate mechanism Stylesheet provides rules describing how each type of element should be displayed
355–356
11
356–357
HTML • •
Hypertext Markup Language Evolved from original version with tags suitable for marking up scientific papers; now supports variety of embedded multimedia as well as richer variety of layout features
•
Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions
11
357–358
HTML Markup • • •
HTML markup divides document into elements Each type of element has a name Elements may be nested (subject to restrictions)
• •
Must be properly nested – if an element starts inside another, it must end inside it too
Each element is introduced by a start tag and terminated by an end tag
•
Text in-between is the element's content
11
What is an HTML File? • • • •
An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
11
HTML Tags • • • • • •
HTML tags are used to mark-up mark up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content
11
Example
11
358–359
Character Entity References • • • • •
Need a mechanism for inserting <, > and other special characters into a document without having them interpreted as start of a tag &c Use character entity references < > for < > N.B. final ; is part of the reference
•
Now need a way of inserting &: use & General mechanism for hard-to-type characters Also numeric character references, e.g. < Number after # is ISO10646 character value
•
11
Attributes • • • • •
Named properties of an element Values are assigned within start tag
Values must be enclosed in "s Attribute names are all lower-case Flags are turned on by assigning their own name
Just omit flag attribute to turn it off
•
360
11
Tag Attributes • • • • •
Attributes can provide additional information about the HTML elements on your page This tag defines the body element of your HTML page: . With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: This tag defines an HTML table:. With an added border attribute, you can tell the browser that the table should have no borders: Attributes always come in name/value pairs like this: name="value" Attributes are always added to the start tag of an HTML element
Rawesak Tanawongsuwan [email protected]
11
344–345
Text in Graphics •
Maximum flexibility obtained by treating text as graphics and manipulating it in graphics program
•
Ideally suited to graphic design incorporating text
• •
Posters, packaging, letterheads, book jackets, CD and DVD covers,…
Vector graphics with outline fonts or bitmapped images with bitmapped fonts
•
Increasingly, combine the two approaches
11
Vector Text •
Text set in outline fonts can be treated as object in a vector graphics program
• • • •
Transform; apply colour, gradient and patterns Fill shapes with text, set text along a path
Text remains editable Text in shape/along a path will accommodate transformations of the shape/path
345
11
345–346
Bitmapped Text • •
Convert text to pixels Can apply usual effects and filters
• •
Usually keep text on separate layer, so effects can be applied to it independently
Text can no longer be edited as text
• •
Can't change font, spell check, change wording, etc Must be retouched like any other image
11
Layout • • • •
Most text is laid out according to conventions Words are arranged into lines, combined into paragraphs placed on the page Special formatting (e.g. italicization) may be applied to words within a paragraph – inline/character formatting Paragraphs may be set in special ways (e.g. indentation) – block-level/paragraph formatting
347
11
Inline Formatting •
Apply formatting to spans (sequences) of characters within a block
• • • •
Font characteristics and size Colour Baseline offset for superscripts and subscripts
Character styles collect together a set of properties used for some purpose (e.g. emphasis) to be applied by name
•
Ensures consistency, eases modification
348
11
348–351
Block-level Formatting •
Each block will have default settings for the formatting of characters (font, size, etc)
• •
Blocks may be left-aligned, centred, rightaligned or justified
• • •
Over-ridden by inline formatting
May hyphenate
Set spacing on all four sides of block (indent etc) Use paragraph styles for consistency
11
Markup • • •
•
In the early days, manuscripts were produced on a typewrite The original document does not necessarily have the same form as the final published book Manuscripts would be annotated by several people (author, editor, book designer) to indicate how the text should be formatted by the typesetter marking up process Instructions are referred to as markup www.omegatype.com/ Services/editorial.asp
11
Markup • • •
Instructions embedded in a document to control its formatting WYSIWYG – markup consists of invisible control codes, formatting is displayed as you type Tag-based – text of document is interspersed with special commands known as tags; separate rendering phase is needed to display the formatted document
•
Tags are lexically distinguished from text
351–352
11
353–355
Structural Markup • • • • •
In visual markup, tags or commands are used to specify aspects of the appearance of the text such as fonts and type sizes However, in structural markup, tags identify logical elements of a document (headings, lists or tables, …) Formatting may be defined for each type of element (cf. paragraph and character styles) Permits separation of concerns between structure and appearance Makes it easier for programs to analyse structure of documents
11
Visual vs. Structural To distinguish the section headings from the body text
• •
Select each heading, insert space above it and set the font, its size and shape Have to apply the correct settings to each section heading
• •
Define a paragraph style (define the correct font, spacing settings) Apply the defined paragraph style to each heading
11
Advantages of structural markup • • • •
Easy to change the appearance of a document globally by changing the definitions of styles just once Consistency is ensured Allow to try different typographical effects easily Easy localization of documents
• •
Changing the layout of a document depending on the intended destination of the document
Allow the redefinition of the effect of markup tags for different output media
•
Redefine a section heading so that the words of the heading were read with increased emphasis in the audio version read to blind people
11
Advantages of structural markup •
Permit a separation of concerns between the appearance of a document and its structure
• • • •
Writer need only concentrate on identifying the logical divisions within the document Book designers would worry about formatting In the case of visual markup, the processes of writing and layout become intertwined
Easy to identify the structural elements by name
• •
For human to look for certain elements For computer program to search, manipulate
11
Stylesheets •
Logical conclusion of structural markup:
• • • •
Complete separation of content and structure from appearance Markup tags only indicate structure Specification of the appearance is left to a separate mechanism Stylesheet provides rules describing how each type of element should be displayed
355–356
11
356–357
HTML • •
Hypertext Markup Language Evolved from original version with tags suitable for marking up scientific papers; now supports variety of embedded multimedia as well as richer variety of layout features
•
Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions
11
357–358
HTML Markup • • •
HTML markup divides document into elements Each type of element has a name Elements may be nested (subject to restrictions)
• •
Must be properly nested – if an element starts inside another, it must end inside it too
Each element is introduced by a start tag and terminated by an end tag
•
Text in-between is the element's content
11
What is an HTML File? • • • •
An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
11
HTML Tags • • • • • •
HTML tags are used to mark-up mark up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content
11
Example
11
358–359
Character Entity References • • • • •
Need a mechanism for inserting <, > and other special characters into a document without having them interpreted as start of a tag &c Use character entity references < > for < > N.B. final ; is part of the reference
•
Now need a way of inserting &: use & General mechanism for hard-to-type characters Also numeric character references, e.g. < Number after # is ISO10646 character value
•
11
Attributes • • • • •
Named properties of an element Values are assigned within start tag
Values must be enclosed in "s Attribute names are all lower-case Flags are turned on by assigning their own name
Just omit flag attribute to turn it off
•
360
11
Tag Attributes • • • • •
Attributes can provide additional information about the HTML elements on your page This tag defines the body element of your HTML page: . With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: This tag defines an HTML table:
