View
1
Download
0
Category
Preview:
Citation preview
Presentation of XML
Patryk Czarnik
XML and Applications 2013/2014Week 10 – 9.12.2013
2 / 47
Separation of content and formatting
According to best XML practices:Documents consist of content / data.Tags are for structure and meaning (semantic tagging).
e.g. 2.99 rather than 2.99There is no direct formatting information.
How to present documents?Generic (and poor) XML presentation methods
XML sourcedocument treeunformatted text content
Custom application handling a particular known class of documentsImporting XML to text editors or DTP toolsExternal style sheets
3 / 47
Idea of stylesheet
DawidPaszkiewicz +48223213203 +48501502503 paszkiewicz@example.com
● white background, blue frame● font 'Times 10pt'● 12pt for name● abbreviation before phone number● email in italic● position before name
● yellow background, blue 3D frame● font 'Bookman 12pt'● phone numbers in single line● email in typewriter font● no too much details
MarekKącki +48223213212 +48501502524 kacki@example.com
4 / 47
Benefits of content and formatting separationWith semantic tagging – source data analysis easier and more reliable (than reverse-engineering of formatted text)Ability to easily present
the same document after modificationsother documents from the same class
Changes in formatting applied easilymodifications in one place – the stylesheetwhole class of documents formatted consistently
Alternative styles for the same class of documents,depending on
media type (screen, printout, voice)details levelreader preferences (or disabilities...)
5 / 47
Standards related to XML presentation
Assigning style to document:Associating Style Sheets with XML documents
Stylesheet languages:DSSSL (historical, used for SGML)Document Style Semantics and Specification LanguageCSSCascading Style SheetsXSLExtensible Stylesheet Language
6 / 47
Associating style with document
Using xml-stylesheet processing instructionDefined in W3C recommendationAssociating Style Sheets with XML documents
ArkadiuszGierasimczyk ...
7 / 47
Cascading Style Sheets – history
Roots of stylesheet idea – 1970s:translation of markup documents to (different) printer languages
Beginning of CSS: 1994CSS Level 1: December 1996CSS Level 2: May 1998CSS Level 3: work in progress for about 10 years...
modularisationnew features (browsers already support most of them)
CSS 2.1: June 2011 restricts CSS 2 and makes it more precise
8 / 47
Applications of CSS
First and major one: style for Web sitesSeparation of content and style for HTML(Simple) style sheets for XMLCSS 2 and the idea of “accessibility”:
support for different mediasupport for alternative presentation means (e.g. voice generation)enabling reader to override style proposed by author(reader rules)
9 / 47
Example stylesheet (fragment)
Extremely professional staff Accountancy DawidPaszkiewicz +48223213203 +48501502503 paszkiewicz@example.com MonikaDomżałowicz +48223213200 mdom@example.com
...
10 / 47
Example stylesheet (fragment)
person { display: block; margin: 10px auto 10px 30px; padding: 0.75em 1em; width: 200px; border: solid 2px #002288; background-color: #FFFFFF;}person[position='chief'] { background-color: #DDFFDD;}fname, surname { display: inline; font-size: larger;}person[position='chief'] surname { font-weight: bold;}
11 / 47
Resulting visualisation
12 / 47
CSS selectors (representative examples)
surname – element of the given namefname, surname – both elementscompany name – name being descendant of companycompany > name – name being direct child of companysurname + phone – phone directly succeeding surnamephone:first-child – phone being first child of its parentperson[position] – person owing position attributeperson[position='manager'] – person with position attribute equal to managerperson [roles~='manager'] – person with attribute role containing word manager (attribute as space-separated list)ol.staff – equivalent to ol[class~='staff'](HTML only)person#k12 – person with ID (in DTD meaning) equal to k12
13 / 47
Medium-dependent style
@media print { person { background-color: white; font-family: serif; }}
@media screen { person { background-color: yellow; font-family: sans-serif; }}
@media all { person { border-style: solid; }}
14 / 47
The display property
What kind of object is rendered for given source elementAvailable values: inline, block, list-item, run-in, inline-block, table, table-cell, ..., none,Rarely used for HTML, since already set for HTML elementsPrimary property to be set for XML elements(inline by default)
person { display: block;}
last-name { display: inline;}
summary point { display: list-item;}
15 / 47
Blocks and layout
Visual blocks nested basing on nesting of source elementstree of blocks and cascading inheritance of properties
By default, (normal) blocks expanding to whole available width, laid out one under anotherRelative or absolute positioning availableposition (static, relative, absolute, fixed) – positioning policyleft, right, top, bottom – positionwidth, height, min-width, max-height, ... – block sizeborder-style, border-color, border-width – bordersmargin, padding – external and internal margin
16 / 47
Text and font
color, background-color, background-image – colour and backgroundfont-family – concrete font name or generic font family as serif, sans-serif, monospace . . .font-size – font size (sizes given in px, pt, mm, in, em, ...)font-style, font-weight – font varianttext-decoration – underline, strike, etc.text-align – alignment of text in paragraph
does not apply to block in block (e.g. table in body) – use margins
17 / 47
Generated content
With :before and :after pseudoclassesand content propertyStatic text (labels etc.) not present in source documentAttribute valuesAutomatic numbering
person:before { content: attr(position);}phone[type=’office’]:before { content: ’tel. ’;}phone[typ=’mobile’]:before { content: ’mob. ’;}
18 / 47
CSS capabilities and advantages
Rich visual formatting featuresSelecting elements by
namelocation in document treeattribute existenceattribute values
Good supportinternet browsersauthoring tools
Easy to write simple stylesheets :)
19 / 47
CSS shortcomings
Only visualisation, not translation to different formatsSelectors relatively weak. Conditions not expressible in CSS:
checking content of element, e.g.:element A that contains element Belement A that contains text abc
logical composition of many conditions(available to some extent, but inconvenient)value comparison (e.g. negative amount in red)
Blocks structure directly based on source structurereordering of elements hard (and not possible in general way)not possible to show one element several times on page
No data processing. Not available for example:number calculations (summing etc.)operations on text (shortening, regular expression matching, etc.)
20 / 47
Presentation by transformation
XML("pure data")
Document for direct
presentation
Definition of transformation
(in role of styelsheet)
21 / 47
Extensible Stylesheet Language (XSL)
Defined in W3C recommendations (v1.0 in 1999 and 2001):XSL – general framework and XSL Formatting ObjectsXSLT – language for defining XML transformationsXPath – expression language, including paths for document fragments addressing
Original approach:Transformation definition (XSLT), in the role of stylesheet, specifies how a source document is translated into FO document.Presentation of result FO is specified by XSL-FO standard and available through a rendering engine.
Practice:HTML result format used more often (although FO also used)XSLT and XPath also used for purposes other than presentation
22 / 47
Transformation to HTML – example (1)
Employees of body { background-color: #FFFFDD; ... } div.person { margin: 10px auto 10px 30px; ... } ...
23 / 47
Transformation to HTML – example (2)
manager
24 / 47
Transformation to HTML – example (3)
25 / 47
Resulting HTML code (fragments)
Employees of Extremely professional company body { ...
Extremely professional company Accountancy Dawid Paszkiewicz +48223213203 +48501502503 paszkiewicz@example.com Monika Domżałowicz +48223213200 +48501502513 mdom@example.com ...
26 / 47
HTML – resulting formatting
27 / 47
HTML – basic facts
Origin – format for software documentationMain application – WWWNowadays recommended approach (well..., HTML 4 approach):
use structural (h1-h6, p, ul, li, table, ...) and semantic (strong, q, dfn, blockquote, ...) tags where appropriateuse general grouping elements (div, span) and custom classes when necessarydo not use deprecated formatting tags (b, i, center, ...)use external CSS stylesheets when possibleuse embedded CSS formatting rules when necessary
XHTML ~= HTML in XML format(X)HTML as XSLT output format:Especially useful for Web and on-screen publication
28 / 47
Original idea of XSL
Source: Extensible Stylesheet Language (XSL) Version 1.0,W3C Recommendation 15 October 2001(http://www.w3.org/TR/xsl/)
29 / 47
Transformation to XSL-FO – example (1)
Employees of .
30 / 47
Transformation to XSL-FO – example (2)
31 / 47
Transformation to XSL-FO – example (3)
mob. tel.
32 / 47
Resulting XSL-FO code (fragments)
... Employees of Extremely professional company. ... Monika Domżałowicz tel. +48223213200 mob. +48501502513 mdom@example.com ...
33 / 47
XSL-FO – resulting formatting
34 / 47
XSL-FO – basic facts
Presentation-oriented XML applicationElements for different kinds of visual objects (block, inline, table, and so on)Attributes for formatting, based on CSS propertiesEspecially useful for printed publicationsFocused on paged media type:
master pages (templates), page areas (header, footer, etc.)automatic text flow and repeated (“static”) contentPractice: intermediate format inXML → XSL-FO → PDF transformationNot supported by web browsers
Designed as part of XSL frameworkresult of XSLT transformationnot intended to be used standalone
35 / 47
Basic structure of XSL-FO document
Two main parts: declarations and actual content
Hello World!
36 / 47
Formatting objects
XSL-FO elements relate to resulting formatting objects.Block level
blocklist-block, list-item, list-item-labeltable, table-row, table-cell, ...
Inline levelinline, characterexternal-graphics
Special featuresbasic-link, bookmark, markerfootnotepage-number
37 / 47
List – example
First name: Dawid Surname: Paszkiewicz
38 / 47
Table – example
Surname First name ... Paszkiewicz Dawid ...
39 / 47
Formatting properties
Most of XSL-FO attributes relate to style properties analogue to CSS properties.
margin, padding, border-stylebackground-color, background-imagefont-family, font-weight, font-style, font-sizetext-align, text-align-last, text-indent, start-indent, end-indent, wrap-option,break-beforeand much more (almost 300 properties in XSL 1.1)
40 / 47
“Page master” – page template
Single page layoutA document may be split in many such pagesOne or more body regionsFour predefined (but optional to use) edge regions
41 / 47
Distributing content to pages
page-sequence – results in a number of pagesflow – content split into pagesstatic-content – content repeated on all pagesflow-name – page region reference
Employees of
42 / 47
Page sequence master
Using different page layouts within one page-sequenceSimple page masters referred to be used in order (repetitions available)
... ...
...
43 / 47
Alternative page references
Choosing page depending on conditionsodd/even, blank?, first?
44 / 47
Multiple flows
Added in XSL 1.1, not available in Apache FOP
Header
45 / 47
Custom flow maps – by example
Here: two text flows merged together and placed into two page regions
46 / 47
Markers
In flow (main content)
...
In static content (header)
Page Section
Typical application – running header/footer
47 / 47
XSL-FO – discussion
Main XSL-FO advantages“in line” with XSLeasy and direct way to obtain printout (e.g. PDF) from XML datageneral advantages of stylesheets over “hard-coded” formattingautomatised process when compared to manual formatting
Main XSL-FO disadvantagestoo complex for simple needs (see e.g. lists)too limited for advanced needs
lack of pagination feedback, cannot say “if these two elements occur on the same page then...”hard to format particular elements in a very special way (thus this is a general drawback of stylesheets comparing to manual formatting)
Slajd 1Slajd 2Slajd 3Slajd 4Slajd 5Slajd 6Slajd 7Slajd 8Slajd 9Slajd 10Slajd 11Slajd 12Slajd 13Slajd 14Slajd 15Slajd 16Slajd 17Slajd 18Slajd 19Slajd 20Slajd 21Slajd 22Slajd 23Slajd 24Slajd 25Slajd 26Slajd 27Slajd 28Slajd 29Slajd 30Slajd 31Slajd 32Slajd 33Slajd 34Slajd 35Slajd 36Slajd 37Slajd 38Slajd 39Slajd 40Slajd 41Slajd 42Slajd 43Slajd 44Slajd 45Slajd 46Slajd 47
Recommended