CSS Stylesheet Support

XF Rendering Server 2013 supports CSS (Cascading Style Sheets) for XSL-FO documents. To assign a stylesheet to a document, the xf:stylesheet extension must be used, as follows:

<?xml version="1.0" encoding="utf-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:xf="http://www.ecrion.com/xf/1.0" xmlns:xc="http://www.ecrion.com/2008/xc" xmlns:svg="http://www.w3.org/2000/svg">

<xf:stylesheet src="StyleSheetURL"/>

</fo:root>

The StyleSheetURL attribute value must point to a CSS file via a relative or absolute path located on the disk.

Styling is done similar to HTML: elements are assigned IDs via the id attribute and/or classes via the class attribute. The difference between the two attributes is that while there can not be duplicate IDs in the same document, the same class can be applied to multiple elements.

Usage:

<fo:block class="RedBoldFont" />

<fo:block id="TitleText" />

CSS code can be used for adding properties to the XSL-FO elements.

Examples of usage:

1. Adding red bold font to all elements that have the RedBoldFont class applied:

.RedBoldFont

{

color: red;

font-weight: bold;

}

2. Increasing the font size for the title block (identified by the TitleText ID):

#TitleText

{

font-size: 36pt;

}

3. Changing the line height for all fo:blocks that have the RedBoldFont class applied to 100%:

block.RedBoldFont

{

line-height: 100%;

}

Types of CSS Selectors:

Pattern	Meaning	Supported
*	Matches any element.	YES
E	Matches any E element (i.e., an element of type E).	YES
E F	Matches any F element that is a descendant of an E element.	YES
E > F	Matches any F element that is a child of an element E.	NO
E:first-child	Matches element E when E is the first child of its parent.	NO
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	NO
E:active E:hover E:focus	Matches E during certain user actions.	NO
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	NO
E + F	Matches any F element immediately preceded by a sibling element E.	NO
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	NO
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	NO
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".	NO
E[lang\|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	NO
DIV.warning (same as fo:block.class)	Language specific. (In HTML, the same as DIV[class~="warning"].)	YES
E#myid	Matches any E element with ID equal to "myid".	NO

For further reference the CSS Reference and XSL-FO Specification available on the W3C website must be accessed.