CSS Stylesheet Support

Top Previous Topic Next Topic  Print this topic

XF Ultrascale 2012 now supports CSS (Cascading Style Sheets) for XSL-FO documents. To assign a stylesheet to a document, use the xf:stylesheet extension:

 

<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"/>

       <!-- rest of document -->

</fo:root>

 

The StyleSheetURL attribute value must point to a CSS file via a relative or absolute path 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  youcannot have duplicate IDs in the same document, you can always have more elements with the same class.

 

Examples:

 

<fo:block class="RedBoldFont" />

<fo:block id="TitleText" />

 

 

Use CSS code to add properties to the XSL-FO elements. Below are some examples:

 

How to add red bold font to all elements of class RedBoldFont:

 

.RedBoldFont

{

       color: red;

       font-weight: bold;

}

 

How to increase the font size for the title block (identified by the TitleText ID):

 

#TitleText

{

       font-size: 36pt;

}

 

How to change the line height of all fo:blocks from the RedBoldFont class to 100%:

 

block.RedBoldFont

{

       line-height: 100%;

}

 

For further reference see the CSS Reference and the XSL-FO Specification on the W3C website.