Michael Miller
Antenna HouseCSS OR XSL-FO: WHICH SHOULD IUSE FOR PRODUCING PRINT
PUBLICATIONS?
1CSS or XSL-FO: whichshould I use for
producing print
publications?
Michael Miller
Vice President
Antenna House, Inc.
mike@antennahouse.com
www.antennahouse.com

Is This A Marketing Talk?

‹#›

3

4

4

5

5

100% automated document formatting

6

CSS and XSL-FO• Cascading Style Sheets (CSS)– Used mainly for the web, is a style sheet language to describe thepresentation (that is, the look and formatting) of a document written in
HTML, XHTML and XML.

• Extensible Stylesheet Formatting Objects (XSL-FO)– Used for print, is a pagination markup language describing a rendering
vocabulary capturing the semantics of formatting information forpaginated presentation.

– Both from W3C

7

7

The Challenge

Our focus here is the printed/PDF document8

Alphabet Soup for documents and print

99

Page Description

Markup• AFP• HP-GL• PDL• PDF• PostScript• XPS• MODCA• CSS• XSL-FO• troff• TeX• LaTex• HTML• HTML5• XML• SGML• XHTML1010

Schemas/DTD/Data Model• DITA (Darwin Information Typing Architecture) – some of theuses include software, product, and training documentation.
• DocBook – format for technical (but not only) manuals anddocumentation.
• S1000D – international specification for technicaldocumentation related to commercial or military; aerospace,sea or land; vehicles or equipment.
• JATS (Journal Article Tag Suite) – a NISO standard of XML
used to describe and publish STEM
(scientific/technical/engineering/medical) scholarly journal
articles• TEI (Text Encoding Initiative ) – Guidelines for text encoding in
the humanities, social sciences and linguistics.

11

11

12

Aspects of a printed publication
Content formatted into pages with
• Front Matter
–
–
–
–

•

Title page
Table of contents
List of figures
Introduction/Foreword

Body– Chapters
•
•
•
•
•

•

Paragraphs
TablesGraphics
Captions
Footnotes

Back Matter– Index– Appendices– References/Bibliography

1313

Aspects of a printed page
•
•

•

•
•

Margins
Headers and Footers– Page Numbers– Running Heads
Body Text– Headings and Subheadings– Images and Graphics– Tables– Equations• Captions and Labels
Page Breaks
Borders and Rules

14

14Challenges:• Typesetting, page and document layout is a complex
crafts that draw from a wide variety of disciplines
including art, technology, psychology, etc.
• It has always been difficult to produce high-quality,
high-volume print output from XML and SGML
• Historically, this has required a significant financial
investment in specialized typesetting tools, (e.g.
Advent 3B2, Datalogics Composer, Miles 33, Arbortext
Publisher, Xyvision XPP, TeX, etc.)• These tools have a steep learning curve due to often
cryptic, proprietary stylesheet languages ortypesetting codes.
• They are proprietary.
15

15

Enter XSL-FO and CSS

1616

Motivation: The Business Case for XML,CSS and XSL-FO
What you want:•

High quality, consistent
output “look and feel”, “branding”•

Automated production of
information products Reduced cost, rapid dissemination•

Supports re-purposing ofcontent

 “single-source publishing”•

Supports the investment incontent rather thanpresentation

 “separation of content fromformatting”•

Independent of any
particular application

 “portability”•

Availability of resources

 “non-proprietary skills, languages”
17

17The benefits of a standardized format for data andpresentation are overwhelming. They include• complete interoperability of both content and style across applications
and platforms;• freedom of content creators from vendor control of production tools;• freedom of users to choose their own views into content;• easy construction of powerful tools for manipulating content on alarge scale;• a level playing field for independent software developers; and• true international publishing across all media.

18

18

XSL-FO(Extensible Stylesheet Formatting Objects)
This is the part of XSL that deals withhow structured information should bepresented in print.

19

19

Content to Web & Print/PDF• Traditional
CSS
XML
XHTML

XSL-FO

20

20

XSLT
• XSLT (Extensible Stylesheet Language
Transformations) is a language fortransforming XML documents into other
XML documents, or other formats such as
HTML for web pages, plain text or XSLFormatting Objects, which may
subsequently be converted to otherformats, such as PDF, PostScript and PNG.
21

21

Typical XML publishing data flows

22

22

Some of what is documented with XSL-FO

23

23

Documents formatted with XSL-FO

24

24

Current Document Formatting for Print• PDF through XSL-FO– Antenna House
– FOP
– XEP

• Other options– Framemaker– InDesign25

25

From the beginning• CSS– Cascading Style Sheets– W3C Recommendation– Originally

Wouldn’t it be nice if you could also use CSS
for print?
CSS3 adds page layout functionality for print• Simple mechanism for adding style (fonts, color, spacing to web
documents• CSS1 – W3C Recommendation 17 Dec 1996
• CSS 2.1 Revision 1 – Proposed Recommendation 12 April 2011

– Now
• Mechanism for both web and print documents• CSS 326

26

What is CSS3
• Web functionality +– CSS3 Module: Paged Media• W3C Working Draft 10 October 2006

– CSS3 module: Generated Content for Paged
Media• W3C Working Draft 4 May 2007

27

27

So Why CSS3?
CSS3 is an acknowledgement by the
CSS Working Group that theyneeded to also address pageformatting.

28

28

The “Cascading” Stylesheet• CSS can have up to 3 levels of style
information:– The default style– Style specified in a separate stylesheet– Style specified in the actual document or data

29

29

Examples of CSS3 within a stylesheet
Page setting @page rule
@page {
size: A4;
margin: 25mm;@top-center {content: "Sample";}@bottom-center {content: counter(page);}}@page {
size: 4in 6in;}@page {
size: letter landscape;
}
30

30

CSS3 Module: Paged Media adds
•
•
•
•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•
•
•

Running headers and footers
Leaders
Cross-references
Footnotes
Sidenotes
Named flows
Hyphenation
New counter styles
Character substitution
Image resolution
Page floats

Advanced multi-column layout
Conditional content
Crop and cross marks
Bookmarks
CMYK colors
Continuation markers
Change bars
Line numbers
Named page lists
Generated lists
–
–
–

31

TOC
Glossary
Index

31

•

•

•

Page Boxes: the @page Rule
– Page Terminology and the Page
Model
– Page types– Page size
– Page Selectors and the Page
Context– Page Properties– Left, right, and first pages– Content outside the page box
Margin Boxes– At-rules for margin boxes– Maximum Dimension of marginboxes– Dimension of margin boxes– Margin boxes and default
values• Margin box examples– Populating margin boxes

•
•
•

32

Page Breaks– Break before/after elements:'page-break-before', 'page-breakafter', 'page-break-inside‘– Using named pages: 'page‘– Breaks inside elements:'orphans', 'widows‘– Allowed page breaks– Forced page breaks– "Best" page breaks
Page-based Extensions to Counters– Page-based counters
Orienting an Image on the Page
The 'fit' and 'fit-position' Properties

32

Documents formatted with CSS

33

33

Content to Web & Print/PDF• With CSS

DITA
XML
XHTML

CSS

34

34

Typical CSS publishing data flows

35

35

CSS Options• Antenna House CSS Formatter• Prince XML• PDFreactor• Pagination.js• Simplepagination.js

3636

Now there is a choice!

CSS or XSL-FO

37

37

Why two Stylesheet Languages?
• XSL-FO came first along with several products based on thestandard.
• A reasonable open source implementation.
• Thousands of implementations based on XSL-FO.
• A large number of available Stylesheets• – DITA, DocBook, JATS
• CSS paged media is relatively new by comparison.
• The CSS products that support paged output are now becoming
available.
• Awareness of CSS for paged media is increasing

38

38

CSS

XSL-FOCan be used with HTML?

Yes

No

Can be used with XML?

Yes

Yes

Transform language?

No

Yes

Syntax

CSS

XML

39

39

Spread produced with XSL-FO

‹#›

40

Spread produced with HTML+CSS

‹#›

41

XSL-FO to CSS: Headers & Footers
XSL-FO

CSS

42

42

XSL-FO has more ways to choose• odd-or-even• blank-or-not-blank• page-position: first | last | only | rest | any• Maximum number of repeats• Change conditions after set number of
pages

43

43

CSS has different way to choose@page narrow { size: 9cm 18cm }@page rotated { size: landscape }div { page: narrow }table { page: rotated }
...
<div>
<table>...</table><table>...</table><p>This text is rendered on a 'narrow' page</p>
</div
44

44

XSL-FO fo:layout-master-set<fo:layout-master-set><fo:simple-page-master master-name="left”>...
</fo:simple-page-master><fo:simple-page-master master-name="right">...
</fo:simple-page-master><fo:page-sequence-master master-name="psm"><fo:repeatable-page-master-alternatives><fo:conditional-page-master-reference
master-reference="left"
odd-or-even="even"/><fo:conditional-page-master-reference
master-reference="right"
odd-or-even="odd"/></fo:repeatable-page-master-alternatives></fo:page-sequence-master></fo:layout-master-set>

45

45

CSS @page rule
@page {
size: 120mm 140mm;@footnote {float: bottom page;
width: 100%;}}@page :right {@bottom-right {content: counter(page) " of " counter(pages);}}@page :left {@bottom-left {content: counter(page) " of " counter(pages);
}
}
46

46

XSL-FO and CSS overlap

CSS 3

AHXSL-FO
Formatter
CSS 2

47

47

Extensions• extensions add features that are not part of the core
specification.
fo

/

CSS

axf:crop-offset / ah-crop-offset
axf:crop-offset-top / ah-crop-offset-top
axf:crop-offset-bottom / ah-crop-offset-bottom
axf:crop-offset-left / ah-crop-offset-left
axf:crop-offset-right / ah-crop-offset-right48

48

‘axf:’ prefix + ‘-ah-’ prefix

AH Formatter Extension‘axf:’ prefix + CSS specification

CSS in XSL-FOXSL section no. + ‘-ah-’ prefix

XSL-FO in CSSXSLT can transform XML documents into XSL-FO– Sort lists within documents– Replace text
– Rearrange content
CSS does not use XSLT

• But it can• For back of the book indexes

5050Organizations can optimize the creation andpublishing of documentation to address
business requirements
•
•

•

•

Pressures–

Shorter documentation development schedules––

Publish in multiple delivery formats (paper, electronic and web)
Provide real time customization at the point of interaction

–
–
–
–

Single source authoring of documentation
Automated publication of documentation through captured logic
Localization
Graphics–––

Structured authoring applications
Content management systems
Integration of structured authoring application and content management systems.

Actions

Capabilities

Enablers

CSS3 and XSL-FO can be an important component of this!!

51

51

Benefits of CSS3 as part of an
implementation• Enable the use of the same authoring and publishingsolution for both web and paper– Reduce the cost of technology investment– Enable vendors to compete and provide standards
based solutions– Create efficiency by reducing duplicate processes– Reduce vendor or IT support– Eliminate data transformation between different
specifications– Overall cost savings with respect to system
maintenance, upgrade, training, etc.

52

52

XSL-FO and CSS Comparison (antennahouse.com)
https://www.antennahouse.com/xsl-fo-css-comparison

53

CSS
XSL-FO and CSS Comparison(antennahouse.com)

XSL-FOCSS or XSL-FOXSL-FO– is now over 22 years old– Can do complex document formatting

CSS3– CSS3 paged output is over 15 years old– Can do almost all the same level of complex document
formatting
Use CSS when you can, use XSL when you must.
– Easier to use and easier to learn = easier to maintain andcheaper– CSS simplicity means it has its limitations

55

55

What ChatGPT said
User: which is better xsl-fo or css for paged output?
ChatGPT: The choice between XSL-FO (Extensible Stylesheet Language Formatting Objects) and CSS (Cascading Style Sheets) for paged output depends
on several factors, including the specific requirements of your project and your familiarity with each technology. Here are some considerations for comparing
XSL-FO and CSS for paged output:
1.

Purpose: XSL-FO was specifically designed for paged media and is well-suited for creating complex print layouts. It provides extensive control
over page elements, such as page size, margins, headers, footers, and multi-column layouts. On the other hand, CSS was primarily developed forweb styling, and while it has added support for paged media with the @page rule, it may not offer the same level of fine-grained control as XSL-FO
for complex print layouts.

2.

Layout Complexity: If you require advanced layout features like automatic table of contents, footnotes, cross-references, or indexes, XSL-FO
offers more built-in capabilities for handling such requirements. XSL-FO provides specific formatting objects for these features, whereas achieving
similar functionality with CSS may require additional scripting or workarounds.

3.

Learning Curve: CSS is widely used for web styling and has a large community and extensive documentation available. If you are already familiar
with CSS, leveraging CSS for paged output may be more straightforward and require less learning effort. XSL-FO, on the other hand, has a narrower
focus and may require some additional learning if you are not already familiar with it.

4.

Tooling Support: CSS enjoys broader tooling support due to its widespread use in web development. There are numerous CSS preprocessors,frameworks, and layout libraries available that can simplify styling tasks. XSL-FO tooling may be more limited, and dedicated XSL-FO processors or
tools might be necessary for generating the desired output.

5.

Integration with Other Technologies: If your project involves XML-based workflows or XSLT (XSL Transformations), using XSL-FO can provide
seamless integration as both XSL-FO and XSLT are part of the same family of technologies. This integration can be beneficial when generating printready output from XML sources.

In summary, if your focus is primarily on creating complex print layouts with extensive control over page elements, XSL-FO may be a better choice. However, if
your requirements are relatively simple or if you are already familiar with CSS and want to leverage existing web technologies, CSS with @page rule support
can be a viable option for paged output. Consider the specific needs of your project, your familiarity with the technologies, and the available tooling when
making your decision.

56

56

Questions?

Michael Miller
Vice President
Antenna House, Inc.
mike@antennahouse.com
www.antennahouse.com

Michael Miller
Antenna House
mike@antennahouse.com
www.antennahouse.com

CSS OR XSL-FO: WHICH SHOULD I USE
FOR PRODUCING PRINT PUBLICATIONS?