Presentation of XML Documents

Size: px

Start display at page:

Download "Presentation of XML Documents"

Valerie Peters
5 years ago
Views:

1 Presentation of XML Documents Patryk Czarnik Institute of Informatics University of Warsaw XML and Modern Techniques of Content Management 2012/13

3 Stylesheets Separating content and formatting Separation of content and formatting According to XML best practices, documents should contain: pure content / data markup for structure and meaning ( semantic or descriptive markup) no formatting How to present? hard-coded interpretation of known document types, eg Libre Office rendering Writer document importing or pasting content into word processor or DTP tool and manual or automatic formatting, eg Adobe InDesign approach external style sheets Patryk Czarnik 05 Presentation XML 2012/13 4 / 1

Idea of stylesheet <person id="102103" position="specialist"> <person id="102105" position="assistant">

<last-name>gierasimczyk</last-name> <phone type="office">+48223213203</phone> <phone

type="mobile">+48501502503</phone> <email>paszkiewicz@examplecom</email> <email>gieras@examplecom</email>

4 Idea of stylesheet <person id="102103" position="specialist"> <person id="102105" position="assistant"> <first-name>dawid</first-name> <first-name>arkadiusz</first-name> <last-name>paszkiewicz</last-name> <last-name>gierasimczyk</last-name> <phone type="office"> </phone> <phone type="office"> </phone> <phone type="fax"> </phone> <phone type="mobile"> </phone> </person> </person> * font 'Times 10pt' * 12pt for name * abbreviation before phone number * yellow backgorund * blue font and border * italic font for name * typewritter font for

5 Stylesheets Separation of content and formatting Benefits of content and formatting separation General advantages of descriptive markup better content understanding and easier analysis Ability to present in the same way: the same document after modification another document of the same structure Formatting managed in one place easy to change style of whole class of documents Ability to define many stylesheets for a document class, depending on purpose and expectations: medium (screen / paper / voice) expected number of details (full report / summary) reader preferences (font size, colors, ) Patryk Czarnik 05 Presentation XML 2012/13 6 / 1

6 Stylesheets Separation of content and formatting Standards related to XML presentation General: Associating Style Sheets with XML Documents Stylesheet languages: DSSSL (historical, applied to SGML) Document Style Semantics and Specification Language CSS Cascading Style Sheets XSL Extensible Stylesheet Language Patryk Czarnik 05 Presentation XML 2012/13 7 / 1

7 Stylesheets Associating style with document Associating Style Sheets with XML Documents W3C Recommendation Processing instruction xml-stylesheet One style sheet <?xml-stylesheet type="text/xsl" href="defaultxsl"?> Alternative style sheets <?xml-stylesheet title="blue" type="text/css" href="bluecss"?> <?xml-stylesheet title="yellow" alternate="yes" type="text/css" href="yellowcss"?> <?xml-stylesheet title="big fonts" alternate="yes" type="text/css" href="bigcss"?> Patryk Czarnik 05 Presentation XML 2012/13 8 / 1

8 CSS Idea and applications Cascading Style Sheets Beginnings of style sheets idea: 1970s motivation different printer languages and properties CSS beginnings: 1994 CSS Level 1 Recommendation: December 1996 CSS Level 2 Recommendation: May 1998 implemented (more or less completely) in present-day internet browsers CSS 21 Recommendation: June 2011 CSS 2 corrected and made less ambiguous also, a bit less ambitious (unsupported features thrown out) CSS Level 3 work still in progress: modularisation new features supported in modern browsers Patryk Czarnik 05 Presentation XML 2012/13 10 / 1

9 Applications of CSS CSS Idea and applications First and main application: style for Web sites Separation of content and formatting for HTML Simple style sheets for XML Idea of accessibility Content should be accessible for all people, despite their personal or technical disabilities Support in CSS: media-dependent styles alternative presentation methods (eg voice) enabling reader to provide her/his own style (eg larger font and contrast colors for people with eyesight disability) Patryk Czarnik 05 Presentation XML 2012/13 11 / 1

10 Example XML CSS CSS sheet structure <company> <name>extremely professional company</name> <department id="acc"> <name>accountancy</name> <person id="102103" position="specialist"> <first-name>dawid</first-name> <last-name>paszkiewicz</last-name> <phone type="office"> </phone> <phone type="fax"> </phone> </person> <person id="102104" position="chief"> <first-name>monika</first-name> <last-name>domżałowicz</last-name> <phone type="office"> </phone> <phone type="mobile"> </phone> </person> <person id="102105" position="assistant"> <first-name>arkadiusz</first-name> <last-name>gierasimczyk</last-name> Patryk Czarnik 05 Presentation XML 2012/13 12 / 1

11 Example stylesheet CSS person { display: block; margin: 10px auto 10px 20px; padding: 075em 1em; width: 200px; border-style: solid; border-width: 2px; border-color: #003399; background-color: #F6F6F6; } person[position='chief'] { background-color: #DDFFDD; } first-name, last-name { display: inline; font-size: 12pt; } person[position='chief'] last-name { font-weight: bold; } CSS sheet structure Terminology rule selector { property: value; property: value } Patryk Czarnik 05 Presentation XML 2012/13 13 / 1

12 Result of formatting CSS CSS sheet structure Patryk Czarnik 05 Presentation XML 2012/13 14 / 1

13 CSS CSS sheet structure Selectors person element name first-name, last-name two elements department name descendant department > name child A + B element B directly following A name:first-child name being first child person[position] test of attribute existence person[position='chief'] attribute value test person[position~='chief'] value is element of list person#k12 value of ID-type attribute olstaff equivalent to ol[class~='staff'] (HTML specific) Patryk Czarnik 05 Presentation XML 2012/13 15 / 1

14 CSS CSS visualisation principles Formatting Blocks Content arranged into blocks of different kind display property establishes kind of block: block regular block with height and width inline fragment of text, subject to line wrapping other specific objects (tables, lists, etc) Box model Blocks nesting reflects nesting of elements in source document Additionally: borders, margins, relative or absolute positioning Patryk Czarnik 05 Presentation XML 2012/13 16 / 1

15 CSS Formatting CSS visualisation principles (2) Inheritance Nested elements inherit properties from parents does not apply to all properties Formatting Properties for various aspects of formatting size, position, borders, and margins text and fonts colour and background user interaction basic pagination properties aural properties Patryk Czarnik 05 Presentation XML 2012/13 17 / 1

16 CSS Formatting Some other capabilities of CSS CSS 2 Medium-dependent style Inserting content not existing in source document (labels etc) Multi-level counters CSS 3 Animation and effects Multi-column text More selectors Support for XML namespaces Patryk Czarnik 05 Presentation XML 2012/13 18 / 1

17 CSS Formatting CSS capabilities and advantages Rich visual formatting capabilities especially for single elements Elements distinguished basing on name placement within document tree existence and value of attributes Support internet browsers authoring tools Easy to write simple stylesheets :) Patryk Czarnik 05 Presentation XML 2012/13 19 / 1

18 CSS CSS lacks and drawbacks Formatting Only visualisation not conversion to other formats Some visual formatting issues eg confusing block size computing (moreover, for years incorrectly implemented in IE) Not possible: distinguish elements basing on their contents repeating the same content several times presenting elements in different order than in source (no general solution, only relative/absolute positioning) complex logical conditions data processing (eg summing numeric values) Patryk Czarnik 05 Presentation XML 2012/13 20 / 1

19 XSL Presentation by transformation Presentation by transformation <xsl:template> <xsl:value-of> <h2> <person> <first-name> <last-name> <salary> XML ("pure data") <xsl:variable> Definition of transformation (in role of styelsheet) <table> <tr> <td> Document for direct presentation In order to present a document, we can transform it into a format, that we know how to present Examples of presentable XML formats: XHTML XSL Formatting Objects Patryk Czarnik 05 Presentation XML 2012/13 22 / 1

20 XSL Presentation by transformation Extensible Stylesheet Language (XSL) First generation of recommendations (1999 and 2001): XSL (general framework, XSL Formatting Objects language) XSLT (transformation language) XPath (expression language, in particular paths addressing document fragments) XSL stylesheet transformation from XML to XSL-FO usually for a class of documents (XML application) in practice, transformation to other formats, often (X)HTML Patryk Czarnik 05 Presentation XML 2012/13 23 / 1

21 Original idea of XSL XSL Presentation by transformation cite: W3C, XSL 10 Patryk Czarnik 05 Presentation XML 2012/13 24 / 1

22 XSL Introduction to XSL Transformations XSLT XSL Transformations Application of XML (of course) Transformation definition ( transformation or stylesheet ) specifies how a source document translates into a result document Transformation at document tree level Patryk Czarnik 05 Presentation XML 2012/13 25 / 1

23 XSL XSLT stylesheet example Transformation from staff-xml to HTML Introduction to XSL Transformations <?xml version="10" encoding="utf-8"?> <xsl:stylesheet version="10" xmlns:xsl=" <xsl:output method="html" encoding="utf-8" /> <xsl:template match="/"> <html> <head> <title> <xsl:text>employees of </xsl:text> <xsl:value-of select="/firma/nazwa" /> </title> <style type="text/css"></style> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> Patryk Czarnik 05 Presentation XML 2012/13 26 / 1

24 XSL XSLT stylesheet example XML HTML <xsl:template match="company/name"> <h1> <xsl:apply-templates /> </h1> </xsl:template> Introduction to XSL Transformations <xsl:template match="department/name"> <h2> <xsl:apply-templates /> </h2> </xsl:template> Patryk Czarnik 05 Presentation XML 2012/13 27 / 1

25 XSL XSLT stylesheet example XML HTML Introduction to XSL Transformations <xsl:template match="person"> <div class="person"> <div class="name"> <xsl:apply-templates select="first-name" /> <xsl:text> </xsl:text> <xsl:apply-templates select="last-name" /> </div> <div class="phone"> <xsl:apply-templates select="phone" /> </div> <div class=" "> <xsl:apply-templates select=" " /> </div> </div> </xsl:template> Patryk Czarnik 05 Presentation XML 2012/13 28 / 1

26 XSL Introduction to XSL Transformations XSLT stylesheet structure Stylesheet (arkusz) consists of templates Template (szablon) specifies how to transform a source node into result tree fragment Inside templates: text and elements not from XSLT namespace copied to result XSLT instructions affects processing XPath in instructions access to source document, arithmetic, conditions testing, XSLT can be considered a programming language specialised for XML documents transformation Patryk Czarnik 05 Presentation XML 2012/13 29 / 1

27 XSL Introduction to XSL Transformations XSLT operation overview Transformation on tree level Template for document node (root) started first template exists even if we had not written it apply-templates within a template another templates called for other nodes, usually for children Templates matched according to node kind and name, location within document tree, etc Additional features: conditional processing, copying values and nodes from source, generating new nodes, grouping, sorting, Patryk Czarnik 05 Presentation XML 2012/13 30 / 1

28 XPath in XSLT XSL Introduction to XSL Transformations XPath expressions used for: accessing nodes and values from source document computing values checking logical conditions XPath constructions: paths (navigating through document tree) arithmetic and logical operators functions for numbers strings, etc Patryk Czarnik 05 Presentation XML 2012/13 31 / 1

29 XSL Introduction to XSL Transformations Basic approach to presentational XSLT Main template Setting shape of result document <xsl:template match="/"> <html> <head></head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> Typical internal template Translation of source elements into result elements (or fragments) <xsl:template match="abstract"> <p class="abstract"> <xsl:apply-templates /> </p> </xsl:template> Patryk Czarnik 05 Presentation XML 2012/13 32 / 1

30 XSL Formatting Objects XSL XSL-FO XML application designed for visual presentation Focused on printed media page templates ( masters ) automatic pagination Normally, XSL-FO documents are not written by hand but generated via XSLT Patryk Czarnik 05 Presentation XML 2012/13 33 / 1

31 XSL XSL-FO document structure XSL-FO Minimal example of XSL-FO document <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="my-page"> <fo:region-body /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="my-page"> <fo:flow flow-name="xsl-region-body"> <fo:block>hello World!</fo:block> </fo:flow> </fo:page-sequence> </fo:root> Patryk Czarnik 05 Presentation XML 2012/13 34 / 1

32 Transformation to XSL-FO (1/2) <?xml version="10" encoding="utf-8"?> <xsl:stylesheet version="10" xmlns:xsl=" xmlns:fo=" <xsl:output method="xml" encoding="utf-8"/> <xsl:template match="/"> <fo:root> <fo:layout-master-set> <fo:simple-page-master master-name="a4" > </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="a4"> <fo:flow flow-name="xsl-region-body"> <xsl:apply-templates /> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> </xsl:stylesheet>

33 Transformation to XSL-FO (2/2) <xsl:template match="person"> <fo:block padding="05em" margin="5mm 100mm 5mm 10mm" border-width="15pt" border-style="solid" border-color="#553300" page-break-inside="avoid"> <fo:block margin-top="05em"> <xsl:apply-templates select="phone"/> </fo:block> </fo:block> </xsl:template> <xsl:template match="phone"> <fo:block> <xsl:choose> <xsl:when </xsl:when> <xsl:otherwise>tel </xsl:otherwise> </xsl:choose> <xsl:apply-templates /> </fo:block> </xsl:template>

34 Example visualisation XSL XSL-FO Patryk Czarnik 05 Presentation XML 2012/13 37 / 1

35 XSL XSL-FO page-master page template Example Single page layout A document may be split in many such pages <fo:simple-page-master master-name="a4" page-width="297mm" page-height="210mm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm"> <fo:region-body margin="3cm"/> <fo:region-before extent="2cm"/> <fo:region-after extent="2cm"/> <fo:region-start extent="2cm"/> <fo:region-end extent="2cm"/> </fo:simple-page-master> Patryk Czarnik 05 Presentation XML 2012/13 38 / 1

36 Content of pages XSL XSL-FO page-sequence results in a number of pages flow content split into pages static-content content repeated on all pages flow-name page region reference Stylesheet fragment <fo:page-sequence master-reference="a4"> <fo:static-content flow-name="xsl-region-before"> Company <xsl:value-of select="name" /> staff </fo:static-content> <fo:flow flow-name="xsl-region-body"> <xsl:apply-templates /> </fo:flow> </fo:page-sequence> Patryk Czarnik 05 Presentation XML 2012/13 39 / 1

37 XSL-FO tree elements XSL XSL-FO Block level block list-block, list-item, list-item-label table, table-row, table-cell, Inline level inline, character external-graphics Special features basic-link, bookmark footnote flow Patryk Czarnik 05 Presentation XML 2012/13 40 / 1

38 Style of visual elements XSL XSL-FO CSS roots of visual formatting model Attributes for style properties: margin, padding, border-style background-color, background-image font-family, font-weight, font-style, font-size text-align, text-align-last, text-indent, start-indent, end-indent, wrap-option, break-before Patryk Czarnik 05 Presentation XML 2012/13 41 / 1

39 Lists example XSL XSL-FO <fo:list-block> <fo:list-item> <fo:list-item-label> <fo:block>first name: </fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block margin-left="15em">dawid</fo:block> </fo:list-item-body> </fo:list-item> <fo:list-item> <fo:list-item-label> <fo:block>surname: </fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block margin-left="15em">paszkiewicz</fo:block> </fo:list-item-body> </fo:list-item> </fo:list-block> Patryk Czarnik 05 Presentation XML 2012/13 42 / 1

40 XSL Example visualisation lists XSL-FO Patryk Czarnik 05 Presentation XML 2012/13 43 / 1

41 Tables example XSL XSL-FO <fo:table border="solid 2pt black"> <fo:table-header> <fo:table-row> <fo:table-cell><fo:block font-weight="bold">surname </fo:block></fo:table-cell> <fo:table-cell><fo:block font-weight="bold">first name </fo:block></fo:table-cell> </fo:table-row> </fo:table-header> <fo:table-body> <fo:table-row> <fo:table-cell><fo:block>paszkiewicz</fo:block></fo:table-cell> <fo:table-cell><fo:block>dawid</fo:block></fo:table-cell> </fo:table-row> Patryk Czarnik 05 Presentation XML 2012/13 44 / 1

42 XSL XSL-FO Example visualisation table Patryk Czarnik 05 Presentation XML 2012/13 45 / 1

43 XSL XSL-FO XSL-FO some more features Pagination (odd/even pages etc) Markers (referring to page content from header/footer) Multi-flow documents (from XSL 11, not available in Apache FOP 10) Patryk Czarnik 05 Presentation XML 2012/13 46 / 1

44 XSL-FO support XSL XSL-FO Commercial software: Antenna House XSL Formatter RenderX Ecrion Lunasil LTD Xinc Open software: Apache FOP xmlroff Patryk Czarnik 05 Presentation XML 2012/13 47 / 1

45 XSL-FO critique XSL XSL-FO Main XSL-FO advantages in line with XSL easy and direct way to obtain printout (eg PDF) from XML data general advantages of stylesheets over hard-coded formatting Main XSL-FO disadvantages too complex for simple needs too limited for advanced needs lack of pagination feedback, cannot say if these two elements occur on the same page missing some advanced DTP- and typography-related features hard to format particular elements in a very special way (thus this is a general drawback of using stylesheets) Patryk Czarnik 05 Presentation XML 2012/13 48 / 1

Presentation of XML. Patryk Czarnik. XML and Applications 2016/2017 Lecture

Presentation of XML. Patryk Czarnik. XML and Applications 2016/2017 Lecture Presentation of XML Patryk Czarnik XML and Applications 2016/2017 Lecture 11 26.05.2017 Separation of content and formatting According to best XML practices: Documents consist of content / data. Tags are