XSL Formatting Objects „From XML to PDF“ Lecture on Walter Kriha.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Cascading Style Sheets
Teppo Räisänen LIIKE/OAMK 2010
1 XSLT – eXtensible Stylesheet Language Transformations Modified Slides from Dr. Sagiv.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
1/18 ITApplications XML Module Session 5: Extensible Stylesheet Language (XSL)
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
SDPL 2002Notes 6: XSL1 6 XSL: Extensible Stylesheet Language n An advanced style language for XML documents: 1. Language for transforming XML documents:
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
XML Unit 6 October 31. XML, review XML is used to markup data Used to describe information Uses tags like HTML –But all tags are user-defined –Must be.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
HTML and XHTML Controlling the Display Of Web Content.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
XSL Unit 6 November 2. XSL –eXtensible Stylesheet Language –Basically a stylesheet for XML documents XSL has three parts: –XSLT –XPath –XSL-FO.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Week 0534Styling XML1 Topics CSS – styling XML for screen presentation –Associating CSS with XML –Selectors –Element positioning –Element appearance XSL.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Creating a Simple Page: HTML Overview
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Week 4.  Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets.
CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based.
The Characteristics of CSS
IS432 Semi-Structured Data Lecture 5: XSLT Dr. Gamal Al-Shorbagy.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Sheet 1XML Technology in E-Commerce 2001Lecture 7 XML Technology in E-Commerce Lecture 7 XSL Formatting Objects, Java Data Binding.
Lecture 11 XSL Transformations (part 1: Introduction)
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
SDPL 20076: XSL Formatting1 6 XSL: Extensible Stylesheet Language n An advanced style language for XML documents: 1. Language for transforming XML documents:
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
SDPL 2004Notes 6: XSL Formatting1 6 XSL: Extensible Stylesheet Language n An advanced style language for XML documents: 1. Language for transforming XML.
Interface Design 2 Week 7. Interface Design 2 :: Week 7 :: Calendar.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
SDPL 2001Notes 6: XSL1 6 XSL: Extensible Stylesheet Language n An advanced style language for XML documents: 1. Language for transforming XML documents:
Rendering XML Documents ©NIITeXtensible Markup Language/Lesson 5/Slide 1 of 46 Objectives In this session, you will learn to: * Define rendering * Identify.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
Working with Cascading Style Sheets
Madam Hazwani binti Rahmat
Advanced CSS BIS1523 – Lecture 20.
Web Development & Design Foundations with HTML5 7th Edition
Styles and the Box Model
Software Engineering for Internet Applications
DynamicHTML Cascading Style Sheet Internet Technology.
How to Get Your Pages to Publish to PDF
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
DynamicHTML Cascading Style Sheet Internet Technology.
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

XSL Formatting Objects „From XML to PDF“ Lecture on Walter Kriha

Goals Learn the basic concepts of a page description language Learn the core elements of XSL-FO Understand a simple hand-coded xsl-fo example Learn the processing pipeline from xml to pdf Start generating fo files with XSLT XSL-FO is not so much different from e.g. PDF format. All page description languages need certain constructs e.g. to define blocks, alignments, fonts etc.

Putting Text on Pages Titlepage My book Introduction Odd pageEven PageIndex All pages may be the same or each one can have a different layout. Double-sided printing changes the layout compared to single-sided printing because odd pages have different margins. What we need is a way to describe areas of pages and fill them with content from our text. In xsl fo we create those areas by defining FORMATTING OBJECTS on pages. The fo processor will then take our text and fill it into those formatting objects.

Putting Text on a Page My book Introduction Formatting objects devide a page into rectangular areas which either stay empty (like margins) or get filled with static content (header/footer) or dynamic content (rest of text)

Defining a page using formatting objects The main structuring elements are shown: page, regions, blocks (with embedded blocks) and line areas within blocks (inline elements). A block always creates a break. Please note that the body region encloses the other regions. Therefore body margins must be equal or larger than the other region margins to not overlap with them. block page top margin page bottom margin page right margin page left margin before region after region start region end region body region line area block inline area typically used for header/footer reversed for other languages (e.g. arabic) block within block

Main Page Formatting Objects fo:region-before (for header) fo:region-after (for footer) fo:region-start, fo:region-end fo:body (main text area) fo:leader (e.g. to make a rule) fo:block fo:inline These elements define the layout of a page. Of course they can be qualified with a large number of attributes, e.g. defining border width, language, alignment etc. The key question now is how do we define different page layouts? We need a templating mechanism. This is easily constructed using xml syntax. XSL fo defines a „Page master“ element which takes a name and has the page formatting objects as children.

Simple Page Master <fo:simple-page-master master-name="body-first" page-width="{$page.width}" page-height="{$page.height}" margin-top="{$page.margin.top}" margin-bottom="{$page.margin.bottom}" margin-left="{$page.margin.inner}" margin-right="{$page.margin.outer}"> <fo:region-body margin-bottom="{$body.margin.bottom}" margin-top="{$body.margin.top}" column-count="{$column.count.body}"> <fo:region-before region-name="xsl-region-before-first" extent="{$region.before.extent}" display-align="before"/> <fo:region-after region-name="xsl-region-after-first" extent="{$region.after.extent}" display-align="after"/> The simple page master currently defines rectangular areas of a page. Later fo versions could also define circular areas. Region-start and region-end are not used in this case. Please note the name „body-first“. Other fo elements will use this name to refer to specific page masters if they need a page template definition. Page masters can be compared to powerpoint layout masters. Example taken from Norman Walsh‘s docbook-xsl tool.

Properties as Parameters page-height="{$page.height}" configuration file: fo simple page master: This is a clever way to make stylesheets configurable. Different configuration files can then define different page values, e.g. for A4 or letter pages. You can use this mechanism with any xsl stylesheets, not just those producing fo files.

Different Page Layouts Titlepage <fo:region.... <fo:region.... <fo:region.... Odd pageEven PageIndex If a document needs different page layouts, the simple page masters are collected within a fo:layout-master-set. This set will also contain page sequence masters (see later). Again, note the names of the page layouts by which they will be referenced.

Layout Properties margins (page, regions, body) border (style, width, right, left, spacing, separation, color) background (color, image, position, repeat) padding (after, before, left, right, end, start) page-break (before, after, inside) font (family, size, stretch, style, variant, weight) This is only a sample of all available properties. Many properties have the same name and meaning as specified in CSS2, e.g. font properties.

Output Producing Elements fo:static-content (zero or more per region) fo:flow (max. one per region) fo:page-sequence (parent of fo:flow and fo:static-content). It references a simple-page-master element as a page template. Text from the xml document becomes output only within static-content or flow elements. Static content means content that appears on several pages (e.g. a page number, a header or footer). Regular text is produced within fo:flow an put on a page as long there is enough room on this page. If the page is full and a simple page master template is used, the fo processor will instantiate a new page from the page master template and continue filling in text. The process ends when all text has been put on pages.

A mini fo example <xsl:stylesheet xmlns:xsl=" xmlns:fo=" version='1.0'> fo:region- body/> <!– points to the body region of page master  Dummy Text We have defined one page layout template called „onepage“ and one processing sequence which fills the template with a bit of text. The flow-name attribute points to the specific region of the layout template where the text should go.

Result Instead of just giving a static piece of dummy text we could use xsl:apply-templates match=„someElement“ to fill in content from our xml text base. 1 Dummy text 1

block level elements fo:block (like a paragraph) fo:table fo:table-with-caption fo:block-list These elements are close to those in HTML and work similiar. They make it easier to output tables or lists. Every block level element will cause a line break. They need to be embedded in a fo:flow or fo:static-content element to produce output.

HTML Tables vs. FO Tables from elliotte rusty harolds excellent introduction to fo. (see resources)

From page layout to document layout fo:simple-page-master define the layout of single pages fo:page-sequence-master define the layout of complete documents as a series of different pages TitlepageOdd pageEven PageIndex So page-sequence masters are templates for complete documents. They refer via master-references to different page-master templates. This allows us to define a different layout for single-sided or double-sided printing of the same document Titlepagebody page Index double sided single sided

Page Sequence Masters name=titlepage name=content name=index reference=titlepage reference=content reference=book layout- master-set page sequence page masters page sequence master (page sequence) master reference page masters references (repeatable, conditional) name=book the book page sequence master includes via reference two different page layouts. For each page layout one can specify if it should be repeated, how many times and under what circumstances. A page sequence needs only refer to a page sequence master to get the proper order of page layouts.

example <xsl:stylesheet xmlns:xsl=" xmlns:fo=" version='1.0'> the sequence master defines one page of layout „title“ and the rest of the xml text gets copied into instances of „content“ pages. Page masters can get referenced conditionally, e.g. if an odd page or an even page needs to be created.

Graphics Supported formats are gif, jpeg and png. This depends of course on the fo engine used. An interesting option is the inclusion of SVG documents. SVG is vector graphics defined using XML. Non-xml graphics is only referenced via the „src“ attribute and not embedded.

The XSL FO processing pipeline XML document XSLT Processor XSL stylesheet producing HTML output XSL stylesheet producing FO output XHTML result FO result file HTML Browser Flow object processor (e.g. Apache FOP) PDF Acrobat PDF viewer FO files are NOT hand-written. They are produced pretty much like our html files by using an XSLT stylesheet processor. The result is not html but FO which is simply an XML file containing formatting objects and embedded document content. The FO file is a complete description of the document layout with content. This file gets interpreted by an FO processor which can generate PDF or SVG from it. External graphic references are resolved by the FO processor.

Resources Elliotte Rusty Harold, The XML Bible, Chapter 18. Very good book, online version available from I found this introduction to XSL-FO very good. Dave Pawson, XSL-FO. Making XML look good in print. The author also maintains the XSL-FAQ. Very good introduction, easy to understand. Dave Pawson, a gentle introduction to xsl-fo. fo.html. Read this first if you don‘t want to start with the book right away. J. David Eisenberg, Using XSL Formatting Objects. Get it from It contains nice graphics explaining how margins and borders work in FO. If you really want to work with FO you will probably also need the XSL book from Michael Kay because most FO gets generated, not hand-coded.