Transcript Text and Layout - Ulster University

Text and Layout
Digital Multimedia, 2nd edition
Nigel Chapman & Jenny Chapman
Chapter 11
This presentation © 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
11
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 />,…
© 2004, MacAvon Media Productions
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 &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
•
© 2004, MacAvon Media Productions
11
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
•
•
© 2004, MacAvon Media Productions
11
362–363
Document Structure
•<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml120000126/DTD/xhtml1-strict.dtd">
<html>
<head>
…
</head>
<body>
…
</body>
</html>
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
361
Declarations
•
•
property: value;
Set of properties is defined in the CSS
standard
•
•
Inline and block-level formatting
Absolute and relative positioning of
elements
© 2004, MacAvon Media Productions
11
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;
}
•
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
•
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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 }
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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 }
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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 }
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions
11
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
© 2004, MacAvon Media Productions