CS835 - Data and Document Representation & Processing

Lecture 7 - Presentation

Document Layout


2003 Adaptive grid-based document layout    PDF

1982 Document Formatting Systems: Survey, Concepts, and Issues   PDF

2003 (xml) Improving Formatting Documents by Coupling Formatting Systems         PDF

2003 Towards a Multimedia Formatting Vocabulary  PDF

1997 Constraint-Based Document Layout for the Web            PDF

2001 A Survey of Automated Layout Techniques for Information Presentations         PDF

2001 Intentional Structures of Documents       PDF


A Survey of Automated Layout Techniques for Information Presentations





Layout Managers





(a)  A network of constraints that might be used in an automated layout system.

(b)  (b) A set of spatial constraints that express the constraint network.

(c)   (c) A set of abstract constraints that express the same relationships.



Types of Constraints


(a) A simple layout that can be generated by a system that only considers abstract relationships between components.

(b) A layout of the same components where additional spatial constraints are enforced so that each component completely fills a regular grid and leave margins between the elements.


Abstract Constraints


Spatial Constraints





(a)  A layout generated by a system that does not enforce spatial relationships between “cousins.”

(b)  A layout of the same components where spatial constraints force all of the children to be aligned.



Example -  Feiner’s GRIDS system - designs layout grids that enforce a consistency between screens or pages of a presentation

(a) A layout generated by Feiner’s GRIDS with the grid showing.

(b) The same layout as presented to the user.



Expressing Constraints

e.g. a grammar for use in a layout system

(Defrule (Make-Article The-Grammar)

  Article -> Text Text Text Number Image

     0        1    2    3     4      5

  (Author-Of 2 1)

  (Description-Of 4 1)

  (Page-Of 4 1)

  (Image-Of 5 1)

  (article-name 0) = r

  (article-image 0) = 5


  (right-of 1 5)

  (top-aligned 1 5)

  (top-aligned 5 4)

  (spaced-below 2 1)

  (spaced-below 3 2)



·       Problems:

o      Powerful and expressive grammars may also be difficult to use

o      True of grammars or ontologies that attempt to be extremely general and all-encompassing.

o      Very complex solvers may be necessary to process the information present in such a system.

o      Difficult to create a system that describes the set of all possible high-level relationships between components of a presentation


·       Another approach - express the constraints in terms of Boolean predicates ( a function that returns a Boolean result )

o      alleviates some of the concerns that arise from the more expressive grammar and relational grammar approaches by limiting the space of what can be expressed.

o      eases the process of solving the set of constraints as the input needs little or no translation before being passed to the solver.


Obtaining Constraints


Interactive Specification

Easy to create graphical user interfaces that allow the user to interactively place or adjust components on the screen.


Automated Extraction

Constraint Solvers

·       A constraint-based automatic layout system must have some way to resolve the constraints with which it is presented.

·       Automated layout techniques all solve a form of the constraint satisfaction problem (CSP).

·       Both randomized and deterministic algorithms have been applied to solve the problems in this field.

·       The constraint solvers apply either a local or a global methodology.


Local Techniques

similar to inductive reasoning, where a small subset of the universe is first solved.


Global Techniques

Inconsistency Policies



Heuristics are more flexible, whereas metrics are easier to incorporate into computer systems


Constraint-Based Document Layout for the Web

Alan Borning, Richard Kuang-Hsu Lin, and Kim Marriott


1.     both the authoring tool and the viewing tool can perform runtime constraint solving.

2.     the authoring tool uses a runtime constraint solver, but only a restricted set of constraints is available to the viewer.

Constraint-Based Page Layout

·       Constraints can specify the core aspects of the design layout

·       Constraints capture the “semantics” of the design, those aspects that must hold true for the layout to be appealing.

·       Designer can specify placement of the document elements using linear arithmetic equalities and inequalities

·       Such constraints allow easy specification of table, column, and image placement in a way that scales gracefully.

·       Designer can also use constraints on font sizes to control the appearance of text, allowing the document appearance to capture the desired “look and feel” regardless of which fonts are available to the browser.


Two Column Layout for the Abacus Document


(1) PW = LG +MG+ RG +CW1 +CW2

(2) CW1 = CW2

(3) LG = RG = 0.05 ×CW1

(4) MG = 0.7cm

(5) FigA.midx = LG+ 0.5 ×CW1

(6) FigB.midx = LG +CW1 +MG+ 0.5 ×CW2

(7) FigA.top = FigB.top

(8) FigA.width <= CW1

(9) FigB.width <= MG+CW2 + RG

(1) the page width, PW, is the sum of the widths of the left, middle and right gutters LG, MG, and RG, and the two columns, CW1 and CW2.

(2) the two columns have equal width;

(3) the left and right gutters are equal and are 1/20 of the width of the columns;

(4) the middle gutter is of fixed size (0.7 cm);

(5) the x value of the midpoint of Figure A is at the center of the first column;

(6) Figure B is centered in the second column; while the last equality

(7) enforces that the two figures are horizontally aligned.



e.g. ,

if PW = 21.7 cm then LG = RG = MG = 0.5 cm and CW1 = CW2 = 10 cm.

·       Left and right margins scale with respect to the page size while the middle gutter has an absolute size.

·       Model is too simple

o      Does not allow the designer to state preferences for values.

e.g., for a given PW the equations do not constrain the vertical placement of Figures A and B.


Model Extension:

·       Allows user to specify that an inequality or equality is preferred but not required

the constraint should be satisfied when possible but does not need to be.


·       Constraint hierarchies formalize preferences.

o      A constraint hierarchy consists of collections of constraints each labeled with a strength.

o      Strength labels denote preferences.

o      There can be an arbitrary number of such strengths

o      Constraints with stronger strength labels are satisfied in preference to ones with weaker strength labels.


·       In example:

o      equalities and inequalities are required constraints

o      weak, medium, and strong to label non-required constraints.

o      strength of each constraint is chosen by the designer.

o      Stronger strengths are used to preserve the “structure” of an object such as the height and width of an image

o      Weaker constraints are used for placement.


·       The constraint solver must find a solution to the variables that:

o      satisfies the required constraints exactly

o      satisfies the preferred constraints as well as possible, giving priority to the stronger preferred constraints.


·       Preferred values for variables can be modeled as simple non-required constraints of the form v = c for a variable v and constant c.

e.g. useful for font sizes


(1) PW = LG +MG+ RG +CW1 +CW2

(2) CW1 = CW2

(3) LG = RG = 0.05 ×CW1

(4) MG = 0.7cm

(5) FigA.midx = LG+ 0.5 ×CW1

(6) FigB.midx = LG +CW1 +MG+ 0.5 ×CW2

(7) FigA.top = FigB.top

(8) FigA.width <= CW1

(9) FigB.width <= MG+CW2 + RG


medium TextFontSize = 12pt

weak CaptionFontSize = TextFontSize

weak HeadingFontSize = 2.2 × TextFontSize



o      Above example:

o      constraints which specify the medium preference that the text font size is 12 pt

o      two weak strength constraints relating the caption font size and heading font size to the text font size.

o      What happens if the constraint system is unsatisfiable for a given page width?

o      Two possibilities.

1.     use a scroll bar which allows the viewer to scroll over the smallest valid layout.

2.     better solution is to provide an alternative design for the case when the page width is too small.

o      In this case the designer might wish to use a single column with the following constraints:

PW = LG +CW + RG

LG = RG = 0.6cm

FigA.leftx = LG

FigB.leftx = LG

FigA.width <= CW

FigB.width <= CW

PW <= 26cm

medium TextFontSize = 11pt

weak CaptionFontSize = 1.1 × TextFontSize

weak HeadingFontSize = 2× TextFontSize


·       Constraints specify:

o      the page has a single column of width CW

o      left and right gutters of width 0.6 cm

o      Figures A and B are aligned on the left gutter

o      the column has to be wide enough to fit in the figure.

o      This design is valid for 12.2 <= PW <=  26.

An example layout using these constraints :


·       Designer can provide multiple constraint style sheets

·       Each style sheet includes constraints:

o      that define the layout of the design

o      that dictate when the design is appropriate.

·       Constraints can be required or annotated with a strength such as “weak” indicating that they are preferred.

·       During manipulation by the viewer:

o      the viewing tool will choose the appropriate style sheet and layout the document subject to the constraints in the sheet.

o      As the viewer changes the requirements, the document will be redisplayed using the current style sheet if possible.

o      If the required constraints become inconsistent with the viewer’s desires, the viewing tool will choose another style sheet for the document that is consistent with the viewer’s constraints.



o      if the viewer originally displays the document in a window of width 28 cm, then resizes the window to 20 cm, the design will change from two column to one column.

o      If the viewer resizes it back to 28 cm, the design will change back to two column.

·       These requirements arising from the browser may be viewed as required constraints.

e.g.  the constraint

PW = 20cm

results when the browser window size is changed.

·       The browser may also place constraints on the values that font sizes can take, e.g.

TextFontSize Î {6, 8, 10, 12, 18, 36, 72}

·       Constraints may be provided by the viewer, as well as by the designer and the browser software.

e.g., a sight-impaired viewer might add the required constraints

TextFontSize >= 16pt

CaptionFontSize >= 16pt

HeadingFontSize >= 16pt


More complex examples :

Constraint style sheet for a wide page with two column layout


Different style sheet for a narrower page with one column layout.


Each layout:

·       constraints ensure that the central abacus figure is centered

·       surrounding labels remain appropriately aligned as the window is resized or other edits performed.

·       Invisible “expanding” boxes on either side of the figure ensure that text only appears above and below the figure.

·       Each style sheet contains approximately 200 constraints.






e.g., an article might have a “body text” stream containing the main text of the article and a “figure” stream containing the illustrations and photographs accompanying the text.


·       Note how each one automatically adapts to portrait and landscape orientations by changing the configuration of layout elements.





·       System adapts page layouts to the attributes and characteristics of the target display and the content at hand by dynamically determining the size and placement of the elements in a template.


·       Constraint system :

o      a pool of constraint variables,

o      values are determined by a mathematical expression in terms of the other constraint variables



Choosing Templates:


Figure shows how a single template might adapt to a range of page sizes but switch to a different layout when the page is too wide.



Desired Pagination

o      The system must decide which template to use for each page and how much content to put into each template.

o      The system’s paginator must account for several factors:

o      aesthetic and typographic measures (such as the presence of widowed and orphaned lines of text)

o      proximity of figures to the places in the text that reference them

o      the fullness of the document’s pages.

o      These factors all go into a quality score for a particular pagination.

o      The paginator tries to find a sequence of pages that produces the highest score.

o      Optimal pagination - a measure of “badness” must be defined to reflect the various properties to calculate a numeric score.


o      Pagination algorithm :

  1. computes all solutions for the first page
  2. computes the solutions for the second page using the previously computed first pages as starting points.


o      Top row is a “first fit” pagination.

Undesirable layout choices (such as figure references not placed on the same page as the referenced figure), as well as widowed and orphaned lines of text,


System Requirements:

  1. Representation for templates and content flexible enough to represent different style attributes, layout elements, and constraint-based relationships
  2. Layout engine to format document on the fly
  3. Paginator that can determine that can determine the globally optimal pairing of content with templates
  4. Template authoring tool for creating adaptive templates