Element Layout

Tables

This section is of special interest if you are creating a CSS stylesheet for a custom XML document. For HTML, Oxygen PDF Chemistry already defines the needed selectors for the table element.

Suppose you have a very simple table in an XML document:

<tbl>
    <caption>A table.</caption>
    <rw>
        <c rspan="2"> Spans vertically </c>
        <c> Other cell </c>
        <c> Other cell </c>
    </rw>
    <rw>
        <c cspan="2"> Other cell, spanning to the right </c>
    </rw>
</tbl>

Defining Rows and Cells

First, mark the tbl element as being a table:

tbl {
    display: table;
}

Next, the rows and cells:

rw {
    display: table-row;
}
c {
    display: table-cell;
}

Defining the Column and Row Span

The processor needs to know how the cells are spanning multiple rows or columns. For these, there are two properties available: table-column-span and table-row-span.

c[cspan] {
    table-column-span: attr(cspan, integer);
}
c[rspan] {
    table-row-span: attr(rspan, integer);
}

Defining the Table Caption

You can do this by using the display:table-caption. To change the position of the caption relative to the table grid, you need to use the caption-side property:

caption {
    display:table-caption;
    caption-side:bottom;
}

Repeating Headers and Footers

The elements marked with one of the properties table-header-group or table-footer-group are automatically repeated when a table is split over a sequence of pages. It is required that they contain only elements with the display table-row. 

<tbl>
    <head>
        <rw>
            <c> Name</c>
            <c> Value </c>
        </rw>
    </head>
    <body>
        <rw> ... </rw>
        <rw> ... </rw>
    </body>
</tbl>

The CSS:

head {
    display: table-header-group;
}

Column Widths and Styles

Oxygen PDF Chemistry supports automatic layout of the tables. This means allocation of column widths is done automatically based on the content size. In the following example, the HTML table has an automatic layout (this is also the default):

table {
    table-layout:auto;
}
Tip: For large tables with long words that bleed out of the page, you can choose to hyphenate the words from the cells. If the table is using an automatic layout, you should specify a width (like 100%), otherwise the table columns will just be wide enough to accommodate the smaller hyphenated words:
table {
  table-layout:auto;
  width: 100%;
  hyphens:auto;
}

To switch to a fixed layout:

table {
    table-layout:fixed;
}

If you use the fixed layout and you are not satisfied with equal column widths, for HTML you should use the style attribute on the col element:

 <table style="width:2in;">
        <colgroup>
              <col style="width: 40%; background-color:cyan"/>
              <col style="width: 60%"/>
        </colgroup>
...

For arbitrary XML, you should set a display table-column to the element representing the column. Consider the following XML:

 <tbl>
        <colgr>
              <column wd="30%"/>
              <column wd="70%"/>
        </colgr>
...

The following CSS links the wd attribute to the width property and defines a different background for the first column.

tbl { 
    disply:table; 
}
colgr { 
    display: table-column-group; 
}
column { 
    display: table-column; 
    width: attr(wd); 
}
column:first-of-type {
    background-color: yellow;
}

Proportional column widths like the ones used in the CALS tables from DITA or DocBook are supported, but only when set in a width attribute on the column element (the one with display table-column):

...
<column width="3*"/>
<column width="7*"/>
...

Rotating Tables

There are cases where you have large tables and you need to rotate them to make them fit on your page. For instance, the default page is portrait, but because you have a table with many columns (and thus very wide), it would bleed to the right of the page.

There are two ways of doing this:
  • Associate a wider page (i.e. landscape) to the table that needs more space. The disadvantage is that the table will force a page break before and after it.
    @page landscape-page-for-large-tables {
    size: A4 landscape;
}

tbl {
  display: table;
  page: landscape-page-for-large-tables;
}
  • Rotate the table using the transform CSS property. The table will not create page breaks, but is susceptible to bleeding if its height exceeds the page width.
    tbl {
  display: table;
  width: 200pt;
  transform: rotate(90deg);
}
    Note: The table needs to have table-layout: fixed, and a width.

The page is now landscape and you probably need to also change the headers and footers to match this new orientation. One way of doing this is to move the header content from the @top-left, @top-center, and @top-right rules into page margin boxes from the right, and apply a transform property on them.

In the following example, for the normal pages there is static text in the top (header) that is either placed in the left or right side of the page, depending on the page position:
@page :left {
  @top-left {
     content: string(maptitle) string(parttitle) string(chaptertitle) " | " counter(page);
     font-size:8pt;
  }
  @bottom-left {
      /**/
  }
  @bottom-right {
      /**/
  }
}

@page :right{
  @top-right {
     content: string(maptitle) string(parttitle) string(chaptertitle) " | " counter(page);
     font-size:8pt;
  }
  @bottom-right {
      /**/
  }
  @bottom-left {
      /**/
  }
}
For the landscape page, we can move content to either the right-bottom or right-top, depending on the page position:
 /*
  * Table orientation.
  */
 @page table-landscape:right {
	size:landscape;

	@top-left{
		content:none;
	}
	@top-center{
		content:none;
	}
	@top-right{
		content:none;
	}
		
       @right-bottom{
    content: string(chaptertitle) " | " counter(page);
    font-size:8pt;
		transform:rotate(90);
		vertical-align: middle;
		text-align: right;
	}
 }
 @page table-landscape:left {
	size:landscape;
		
	@top-left{
		content:none;
	}
	@top-center{
		content:none;
	}
	@top-right{
		content:none;
	}
		
	@right-top{
    content: string(maptitle) string(parttitle) string(chaptertitle) " | " counter(page);
    font-size:8pt;
  	transform:rotate(90);
  	vertical-align: middle;
  	text-align: left;
       }
 }

Lists

For the HTML lists (ol, ul), Oxygen PDF Chemistry already defines the needed selectors, but sometimes you need greater control over the spacing or style of the marker.

You need the list element to have the display block, and the children, the display list-item. 

ul {
    display:block;
}

li {
    display:list-item;
    list-style-type: disc;
    margin-left: 0.5in;
}

Make sure you have a margin left so the bullet will have enough space to be painted inside the list item box.

List Marker Position

You can select that the marker should be considered a decorator outside the box of the list item element (this is the default), or if it should be inline and enter the first line of the content of the element. 

li.inside {
    list-style-position: inside;
}
li.outside {
    list-style-position: outside;
}

The list-style-type and list-style-image CSS Properties

Oxygen PDF Chemistry supports the following values for the list-style-type property:
  • box
  • check
  • circle
  • diamond
  • disc
  • hyphen
  • square
  • none
  • decimal
  • lower-roman/lower-latin
  • upper-roman/upper-latin
  • decimal-leading-zero
To use an image as a marker instead of a standard bullet or number, you can use the list-style-image property. You have to use the url function to point to an image resource:
li {
	list-style-image:  url("images/my_list_bullet.svg");
}

Using a :marker Pseudo Selector

There is a CSS pseudo element that allows you to associate styles with the list marker. The following example changes the background color, font, width, and even the content of a list marker:

ol {
  ...
  counter-reset:cnt;
}

li:marker {
  width:3em;
  background-color: silver;
  color:red;
  font-weight: bold;
  text-align:left;
  counter-increment: cnt;  
  content:counter(cnt)" - \0430";
}

To use an image instead of a number as marker:

li:marker{
	content: url("images/my_list_bullet.svg");
}

You can even implement a custom list numbering using this selector. Such a technique may be useful for other list numbering schemes that are currently not supported, or are more exotic, for lists with up to tens of elements. You can use the nth-of-type() selector to choose the labels of each item, individually:

li:nth-of-type(1):marker{
	content:"alpha";
}
li:nth-of-type(2):marker{
	content:"beta";
}
li:nth-of-type(3):marker{
	content:"gamma";
}
...

Floats

Floats are not supported by Oxygen PDF Chemistry.

Aligning Blocks Horizontally

If you want to align just the text paragraphs from the block, you might find the text-align property useful.

To align a block, it must have a specified width (absolute or as percentage).

Align Center

This can be done by setting both the margin-left and margin-right to auto:

div {
  width: 200pt;
  margin-left: auto;
  margin-right: auto;
}

Align Left

This can be done by setting the margin-left to 0 and margin-right to auto:

div {
  width: 200pt;
  margin-left: 0;
  margin-right: auto;
}

Align Right

This can be done by setting the margin-left to auto and the margin-right to 0:

div {
  width: 200pt;
  margin-left: auto;
  margin-right: 0;
}

Rotating Blocks

There are cases where you need to rotate some block elements for visual effects. For this, you should use the transform CSS property. 
code {
  transform: rotate(90deg);
}
Note: The block needs to have a specified width.