SDPL 2006 4: Introduction to Style Sheets 1

4. Introduction to Style Sheets4. Introduction to Style Sheets

Discussed recently: Discussed recently: – (APIs for) procedural manipulation of documents(APIs for) procedural manipulation of documents

Now a more human point of view:Now a more human point of view:– How to specify and produce the How to specify and produce the visual visual

representationrepresentation of structured documents? of structured documents?

Concepts, properties and requirements Concepts, properties and requirements of style systems on a general levelof style systems on a general level– later examples of concrete style languages later examples of concrete style languages

(CSS, XSL)(CSS, XSL)

SDPL 2006 4: Introduction to Style Sheets 2

Introduction to Style SheetsIntroduction to Style Sheets

(Inspired by (Inspired by Brüggemann-Klein & Wood: Electronic Style Brüggemann-Klein & Wood: Electronic Style Sheets. Univ. Freiburg, Institut für Informatik, Bericht 43, 1992Sheets. Univ. Freiburg, Institut für Informatik, Bericht 43, 1992))

Declarative markup of structured documents Declarative markup of structured documents indicates only the indicates only the syntacticsyntactic structure structure– no no semanticssemantics (processing, formatting, …) (processing, formatting, …)

Electronic style sheetsElectronic style sheets– specify layout and appearance of document specify layout and appearance of document

contentcontent– e.g., Word styles, or LaTeX style files (macros), e.g., Word styles, or LaTeX style files (macros),

FrameMaker templates;FrameMaker templates;CSS and XSL style sheetsCSS and XSL style sheets

SDPL 2006 4: Introduction to Style Sheets 3

Style Sheets?Style Sheets?

((TyylisivuTyylisivu tai tai tyylisäännöstötyylisäännöstö)) In traditional publishing: set of rules about In traditional publishing: set of rules about

diction and language for some manuscriptdiction and language for some manuscript Electronic style sheetsElectronic style sheets

– deal with deal with graphical layoutgraphical layout of documents of documents (In future with (In future with auralaural properties, too?) properties, too?)

– setting and changing of properties controlling setting and changing of properties controlling layout and appearance of document contentlayout and appearance of document content

– define a mapping from documents define a mapping from documents (structure+content) to external representation on a (structure+content) to external representation on a presentation medium (paper, screen, audio, …)presentation medium (paper, screen, audio, …)

SDPL 2006 4: Introduction to Style Sheets 4

Why Style Sheets?Why Style Sheets?

Separation of content and presentation is a Separation of content and presentation is a basic "dogma" in structured documentingbasic "dogma" in structured documenting– supports maintenance and multi-use of documentssupports maintenance and multi-use of documents– (unnecessary complication for single-purpose or (unnecessary complication for single-purpose or

single-use documents)single-use documents) Relationship between documents and style Relationship between documents and style

sheets is many-to-manysheets is many-to-many– single style for many documentssingle style for many documents

» → → manageability (say, of appearance of a Web site)manageability (say, of appearance of a Web site)

– many styles for a single documentmany styles for a single document» →→ multiple output media (print, different Web clients, hand-multiple output media (print, different Web clients, hand-

held-devices, …)held-devices, …)

SDPL 2006 4: Introduction to Style Sheets 5

Tasks of a Style SheetTasks of a Style Sheet

Style sheet guides the Style sheet guides the transformationtransformation of of– descriptive markup into formatter input descriptive markup into formatter input

(stream of formatting commands and text)(stream of formatting commands and text)» called called transcriptiontranscription by Brüggemann-Klein & Wood by Brüggemann-Klein & Wood

““Styling = transforming + formatting”Styling = transforming + formatting”– corresponds to corresponds to

XSL = XSLT (transformation language) + XSL = XSLT (transformation language) + XSL FO (formatting language) XSL FO (formatting language)

SDPL 2006 4: Introduction to Style Sheets 6

Formatter Formatter ((muotoilinmuotoilin, , muotoiluohjelmamuotoiluohjelma))

FormatterFormatter isis a device (program) capable to a device (program) capable to format a document (obviously!), format a document (obviously!), which involves which involves – hyphenation (breaking of character sequences)hyphenation (breaking of character sequences)– typeface attribution (characters into typeface attribution (characters into glyphsglyphs))

» e.g, single glyphe.g, single glyph for "for "fi"fi"– line breaking (assembling glyphs into lines)line breaking (assembling glyphs into lines)– page breaking (grouping lines onto pages)page breaking (grouping lines onto pages)

ffii

SDPL 2006 4: Introduction to Style Sheets 7

Process of Transformation (Process of Transformation (muunnosmuunnos))

doc

Structu red docum ent

sect id="sec t3 "

xre f

Formatter input

TransformationTeX

FOT (XSL formatting object tree)

Style sheet

- Latex style file, CSS, XSLT

SDPL 2006 4: Introduction to Style Sheets 8

Process of Formatting (Process of Formatting (muotoilumuotoilu))

Creates a detailed description of presentationCreates a detailed description of presentation

– > style sheet may not have complete control of the > style sheet may not have complete control of the final formatted presentation!final formatted presentation!

Form atter

Formatter input- T eX ,FO T

(X S L fo rm attingo bject tree) TeX , FOP , ...

D escr. o fpresenta tion- DVI, PS, PDF

SDPL 2006 4: Introduction to Style Sheets 9

Process of Rendering (Process of Rendering (hahmonnushahmonnus))

Display/play the document on output mediumDisplay/play the document on output medium

Prin ter d riverDVI,PS,PDF

So me te x t lin e s So me te x t lin e s So me te x t lin e s So me te x tlin e So me te x t lin e s So me te x t lin e s So me te x t lin e s So me te x tlin e So me te x t lin e s So me te x t lin e s So me te x t lin e s So me te x tlin e So me te x t lin e s So me te x t lin e s So me te x t lin e s So me te x t

lin e So me te x t lin e s So me te x t lin e s So me te x t lin e

s So me te x t lin e So me te x t lin e s So me te x t lin e s So me te x tlin e s So me te x t lin e So me te x t lin e s So me te x t lin e s So me te x tlin e s So me te x t lin e So me te x t lin e s So me te x t lin e s So me te x tlin e s So me te x t lin e So me te x t lin e s So me te x t lin e s So me te x t

lin e s So me te x t lin e So me te x t lin e s So

me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e sSo me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e sSo me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e sSo me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e sSo me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e sSo me te x t lin e s So me te x t lin e s So me te x t lin e So me te x t lin e s

So me te x t lin e s So me te x t lin e s So me te x t lin e

D isp lay d river

SDPL 2006 4: Introduction to Style Sheets 10

Style RulesStyle Rules

Style sheet is a set of Style sheet is a set of style rulesstyle rules– Attach transformations to document elementsAttach transformations to document elements

Most style rules in practiseMost style rules in practise structure-based structure-based– associated to associated to instancesinstances of element types in the of element types in the

document structure treedocument structure tree AlsoAlso grammar-based grammar-based style rules have been style rules have been

studiedstudied– associated to occurrences of associated to occurrences of element types inelement types in the the

document document grammargrammar

SDPL 2006 4: Introduction to Style Sheets 11

Transcription typesTranscription types

Fundamental operations of style rules fall into Fundamental operations of style rules fall into followingfollowing transcription types transcription types::1. calls of parameterised formatting tasks1. calls of parameterised formatting tasks

2. generation of text2. generation of text

3. automatic numbering3. automatic numbering

4. rearrangement of elements4. rearrangement of elements

Application of transcriptions can depend on Application of transcriptions can depend on the the contextcontext the element the element

SDPL 2006 4: Introduction to Style Sheets 12

Context Specification (1)Context Specification (1)

General rule:General rule:– semantically equivalent structures (instances of the semantically equivalent structures (instances of the

same element type) should be formatted identicallysame element type) should be formatted identically Exceptions Exceptions (due to conventions, aesthetics, etc)(due to conventions, aesthetics, etc)

– all paragraphs indented, all paragraphs indented, exceptexcept for the first one for the first one– headings numbered headings numbered 1, 2,1, 2, … in … in bodybody butbut

A), B),A), B), … in … in appendixappendix– author lists in references: ‘‘author lists in references: ‘‘Aho and UllmanAho and Ullman’’ (just a ’’ (just a

few) vs ‘‘few) vs ‘‘Aho et al.Aho et al.’’ (’’ (ifif several authors) several authors)– indication of target element type (indication of target element type (Table, Figure, Table, Figure,

Section,Section, ...) for cross references ...) for cross references

SDPL 2006 4: Introduction to Style Sheets 13

Context Specification (2)Context Specification (2)

Need access to ancestors, siblings, Need access to ancestors, siblings, descendants, targets of cross references descendants, targets of cross references

Context conditions by a Context conditions by a context predicatecontext predicate– Boolean expression built of Boolean expression built of

» a reference to the a reference to the current elementcurrent element » functions like functions like parent, leftSibling, leftMostSibling, parent, leftSibling, leftMostSibling,

children, children, andand ref ref– Rule applied if the context condition is trueRule applied if the context condition is true

Context specification orthogonal to Context specification orthogonal to transcription types transcription types (In XSL through the XPath expression language)(In XSL through the XPath expression language)

SDPL 2006 4: Introduction to Style Sheets 14

Parameterised Formatting TasksParameterised Formatting Tasks

The most common transcription type:The most common transcription type: set formatting characteristics for sub-elementsset formatting characteristics for sub-elements

– typeface attribution (for strings or typeface attribution (for strings or inline-elementsinline-elements))– line breaking (for paragraphs or line breaking (for paragraphs or blocksblocks))– page breaking (for documents)page breaking (for documents)– parameterised by type size, line length, indentation, parameterised by type size, line length, indentation,

page height…page height… Hierarchy of elements Hierarchy of elements

hierarchy of nested formatting tasks hierarchy of nested formatting tasks hierarchy of nested presentation areas hierarchy of nested presentation areas

SDPL 2006 4: Introduction to Style Sheets 15

Hierarchy in FormattingHierarchy in Formatting

Document structureDocument structure Formatting tasks / Formatting tasks / presentation areaspresentation areas

create pagescreate pages

create blockcreate block

create blockcreate block

SDPL 2006 4: Introduction to Style Sheets 16

Derived or Inserted ContentDerived or Inserted Content

boilerplate textboilerplate text– text not present in the source documenttext not present in the source document– e.g., letter headings, © marks, bullets, …e.g., letter headings, © marks, bullets, …

textual content inserted at the beginning textual content inserted at the beginning or at the end of the current elementor at the end of the current element

table of contents, indexestable of contents, indexes– need to specify the source of included need to specify the source of included

materialmaterial

SDPL 2006 4: Introduction to Style Sheets 17

Numbering (1)Numbering (1)

Different schemesDifferent schemes– consecutively through documentconsecutively through document

» same numbering sequence, possibly common to a same numbering sequence, possibly common to a set of element types (e.g., for Theorems and set of element types (e.g., for Theorems and Examples)Examples)

– nested numbering for, say, nested listsnested numbering for, say, nested lists» relative to occurrences of another element type relative to occurrences of another element type

higher in document hierarchyhigher in document hierarchy

SDPL 2006 4: Introduction to Style Sheets 18

Numbering (2)Numbering (2)

Example of different numbering schemes:Example of different numbering schemes:SectionSection 11

TheoremTheorem 11, or , or 1.11.1FigureFigure 22, or , or 11, or , or 1.21.2, or , or 1.11.1

SectionSection 22

TheoremTheorem 33, or , or 22, or , or 2.12.1 often via named often via named counterscounters with a start value with a start value

and a scope (e.g., in CSS2)and a scope (e.g., in CSS2)– In XSLT: special expressions for generating In XSLT: special expressions for generating

numbersnumbers

SDPL 2006 4: Introduction to Style Sheets 19

Sub-element RearrangementSub-element Rearrangement

ExamplesExamples– reverse the order of titles and authors in reverse the order of titles and authors in

referencesreferences– sorting of the reference listsorting of the reference list

» requires functions operating on textual contentsrequires functions operating on textual contents

Sub-element Sub-element suppressionsuppression a special case a special case Rearrangement not supported by the weakest Rearrangement not supported by the weakest

style systems (e.g., CSS)style systems (e.g., CSS)

SDPL 2006 4: Introduction to Style Sheets 20

Example: Styling a simple reportExample: Styling a simple report

ReportReport BodyBody SecSec

AppsApps

HeadHead ParaPara ParaPara

"Foo...""Foo..." "Bar ... "Bar ... <xref rid='a1'/><xref rid='a1'/>.."""Intro""Intro"

BiblioBiblio ItemItem

TitleTitle AuthAuth AuthAuth AuthAuth AuthAuth

"XSL""XSL" "C""C" "D""D" "E""E" "F""F"ItemItem

TitleTitle AuthAuth AuthAuth"CSS""CSS" "A""A" "B""B"

SecSecHeadHead ParaPara "XEP...""XEP...""Tools""Tools"

id='a1'id='a1'

SDPL 2006 4: Introduction to Style Sheets 21

Example: Formatted ResultExample: Formatted Result

1. Intro1. Intro

Foo... .... .... .. .. Foo... .... .... .. .. ..... ... ... .... .......... ... ... .... .....

Bar... .... ..... ..Bar... .... ..... .... .. ..... .. ... .... .... .. ..... .. ... .... .... .(App. A, Tools)... .(App. A, Tools).

ReferencesReferences

......

C et al: XSL ...C et al: XSL ...

AppendicesAppendices

A: ToolsA: Tools

XEP .... .... .. .. XEP .... .... .. .. ..... ... ... .... ........ ... ... .... ...

...... ......

A and B:A and B: CSSCSS

SDPL 2006 4: Introduction to Style Sheets 22

Viewpoint on Style LanguagesViewpoint on Style Languages

Style languages should support traditional Style languages should support traditional stylistic conventions discussed abovestylistic conventions discussed above

Next a look at CSS, and later at XSLNext a look at CSS, and later at XSL– How do the discussed concepts appear in the How do the discussed concepts appear in the

languages?languages?– How do the languages support these general How do the languages support these general

requirements?requirements?