Chapter 8 Layout

1
Chapter 8Layout
2
Key Points

• Text can be treated as vector or bitmapped
  graphics for maximum flexibility, but this is not
  suitable for most documents.
• Markup comprises instructions that specify how
  text is to be formatted.

3
Key Points

• Structural markup separates a document's
  appearance from its logical structure.
• SGML, HTML and XML embody structural markup.
• In SGML and XML a Document Type Definition (DTD)
  defines the set of document elements that make up
  a class of documents, together with their
  attributes and the tags that can be used to mark
  up documents belonging to that class. (HTML is
  defined by an SGML DTD.)

4
Key Points

• Stylesheets can be used to determine the
  appearance of each document element.
• CSS (Cascading Style Sheets) is a stylesheet
  language that is used in conjunction with HTML to
  format Web pages.
• HTML document elements correspond to simple text
  components such as paragraphs, headings and
  lists HTML also allows documents to be arranged
  in frames.

5
Key Points

• CSS rules control the appearance of document
  elements, including the font, colour and
  alignment. In CSS2, rules can also control
  absolute positioning.
• HTML's SPAN and DIV elements, together with the
  class attribute, allow formatting and posiitoning
  to be applied to arbitrary sections of a
  document.
• PDF (Portable Document Format) provides a means
  of distributing documents with their layout
  intact.

6
Introduction

• Layout commands and visual characteristics can
  all be specified using a text-based markup
  language.
• For example, HTML

7
Text in Graphics

• Text can be placed at will, possibly using layers
  to overlay it , and treated with effects and
  transformation.
• Text item in vector graphics
• Objects, Fig. 8.1
• Scaled, rotated, reflected, and sheared
• Vector-based text is more manageable
• Programs are increasing combining vector and
  bit-mapped representations
• Fig. 8.2 bitmapped text

8
Markup

• The instruction inserted (by author) into the
  text file
• WYSIWYG formatting systems
• Word processor MS word
• Page layout toolsQuark Express, Adobe inDesign
• tag binary control code
• Tag-based systems Latex

9
Tag

• Visual markup
• Specify aspects of appearance of the text, such
  as fonts and type sizes
• Structural markup
• Identify logical elements of a document, such as
  headings, lists or tables

10
Latex

• \begincenter\fontfamilyhlh\fontseriesb\font
  shapen\fontsize1416\selectfont
  Introduction\endcenter
• Structural approach
• \sectionheadingIntroduction
• A separate file document style
• Define sectionheading

11
Structural markup

• Structural markup had distinct advantages over
  visual markup.
• Change appearance of a document globally by
  changing definition just once.
• Easy localization of documents
• Read to blind people by a speech synthesizer
  heading emphasis
• Writer identifying logical divisions
• Book designer layout
• Computer to analyze the document structure

12
SGML

• Latex structural visual
• SGML
• standard generalized markup language
• Mis-named, not a markup language
• A markup metalanguage
• Defining markup languages
• DTD
• Define only the structure
• Document type definition
• Describe all the documents of a particular type

13
WWW

• The first generation browser
• Allow user to control layout
• Stylesheet
• For each tag defined in DTD, a stylesheet
  provides a rule describing the way in which
  elements with that tag should be laid out.
• More than one stylesheet for a DTD
• Stylesheet language

14

• Technical publisher devises a DTD for books.
• Authors mark up with tags in DTD
• Book designer construct stylesheet
• Desktop publishing
• Authors having control over appearance
• Markup indexing, retrieval
• Logically consistent Visually consistent

15
HTML

• Hypertext Markup Language
• Unlike SGML
• A markup language
• HTML A SGML DTD

16
XML

• SGML too difficult
• XML
• eXtensible Markup Language
• SGML subset
• XML 1.0 1998

17
DTD

• SMIL
• Synchronized Multimedia Integration Language
• PGML
• Precision Graphics Markup Language
• Superseded by SVG
• MathML
• Math Markup Language
• XFDL
• eXtensible Forms Description language
• RDF
• Resource Description Framework
• Metadata data about a document

18
Text Layout

• User agent
• Web browser visual user agent
• Text-tospeech converter non-visual
• HTML document gt elements
• Element start tag content end tag
• Prior to HTML 4.0
• ISO 8859-1
• HTML 4.0
• ISO 10646

19
HTML

• Whitespace immediately following a start tag or
  preceding an end tag is ignored.
• P.237
• Comment
• lt!-- --gt
• Omit end tags, p. 237
• Attributes, such as size, width
• ltHR size12 width50gt

20
CSS

• Visual properties of each document element
• Cascading Style Sheets
• P text-indent 4pc
• Selector P
• Class name
• P.noindent
• Figs. 8.3, 8.4, noindent, unindent, hang
• Class attribute is used to distinguish between
  different subsets of an element type.

21
Elements and Attributes

• HTML 4.0
• 91 elements, 10 may be removed
• Block-level and inline elements
• Lists
• ordered (OL), unordered (UL), definition (DL)
• Figs. 8.5-6

22
FRAMESET

• A frameset a collection of frames
• Rows80,20Cols20,80
• Fig. 8.7

23
CSS

• P.elegant font-family The Snas, Verdana,
  Helvetica, sans-serif
• In decreasing order of preference
• Font-style normal, italic, oblique (???,
  slanted)
• Font-variant normal, small-caps
• Font-weight normal, bold, (100, 200, ,900),
  bolder, lighter
• Inherited each element has a parent element

24
CSS (2)

• Font-size
• A relative size smaller, larger
• xx-small, x-small, small, medium, large, x-large,
  xx-large ratio of 1.5
• Line spacing vertical distance between baselines
• 1.0-1.2 times font size
• Screen 1.5 times font size
• Percentage, ratio, units of ems
• Paper white background black textScreen
  white background a bright light in your eye

25
CSS (3)

• Background-color, color
• rgb(r, g, b)
• rgb(80, 40, 80)
• Rgb(204,102,204)
• CC66CC
• Left-alignedright-alignedjustified book, not
  screencentered
• Positioning of elements
• Float, Figs. 8.9-10
• Absolute positioning, top, left, width, height,
  Figs. 8.11-12
• Z-order
• LINK stylesheet in its own file

26
Portable Document

• Two limitations of structural markup SGML
• Cannot be sure what is going to happen when his
  or her marked up text is eventually displayed.
• Spacing, hyphenation
• Portable format
• PDF
• Acrobat Distiller PS-gtPDF
• PDFWriter printer driver