1 / 44

Style sheet languages

Style sheet languages. Johan Jeuring Utrecht University. Presenting documents. Fixed document structure - Formatting info in document (HTML,MSWord) - Formatting info in style sheet (HTML+CSS)

chidi
Download Presentation

Style sheet languages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 documentis 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 <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE> 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 }

  5. Formatting info in style sheetis 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 Is usually written with the help of a pretty printing library: empty :: Formats text :: String –› Formats indent :: Int –› Formats –› Formats (>|<) :: Formats –› Formats –› Formats (>-<) :: Formats –› Formats –› Formats

  7. A function formathas 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 <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE> 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 }

  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 exampleEM { font-size=parent[parent].font-size * 1.2 }cannot be specified.

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

  14. CSS: discussion 2 <TITLE> A Document </TITLE> <P> PSL provides general language mechanisms: <OL> <LI id=a> expressions, <LI id=b> tree navigation functions, <LI id=c> conditionals through an if-then-else construct, <LI id=d> tree elaboration, <LI id=e> access to both specified and actual layout, and <LI id=f> constraint-based layout. </OL> 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 <HTML> <HEAD> <TITLE> Table example </TITLE> <LINK REL=“stylesheet” HREF=“table.css” TYPE=“text/css”> </HEAD> <BODY> <TABLE ID=t> <COL ID=c1 CLASS=medcol> <COL ID=c2> <TR> <TD COLSPAN=2> <IMG ID=i1 SRC=“bach1.gif”></TD> </TR> <TR> <TD>Text1</TD> <TD>Text2</TD> </TR> </TABLE> </BODY> </HTML> #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 .medcol { width:30% }

  20. Finite domain constraints <HTML> <HEAD> <TITLE> Simple example </TITLE> <LINK REL=“stylesheet” HREF=“simple.css” TYPE=“text/css”> </HEAD> <BODY> <H1 ID=h>Boring quotes</H1> <P ID=p>Stop reading this because <BLOCKQUOTE ID=q1>She said that <BLOCKQUOTE ID=q2>He said that </BLOCKQUOTE> </BLOCKQUOTE> </P> </BODY> </HTML> #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 H1 { font-size:13pt } P { font-size:11pt } BLOCKQUOTE { font-size:90% }

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

  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: <HTML> <HEAD> <TITLE> A Sample HTML document </TITLE> <BODY> <H1> <A href=“http://www.w3.org/Style”>Style sheets</A> </H1> <UL> <LI> Give users control of formatting <LI> Support the accessibility goals of the <A href=“http://www.w3.org/WAI”>Web Accessibility Initiative</A> <LI> Support multiple presentations </UL> 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 (“<BR>”) { visible=Yes; } arrow: Markup (“<IMG src=arrow-grey.gif>”) { 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:<property> = <expression>; • Expressions may contain references to attributes of other nodes:<node expression > . <property name>;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 <property> = Parent . <property>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 <position name> : <point name> = <expression> 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 <person> <firstname>Johan</firstname> <surname>Jeuring</surname> <address>Padualaan 14</address> <city>Utrecht</city> </person> Using CSS, this cannot be transformed into: Name: Jeuring Johan City: Utrecht <stylesheet> <template match=“person”> <apply-templates select=“surname”/> <apply-templates select=“firstname”/> <BR> <apply-templates select=“city”/> </template> </stylesheet> In XSL:

  36. XSL Stylesheets • An XSL stylesheet looks as follows:<stylesheet> ...</stylesheet>or with transform instead of style sheets • Each style sheet consists of a number of template rules<template match=“para”> ...</template>

  37. Recursive processing <para>An <emph>emphsized</emph> word.</para>. <template match=“para”> <apply-templates/> </template> <template match=“emph”> <apply-templates/> </template>

  38. Reordering children <template match=“person”> <p>Name : <apply-templates select=“surname”/> , <apply-templates select=“firstname”/> </BR> City: <apply-templates select=“city”/> </BR> </template> <template match=“intro”> <apply-templates select=“//chapter/title”/> </template>

  39. Creating new elements <template match=“person”> <apply-templates/> <element name=“contact”> ... </element> </template>

  40. Computing values <template match=“text()”> <value-of select=“.”/> </template> <variable name=“Colour”>red</variable> <h1>The colour is <value-of select=“$Colour”/>.</h1> <value-of select=“2001 - Birthdate[Year]”/>

  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 <template name=“make_table”> <td> <font face=“Times, serif” color=“blue” size=“2”> <b> <value-of select=“.”/> </b> </font> </td> </template> <template match=“person”> <call-template name=“make_table”> </template>

  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.

More Related