1. Style sheet languages Johan Jeuring Utrecht University

2. Presenting documents Fixed document structure - Formatting info in document (HTML,MSWord) - Formatting info in style sheet (HTML+CSS) Generic document structure - Formatting info in style sheet (XML+CSS) - Function format :: Document_Structure –› Formats

3. Formatting info in document is bad No reuse: to change the style of N docs, you have to edit all N docs. The target type is fixed, so it is impossible to have a media dependent style. Obfuscates the structure of a document.

4. CSS: example INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em } Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.

5. Formatting info in style sheet is good A single style sheet can be used for many docs. Domain specific language for pretty printing. Separation of concerns. Structure remains clear.

6. Function format :: Structure –› Formats empty :: Formats text :: String –› Formats indent :: Int –› Formats –› Formats (>|<) :: Formats –› Formats –› Formats (>-<) :: Formats –› Formats –› Formats Is usually written with the help of a pretty printing library:

7. A function format has its advantages and disadvantages A lot of control and flexibility Access to a programming language (Scheme, Haskell, OCaml, Lisp, ML, etc. have pretty printing libraries) Complicated: you have to write and compile a program for pretty printing Often limited set of `selectors’

8. CSS: example INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em } Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.

9. CSS A style sheet consists of rules: selector { declarations }. A selector is an element name ( h1 ) or an element name in a context ( h1 p ). A declaration assigns a value to a property ( font-size:32pt, color:blue, line-height:normal ). A large set of properties can be assigned.

10. CSS2 Many more selection options: - Wildcards: * - Child of a particular element: h1 > p - Following on an element: ul + p - First child: ul:first-child - Presence/value of attributes: ( price[currency=“fl”] ) - ID selector: ( Link#external ) Prefix and suffix generation: note:before {content: “NOTE: “; display:block}. Media dependent style sheets: @media screen { em {... } }, and print, handheld, aural, etc.

11. CSS processing model Create an abstract syntax tree from the source document. Identify the target media type. Retrieve all style sheets. Compute the values of the properties of the elements by means of a `fold’ over the tree (using inheritance and cascading). The algebra has the following type: Rules –› Attributes –› Environment –› Tree+Attributes Generate a formatting structure. Show the formatting structure on the target medium.

12. CSS: discussion 1 Mostly simple, easy to use. Limited control (no reordering, for example), limited expression power. For example EM { font-size=parent[parent].font-size * 1.2 } cannot be specified.

13. CSS: discussion 2 A Document PSL provides general language mechanisms: expressions, tree navigation functions, conditionals through an if-then-else construct, tree elaboration, access to both specified and actual layout, and constraint-based layout.

14. CSS: discussion 2 A Document PSL provides general language mechanisms: expressions, tree navigation functions, conditionals through an if-then-else construct, tree elaboration, access to both specified and actual layout, and constraint-based layout. LI { width : 200px; position: absolute; line-height:12px; } #a { top : 50; left : 0; } #b { top : 74px; left : 0; } #c { top : 98px; left : 0; } #d { top : 50; left : 200px; } #e { top : 74px; left : 200px; } #f { top : 98px; left : 200px; }

15. CSS: discussion 3 Complicated value language: P { font-size:12pt } P { font-size:medium } BLOCKQUOTE { font-size:larger } EM { font-size:200% } Inconsistent use of value language: EM { line-height:200% }

16. CSS: discussion 4 No possibilities to specify constraints: - Suppose I want two boxes of minimal width, wide enough to fit two items, and one is twice as wide and high as the other. - Suppose I want a font-size at least 11pt, anything larger is fine (so a browser can decide which font to choose).

17. Alternative style sheet languages Constraint Cascading Style Sheets (CCSS) PSL (Proteus Style Sheets) XSL (XML Stylesheet Language)

18. Constraint Cascading Style Sheets (CCSS)

19. Styles as constraints Table example Text1 Text2.medcol { width:30% } #t[width] = #c1[width]+#c2[width] REQUIRED #c1[width] >= width(“Text1”) REQUIRED #c2[width] >= width(“Text2”) REQUIRED #c1[width]+#c2[width]>= #i1[width] REQUIRED #t[width] = 0 WEAK #c1[width] = 0.3*#t[width] DESIGNER

20. Finite domain constraints H1 { font-size:13pt } P { font-size:11pt } BLOCKQUOTE { font-size:90% } #h[font-size] Є {9,10,12,16,36,72} REQUIRED #p[font-size] Є {9,10,12,16,36,72} REQUIRED #q1[font-size] Є {9,10,12,16,36,72} REQUIRED #q2[font-size] Є {9,10,12,16,36,72} REQUIRED #h[font-size] = 13 DESIGNER #p[font-size] = 11 DESIGNER #q1[font-size] = 0.9 * #p[font-size] DESIGNER #q2[font-size] = 0.9 * #q1[font-size] DESIGNER Simple example Boring quotes Stop reading this because She said that He said that

21. Overlapping rules H1 { font-size:13pt } P { font-size:11pt } BLOCKQUOTE { font-size:90% } BLOCKQUOTE BLOCKQUOTE { font-size:100% } #h[font-size] = 13 #p[font-size] = 11 #q1[font-size] = 0.9 * #p[font-size] #q2[font-size] = 0.9 * #q1[font-size] #q2[font-size] = 1.0 * #q1[font-size]

22. Solving constraints There are 7 classes of constraints in CCSS: weak, browser, user, designer, designer-important, user-important, required. The constraints consist of linear arithmetic equality and inequality constraints, which are solved by the Cassowary algorithm - incremental version of the simplex algorithm - minimizes the value of the `weighted-sum-better’ comparator. The font constraints are solved by a separate dynamic programming algorithm

23. The CCSS extension P { constraint: font-size <= (parent[parent])[font-size]+2 } @variable table-width; TABLE { constraint: width=table-width } @constraint #c1[width] = #c2[width] * {constraint: font-size>=12 !important }

24. CCSS evaluation Useful extension of CSS Inherits most of the problems from CSS

25. PSL

26. PSL: An example Document: A Sample HTML document Style sheets Give users control of formatting Support the accessibility goals of the Web Accessibility Initiative Support multiple presentations Desired presentation: Style sheets –› http://www.w3.org/Style Web Accessibility Initiative –› http://www.w3.org/WAI

27. A PSL Style sheet ELABORATIONS { linebreak: Markup (“ ”) { visible=Yes; } arrow: Markup (“ ”) { visible=Yes; } url: Content (getAttribute(creator, “href”)) { visible=Yes; fontSize=12; } } DEFAULT { lineHeight = Self.fontSize*1.5; } RULES { HTML {visible=No; fgColor=“black”; fontSize=14 } A { if (getAttribute(self, “href”) != “”) then visible=Yes; gfColor=black; underlineNumber=1; createRight(arrow, url, linebreak); endif }

28. Properties and rules Syntax: HTML {visible=No; fgColor=“black”; fontSize=14 } General form for property rules: = ; Expressions may contain references to attributes of other nodes:. ; where a node expression is a (composition of) Parent, LeftSib, RightSib, FirstChild, LastChild, NthChild, and a couple more.

29. Order of evaluation Node-specific rule DEFAULT section rule Inherited value: the rule = Parent. is added at each level for each property Initial value

30. Tree elaboration In general, tree transformation is not possible You can add nodes (Markup), text (Content), or pictures (Graphic) to a tree These components can be added to the left (CreateLeft) or right (CreateRight) of the current node, or as the first (CreateFirst) or last (CreateLast) child: CreateRight(arrow, url, linebreak)

31. Box Layout LI { if (ChildNum(Self) == round(NumChildren(Parent)/2+1) then VertPos: Top = Parent.Top; HorizPos: Left = LeftSib.Left+LeftSib.Width; else VertPos: Top = LeftSib.Actual Bottom; HorizPos: Left = LeftSib.Left; endif Width = 200; } : =

32. PLS evaluation Again, a useful extension of CSS Inconsistent treatment of box layout Limited expression power

33. Extensible Stylesheet Language (XSL)

34. What is XSL? XSL - Styling using formatting objects. Often uses the FO DTD XSLT - Transforming XML documents. You don’t want to author your documents with the formatting objects. XSLT is used to transform your source documents. - Add prefix or suffix text to the content - Remove, create, reorder and sort elements - Reuse elements elsewhere in the document - Transform to another format, or to HTML, or to an XML FO document

35. XSL: an example Johan Jeuring Padualaan 14 Utrecht Using CSS, this cannot be transformed into: Name: Jeuring Johan City: Utrecht In XSL:

36. XSL Stylesheets An XSL stylesheet looks as follows:... or with transform instead of style sheets Each style sheet consists of a number of template rules...

37. Recursive processing An emphsized word..

38. Reordering children Name :, City:

39. Creating new elements...

40. Computing values red The colour is.

41. XSL expressions Expressions are used for selecting nodes for processing (boolean expressions), selecting different processing ways, and generating text in the result tree. Expressions can be built from boolean operators, number operators, string operations, and a predefined set of functions (sum, round, ceiling). It is an error to use other functions.

42. Named templates

43. XSL Discussion Relatively powerful, declarative style sheet language Unattractive syntax Inconsistent use of XML mark up (in rules, but not in expressions, for example) No static checks, except for overlapping tags The generated tree cannot be processed by the processing style sheet (`one flow over the tree’) Limited form of definable first-order functions (named templates)

44. Style sheet languages: conclusions The development of style sheet languages for structured documents is an active research topic CSS and XSL each have their serious limitations CCSS adds constraints to CSS; a useful extension PSL adds a simple, limited attribute grammar system to CSS, also a useful extension I would like to have a combination of CCSS and PSL, combined with a more powerful expression language.