Text and Layout

Rawesak Tanawongsuwan
ccrtw@mahidol.ac.th
 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 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
 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 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
 11 348

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

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

 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, • Define a paragraph

insert space above it style (define the correct
and set the font, its size font, spacing settings)
and shape
• Apply the defined
• Have to apply the paragraph style to each
correct settings to each heading
section 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 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
 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 <b> and
</b>
• 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 &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
 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
 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:
<body>. With an added bgcolor attribute, you can tell
the browser that the background color of your page
should be red, like this: <body bgcolor="red">
• This tag defines an HTML table: <table>. With an added
border attribute, you can tell the browser that the table
should have no borders: <table border="0">
• Attributes always come in name/value pairs like this:
name="value"
• Attributes are always added to the start tag of an HTML
element
 11

Basic HTML Tags

• The most important tags in HTML are tags that
define headings, paragraphs and line breaks
• Headings are defined with the <h1> to <h6>
tags. <h1> defines the largest heading. <h6>
defines the smallest heading

• Paragraphs are defined with the <p> tag

• Line Breaks (<br> tag) is used when you want
to end a line, but don't want to start a new
paragraph. The <br> tag forces a line break
wherever you place it.
 11

Example
 11

Example

H1 text
H6 text
H5 text
H2 text
H3 text
 11

Basic HTML Tags

• <html> Defines an HTML document
• <body> Defines the document's body
• <h1> to <h6> Defines header 1 to header 6
• <p> Defines a paragraph
• <br> Inserts a single line break
• <hr> Defines a horizontal rule
• <!--> Defines a comment
 11

Text Formatting Tags

• <b> Defines bold text
• <big> Defines big text
• <em> Defines emphasized text
• <i> Defines italic text
• <small> Defines small text
• <strong> Defines strong text
• <sub> Defines subscripted text
• <sup> Defines superscripted text
• <ins> Defines inserted text
• <del> Defines deleted text
 11

HTML Links

• HTML uses a hyperlink to link to another document on

the Web

• The Anchor Tag and the Href Attribute

• HTML uses the <a> (anchor) tag to create a link to

another document

• An anchor can point to any resource on the Web: an

HTML page, an image, a sound file, a movie, etc.

• This anchor defines a link to W3Schools:

• <a href="http://www.cnn.com/">Visit CNN!</a>

 11

HTML Images
• With HTML you can display images in a document

• In HTML, images are defined with the <img> tag

• The <img> tag is empty, which means that it contains

attributes only and it has no closing tag

• To display an image on a page, you need to use the src

attribute.

• Src stands for "source". The value of the src attribute is

the URL of the image you want to display on your page

• The syntax of defining an image: <img src="url">

 11 357

XHTML
• XHTML stands for EXtensible HyperText Markup Language

• XHTML is aimed to replace HTML

• XHTML is a stricter and cleaner version of HTML

• XHTML is HTML defined as an XML application

• XHTML is a W3C Recommendation and XHTML 1.0 adopted in

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

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

CSS
• Styles define how to display HTML elements and
used to specify visual properties of each element
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
• Can embed rules in a style element within the head
of an HTML document
 11

Different styles
 11

Style Sheets Can Save a Lot of Work

• Styles are normally saved in files external to your
HTML documents
• External style sheets enable you to change the
appearance and layout of all the pages in your Web,
just by editing a single CSS document
• CSS allows developers to control the style and layout
of multiple Web pages all at once
• As a Web developer you can define a style for each
HTML element and apply it to as many Web pages
as you want

• To make a global change, simply change the style,

and all elements in the Web are updated
automatically
 11

CSS Syntax
• The CSS syntax is made up of three parts: a selector, a
property and a value: selector {property: value}

• The selector is normally the HTML element/tag you wish

to define, the property is the attribute you wish to
change, and each property can take a value.

• The property and value are separated by a colon and

surrounded by curly braces: body {color: black}

• If the value is multiple words, put quotes around the

value: p {font-family: "sans serif"}

• If more than one property, must separate each property

with a semi-colon: p {text-align:center;color:red}
 11 361, 368

Selectors
• CSS rules have the form
• selector { declarations }
• 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
 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
 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;
}
 11

Class selectors
<p class="right">
• Say that you would like to This paragraph will be
have two types of paragraphs in right-aligned.
your document: one right-aligned </p>
paragraph, and one center-
aligned paragraph <p class="center">

This paragraph will be

• p.right {text-align: right} center-aligned.

• p.center {text-align: center} </p>

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

Create a Bulleted List

This figure shows a Web page with a bulleted list. A bulleted list is
called an unordered list and is added using the <UL>…</UL> tag pair.
 11

Create a Numbered List

This figure shows the same list now formatted as a numbered or
ordered list. This list is created using the <OL>…</OL> HTML tag
pair.
 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
 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
11
11
 11

How to Insert a Style Sheet

• External Style Sheet

• An external style sheet is ideal when the style is applied

to many pages
• With an external style sheet, you can change the look
of an entire Web site by changing one file
• Internal Style Sheet
• An internal style sheet should be used when a single
document has a unique style
• Inline Styles
• An inline style loses many of the advantages of style
sheets by mixing content with presentation
• Use this method sparingly, such as when a style is to be
applied to a single occurrence of an element
 11

CSS can format many things …

• CSS Background: controls the background color of an element,
set an image as the background, repeat a background image
vertically or horizontally, and position an image on a page

• CSS Text: controls the appearance of text. It is possible to

change the color of a text, increase or decrease the space
between characters in a text, align a text, decorate a text, indent
the first line in a text, and more

• CSS Fonts: changes the font family, boldness, size, and the
style of a text

• CSS Borders: specifies the style, color, and width of an

element's border.

• CSS Margins: defines the space around elements. The top,

right, bottom, and left margin can be changed independently
using separate properties.

• CSS Lists: changes between different list-item markers, set an

image as a list-item marker, and set where to place a list-item
marker
 11

CSS Styles panel

 11

CSS Styles panel

 11

About the font list…

 11

About the font list…

• Generally a browser uses the

fonts installed on a user’s system
to display a page

• However, the page designer

cannot know which fonts are
available

• CSS allows us to specify a choice

of fonts

• If the browser tries to use the

first font specified, if not
available, use the next one and
so on…
 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

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

 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 }

 11

Layout
• Similar to magazine layout and advertisement
more than book design

• Concern with arranging text on a screen

• One approach is to place individual blocks of

text on a grid
table

• CSS provides another way to have direct

control over the positioning of document
elements
 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
 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
 11

Normal Flow
• Unless explicit
positioning is
specified, boxes are
laid out using the
normal flow algorithm.
 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
 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
Tables
 Display tabular data
 used to position elements on a page to
simulate a layout grid
 Stylesheets now provide a better way of laying
out page elements in HTML
 In Dreamweaver MX, we can layout with
tables in either Standard view or Layout
view
 can switch from one view to the other
Tables in Standard & Layout views
 Standard view  Layout view
 can insert tables and  draw tables and table
then format and cells, adjust their size
adjust them and move them
 can draw page layout around the page
with layers and then layout
convert the layers to  more flexible
tables  automatically creates
and manages the
table structure
Table Layout in Standard View
 Make sure to click the Standard View button on the
Layout tab

 Click the Insert Table button on the Layout tab to

insert a table
Table Layout in Standard View

Create a 3x3 table

Can change
the properties
of the table
Table Layout in Standard View
 Preset Table designs
 ready with set shading, rules, and text styles to produce
a coherent layout
 Commands>Format Table...
Table Layout in Layout View
 Make sure to click the Layout View button on the
Layout tab

 In this mode, we can create/draw a layout table and a

layout cell
 Layout cells can be inserted only in the Layout table
 Tables created in Standard View can not hold table
cells in the Layout view
Table Layout in Layout View

Draw a layout table

And a table cell within it
Table Layout in Layout View

More flexible in the

arrangement of
items of the web
Table Layout in Layout View
Nested Tables in Standard View
Nested Tables in Layout View

More flexible
Layout with Layers

 Layers in Dreamweaver correspond to

elements positioned using CSS
 Layers can be created in the Standard View
and click the Insert Layer button
Layout with Layers

 Absolutely positioning objects on a Web

page is a 2-stage process
 Make a layer and put it in the desired place
 Add the object to the layer
Layout with Layers
Convert layers-to-tables

 Also tables-to-layers
 Add more flexibility to
layout elements in the
web page