Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation © 2004, MacAvon Media Productions Text and Layout

Digital Multimedia, 2nd editionNigel Chapman & Jenny Chapman

Chapter 11

This presentation © 2004, MacAvon Media Productions

Text and Layout

© 2004, MacAvon Media Productions

11

• 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

Text in Graphics

344–345


11

• 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

Vector Text

345


11

• 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

Bitmapped Text

345–346


11

• 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

Layout

347


11

• Apply formatting to spans 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

Inline Formatting

348


11

• Each block will have default settings for the formatting of characters (font, size, etc)

• Over-ridden by inline formatting

• Blocks may be left-aligned, centred, right-aligned or justified

• May hyphenate

• Set spacing on all four sides of block (indent etc)

• Use paragraph styles for consistency

Block-level Formatting

348–351


11

• 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

Markup

351–352


11

• Tags identify logical elements of a document (headings, lists, tables,…)

• Contrast visual markup – tags control aspects of appearance (fonts, indents, …)

• 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

Structural Markup

353–355


11

• 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

Stylesheets

355–356


11

• 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

HTML

356–357


11

• HTML redefined using an XML DTD

• XHTML 1.0 adopted as W3C Recommendation Jan 2000

• Almost compatible with HTML 4.0

• Legal XHTML is legal HTML 4, but not vice versa

• XHTML is more strict than HTML 4

• Can usually use HTML to mean XHTML or HTML 4

XHTML

357


11

• 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

HTML Markup

357–358


11

• Element's start tag is its name enclosed in angle brackets: <p>, <h1>, <div>, …

• XHTML names consist of lower-case letters and numbers

• Element's end tag is its name preceded by a slash, enclosed in angle brackets: </p>, </h1>, </div>,…

• Empty elements (with no content) have start and end tags run together: <img />, <hr />,…

Tags

358–359


11

• 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

Character Entity References

358–359


11

• Named properties of an element

• Values are assigned within start tag<hr size="12" width="50%" />

• Values must be enclosed in "s

• Attribute names are all lower-case

• Flags are turned on by assigning their own name

<hr noshade="noshade" />

• Just omit flag attribute to turn it off

Attributes

360


11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"><html> <head> … </head> <body> … </body></html>

Document Structure

362–363


11

• Cascading Style Sheets

• Simple stylesheet language that works well with HTML and is supported by most Web browsers

• Used to specify visual properties of each element

• CSS rules have the form

• selector { declarations }

• Can embed rules in a style element within the head of an HTML document

CSS

360–361


11

• Name – declaration applies to all elements of the named type

• Name.class – declaration applies to all elements of the named type whose class attribute has value class

• Name#id – declaration applies to the unique elements of the named type whose id attribute has value id

Selectors

361, 368


11

• property: value;

• Set of properties is defined in the CSS standard

• Inline and block-level formatting

• Absolute and relative positioning of elements

Declarations

361


11

• Indent first line of each paragraph 4pcp { text-indent: 4pc; }

• Except paragraphs of class noindent

• p.noindent { text-indent: 0pc; }

• Use a hanging indent on paragraphs of class hangp.hang { text-indent: -4pc;

margin-left: 4pc; }

Simple Examples

361–362


11

• p – paragraphs

• h1, h2,…,h6 – level 1, 2,…,6(!) headers

• blockquote – long quotations (not indented paragraphs)

• pre – pre-formatted text

• div – arbitrary division

• use class or id attributes in conjunction with stylesheet rules

HTML Block-Level Elements

365–366


11

• ul – unordered list

• ol – ordered list

• li – list element

• Use li elements within ul and ol elements

• Within ol, li elements are automatically numbered; ul, bulleted by default

• dl – definition list

• Use pairs of dt (term) and dd (definition) elements within dl

HTML Lists

365


11

• Relatively complex constructions providing for wide variety of tabular layout

• table elements contain tr (row) elements containing td (data, i.e. cell) elements

• Further facilities for spanning columns and rows, adding captions and headers, etc

• Tables are very commonly used to lay out pages

• Effective and reliable, but CSS positioning is officially endorsed way of doing this

HTML Tables

365


11

• Elements indicating explicit inline formatting (e.g. font) deprecated – conflict with structural markup

• More abstract inline elements OK

• em (emphasis), strong, etc

• span element identifies arbitrary spans of text

• Use class and id attributes in conjunction with stylesheet rules to apply inline formatting

HTML Inline Elements

367


11

• Five properties control font characteristics

• font-family

• font-style

• font-variant

• font-weight

• font-size

• Used in conjunction with line-height

CSS Typography

368–369


11

• Value is a list of font names in decreasing order of preference

• No guarantee that any specific font will actually be used (may not be available to browser)

• Can use generic font families – browser will substitute an appropriate available font

• serif, sans-serif, monospace, cursive, fantasy

p.elegant { font-family: "The Sans", Verdana, Helvetica, sans-serif }

font-family

369


11

• font-style may be normal, italic or oblique (i.e. slanted)

• font-variant may be normal or small-caps

• Effect is to choose an appropriate member of the font family selected by the font-family property

• Slanted font may be used for italic if no real italic font is available

font-style & font-variant

370


11

• Terms used for font weight are relative

• Values normal and bold have expected effect

• Many font families have more than two weights, with no standard names

• font-weight may be 100, 200,…, 900

• As value increases, weight will not decrease may increase

• Values bolder and lighter increase/decrease weight relative to inherited value

font-weight

370


11

• Absolute sizes may be specified in any unit

• Sizes relative to browser default may be chosen from xx-small, x-small, small, medium, large, x-large, xx-large

• Sizes may be a percentage of inherited value, or specified in em or ex units of inherited font

• Relative size changes specified with smaller or larger

font-size

371


11

• line-height property specifies leading

• normal – chosen by browser, usually 1 to 1.2 times font size (i.e. too small)

• Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size

• line-height and leading can be combined within a font declaration: 14pt/21pt

Leading

371


11

• Combine all five font properties into a single declaration for font

• Can include composite size/leading

• Any omitted properties take on default values

• Order is unspecified, but browsers seem to prefer style, variant, weight, size, family

p { font: italic bold 14pt/21pt "The Sans", Verdana, Helvetica, sans-serif }

font property

371–372


11

• background-color and color properties control the colour of background and text

• Values specify colours in sRGB colour space

• rgb(r%, g%, b%)

• rgb(r, g, b) where r, g, b are in range 0–255

• #rrggbb where rr, gg, bb are hex values

rgb(80%,40%,80%) rgb(204,102,204) #CC66CC

Colour

372–373


11

• text-align property can take values left, right, center or justify

• Can only be sensibly applied to block-level elements

body { text-align: left }

p.display { text-align: center }

Alignment

373


11

• Layout algorithm:

• Each element is notionally placed in a box

• Inline elements and text placed next to each other horizontally, then fitted into available width to form blocks

• Blocks are placed vertically on top of each other

• Stylesheet may be used to modify placement of elements

Layout

374


11

• Each box may be surrounded by a border

• Border is separated from contents by padding

• Beyond border, margins separate box from its neighbours on all sides

• Plethora of CSS properties can be used to set border width, style and colour, padding and margins, box's height and width

• Text colour and background colour can be set separately for each box

Boxes

374–375


11

• Boxes may be 'floated' to left or right margin, while text flows round them

• float property can take value left or right

• clear property can take values left, right, both or none, specifying which sides may be adjacent to a floating box

• If clear = left, box is forced to go below the bottom of any left-floated element, and so on

Floating Boxes

375


11

• Set position to absolute, then specify values for top and left properties, setting the position of the top left corner of the box

• Tedious calculations, usually done by interactive manipulation in Web authoring program

• Can use relative units

• Boxes may end up on top of each other, z-order property specifies stacking order

• Preferred alternative to use of tables for layout

Absolute Positioning

375–377


11

• Can put a collection of rules in a file and refer to it from within an HTML document

• link element with href attribute pointing to stylesheet, rel="stylesheet", type="text/css"

<link href="styles.css" rel="stylesheet" type="text/css" />

• Allows same set of styles to be used in all pages of a Web site, global changes made easily

External Stylesheets

377

Documents

Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation © 2004, MacAvon Media Productions Text and Layout