Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation
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
345 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 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
347 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
348 Inline Formatting 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 351 Block-level Formatting 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
351 352 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
353 355 Structural Markup 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
355 356 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
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
357 XHTML 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 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
358 359 Tags 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 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
360 Attributes 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
362 363 Document Structure <!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>
360 361 CSS 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
361, 368 Selectors 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 Declarations property: value; Set of properties is defined in the CSS standard Inline and block-level formatting Absolute and relative positioning of elements
361 362 Simple Examples 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; }
365 366 HTML Block-Level Elements 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 HTML Lists 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 HTML Tables 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
367 HTML Inline Elements 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
368 369 CSS Typography Five properties control font characteristics font-family font-style font-variant font-weight font-size Used in conjunction with line-height
369 font-family 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 }
370 font-style & font-variant 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 font-weight 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
371 font-size 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 Leading 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 372 font property 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 }
372 373 Colour 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
373 Alignment 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 }
374 Layout 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 375 Boxes 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
375 Floating Boxes 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 377 Absolute Positioning 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
377 External Stylesheets 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