Columns

Reading long lines of text can be difficult - multiple columns have been used in print for a very long time. CSS allows for clean styling in multiple columns with the help of several properties.

The column-count property specifies the number of columns for the selected element - the column width will be calculated automatically. Alternatively, you define the (optimal) width of a column with the column-width property, and the number of columns will be defined automatically. Note that Prince might make small adjustments to the actual width in order to use the available space at its best. Both values can also be set simultaneously with the shorthand columns property.

    p {
        column-count: 3;
    }

The height of the columns is balanced by default, and the text is distributed to the available columns so that the height of the content in each column is approximately equal. In some situations it might be desirable to explicitly determine the height of the columns and creating as many columns as necessary. This is achieved by setting the height or max-height properties on a multi-column block.

With the column-gap property the distance between columns can be styled and the column-rule allows the addition of a line between columns - this is similar to using border-left or border-right properties.

    p {
        column-gap: 2em;
        column-rule: red dotted thin;
    }

The column-fill property determines how the content is distributed to fill various columns: the property can be set to auto, filling the columns sequentially, or balance, dividing the content in equal ways between the columns.

When content is laid out in multiple columns, Prince can determine where column breaks are placed in a similar way to breaking content into pages. Prince introduces the properties column-break-before and column-break-after to serve this purpose.

If an element is to break the flow of the columns and spans several columns, the column-span helps to achieve this. For floated elements (see Floats) a numeric value tells Prince how many columns the element should span. For non-floated elements that are part of the regular flow of the document, only the keyword all can be used.

The following example instructs Prince to make the h1 heading element span all the columns:

    body {
        column-count: 3;
    }
    h1 {
        column-span: all;
    }

Prince features also several column-specific extensions to the float property - for details please see the documentation on Prince extensions to floats.