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

344–345

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

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

345–346

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

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

348

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

348–351

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

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

353–355

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

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

356–357

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

357

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

357–358

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 />,…

358–359

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 &lt; &gt; for < >• N.B. final ; is part of the reference

Now need a way of inserting &: use &amp; General mechanism for hard-to-type

characters Also numeric character references, e.g.

&#60;• Number after # is ISO10646 character value

358–359

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

360

<!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>

362–363

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

360–361

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

361, 368

property: value; Set of properties is defined in the

CSS standard• Inline and block-level formatting• Absolute and relative positioning of

elements

361

Indent first line of each paragraph 4pc

p { text-indent: 4pc; } Except paragraphs of class noindent

• p.noindent { text-indent: 0pc; } Use a hanging indent on paragraphs

of class hang p.hang { text-indent: -4pc;

margin-left: 4pc; }

361–362

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

365–366

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

365

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 were very commonly used to lay

out pages• Effective and reliable, but CSS positioning is

officially endorsed way of doing this

365

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

367

Five properties control font characteristics• font-family• font-style• font-variant• font-weight• font-size

Used in conjunction with line-height

368–369

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 }

369

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

370

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

371

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

371

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 }

371–372

• 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

372–373

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 }

373

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

374

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

374–375

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

375

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

375–377

• 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

377