PSL: A Constraintbased, Adaptable Style Sheet Language

1
PSL A Constraint-based, Adaptable Style Sheet
Language

• Ethan V. Munson
• Dept. of EECS
• University of Wisconsin - Milwaukee

2
PSL Overview

• A declarative style sheet language
• Simple syntax and consistent semantics
• few special cases
• Built around general language facilities
• supports arbitrary expressions, if-then-else
  constructs
• Medium-independent (works with many media)
• Supported by Proteus, a style sheet system
• Represents a midpoint between CSS and XSL

3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
(No Transcript)
7
MEDIUM mosaic PRESENTATION links FOR
html DEFAULT LineHeight self.fontSize
1.5 ELABORATIONS url Content
(getAttribute(creator, "href")) visible
Yes fontSize 14 breakAfter Yes
arrow Markup ("ltIMG src\"arrow-grey.gif\"gt"
) visible Yes RULES HTML
MarginWidth 10 fontSize 12
visible No
A visible Yes fontSize 18
fgColor "blue" underlineNumber 1
createRight (arrow, url)
8
Presentation Services

• Property Propagation - assigns values to the
  formatting properties of each element
• Box Layout - a constraint-based layout system
• elements can be positioned in any order
• Tree Elaboration - adds content to the
  presentation

9
Property Propagation

• The presentation of an element is specified by
  associating property rules with the element's
  name
• BLOCKQUOTE
• fontSize 14
• fontFamily "Times"
• lineHeight Self . fontSize 1.5
• marginLeft LeftSib . marginLeft 10

10
Property Propagation

• Properties are typed
• types include boolean, real, string, and
  enumerations
• Property rules
• ltproperty namegt ltexpressiongt
• arbitrary expressions allowed
• many standard mathematical expressions and
  functions
• sin, cos, max, min, trunc, round
• types of property and expression must match
• currently, no implicit type casting

11
Property Propagation (cont.)

• Property access expression
• ltnode expressiongt . ltproperty namegt
• Tree traversal functions
• Parent, LeftSib, RightSib, Self, Root
• FirstChild, LastChild, NthChild
• Example The fontSize of a cousin node
• FirstChild(LeftSib(Parent)) . fontSize

A
B
C
F
D
E
12
Default Rules

• Property values are always defined
• Eliminates some unpredictability
• Order of evaluation
• Node-specific rule
• Explicit default rule
• Implicit default rule
• inheritance (e.g. fontSize Parent .
  fontSize)
• Per-attribute default value
• e.g. Italic No

13
Box Layout

• Constraints between bounding boxes
• Four attributes per dimension
• Extent, minimum, maximum, center
• two degrees of freedom
• Dimensions and attribute names may vary between
  applications
• Uses property propagation
• Position rules have special syntax
• ltposition namegt ltpoint namegt ltexprgt

14
Box Layout (cont.)

• Examples
• Width LeftSib . Width 2
• Height 100
• HorizPos Left LeftSib . Right
• VertPos VMiddle 250

15
Specified vs. Actual Layout

• The actual layout of objects sometimes differs
  from our nominal specifications
• Graphics affected by strokewidth and rotation
• Paragraphs can be short

A short paragraph.
Actual Width
Specified Width
16
ltTITLEgt Another Document lt/TITLEgt ltBODYgt ltPgt PSL
provides general language mechanisms ltOLgt
ltLIgt expressions, ltLIgt tree navigation
functions, ltLIgt conditions through an
if-then-else construct, ltLIgt tree
elaboration, ltLIgt access to both specified
and actual layout, and ltLIgt constraint-based
layout. lt/OLgt
HTML source
PSL provides general language mechanisms 1.
expressions, 4. tree elaboration, 2. tree
navigation functions, 5. access to both specified
and actual 3. conditions through an if-then-else
layout, and construct, 6.
constraint-based layout.
Formatted into two columns
17

• Two Column Layout in PSL
• Each list item follows the previous one
• has the same left edge
• its top is below the bottom of the previous item
• Except the list item that starts the second
  column
• placed at the top of the list, moved to the right
• for n list items, this is the ( n / 2 1 ) item

Bounding Boxes Red for OL and Blue for LI
18
PSL style sheet

• LI
• if ( childNum (Self) round (NumChildren(Parent
  ) / 2 1) ) then
• VertPos Top Parent . Top
• HorizPos Left LeftSib . Left 200
• else
• VertPos Top LeftSib . Actual Bottom
• HorizPos Left LeftSib . Left
• endif
• Width 200

Bounding Boxes Red for OL and Blue for LI
19
Tree Elaboration

• Adds generated material to document tree
• Generated nodes are first-class elements
• Can have their own property values and own
  creations
• Semantics of rules are the same as for source
  document nodes
• One node can create several others
• Two steps
• Declaration in Elaborations section
• Creation in Rules section
• Can create siblings or children

20
(No Transcript)
21
MEDIUM mosaic PRESENTATION links FOR
html DEFAULT LineHeight self.fontSize
1.5 ELABORATIONS url Content
(getAttribute(creator, "href")) visible
Yes fontSize 14 breakAfter Yes
arrow Markup ("ltIMG src\"arrow-grey.gif\"gt"
) visible Yes RULES HTML
MarginWidth 10 fontSize 12
visible No
A visible Yes fontSize 18
fgColor "blue" underlineNumber 1
createRight (arrow, url)
22
Why no tree transformations?

• Tree transformations have three purposes
• add material
• delete material
• reorder material
• PSL doesnt use arbitrary tree transformations
• Tree elaboration adds material
• it is a tree transformation, albeit a restricted
  one
• Visibility attributes can hide material
• Box (constraint-based) layout can reorder material

23
Reverse order list
LI HorizPos Top RightSib . Actual
Bottom
PSL provides general language mechanisms 6.
constraint-based layout. 5. access to both
specified and actual layout, and 4. tree
elaboration, 3. conditions through an
if-then-else construct, 2. tree navigation
functions, 1. expressions,
24
Interface Functions

• Extension mechanism
• Allows applications to add concepts to language
• medium-specific information
• e.g. area of irregular graphic shapes
• editing state
• e.g. selection, cursor location
• results of document analysis
• e.g. XML/HTML attribute values, spell checking
• useful functions not built-in to PSL
• roman numeral strings

25
MEDIUM mosaic PRESENTATION links FOR
html DEFAULT LineHeight self.fontSize
1.5 ELABORATIONS url Content
(getAttribute(creator, "href")) visible
Yes fontSize 14 breakAfter Yes
arrow Markup ("ltIMG src\"arrow-grey.gif\"gt"
) visible Yes RULES HTML
MarginWidth 10 fontSize 12
visible No
A visible Yes fontSize 18
fgColor "blue" underlineNumber 1
createRight (arrow, url)
26
Proteus

• PSL style sheet interpreter
• Portable C library
• Configurable
• can support any application using any medium
• configured by MSPEC specification language
• based on a formal model of media
• Has been used in two research prototypes
• Ensemble and MPMosaic
• plus undergraduate ASCII XML formatter projects

27
Proteus Features

• Fast, space-efficient runtime system
• Lightweight
• Based on Hudsons incremental attribute evaluator
• Supports multiple simultaneous presentations

28
Configuring Proteus and PSL

• Application designer writes MSPEC specification
• Primitive data types
• name and type signature(s) for creation
• Attributes
• name and type
• Dimensions
• attribute names
• Interface functions
• name and type signature
• C glue

29
PSL Pragmatics

• Vestigial syntactic features
• Position names
• Unrecognized property names are illegal
• Node function syntax
• Needed features
• Contextual selectors
• Integer type
• User documentation
• e.g. some changes since 1996 paper
• Units of measure (cm, inch, pt, second, minute)

30
Proteus Pragmatics

• Distribution available in July
• Unix-based
• but no Unix system calls, so it should port
  easily
• Tutorial on our Web site
• Plenty of known bugs (some even documented)
• Cyclic dependencies cause crashes
• Conditional statement support is unstable
• Problems on Alpha processors (little-endian?)
• due to details of bit-level manipulations for
  space efficiency

31
Conclusions

• PSL shows that it is possible to have
• A declarative style sheet language with
• simple syntax,
• straightforward, general semantics, and
• considerable power

32
For more information

• General information on PSL/Proteus
• www.cs.uwm.edu/multimedia
• PSL
• PSL A New Presentation Language for Structured
  Documents
• MSPEC/Theory of Media
• A Representation of Media for Authoring and
  Browsing Systems
• More papers available on our Web site