Multi-column layout arranges content in a row of columns of a certain width. The shortened length of lines may improve legibility. Newspapers commonly use this kind of layout.
The following box shows an example of a balanced three-column layout, the paragraphs with leading upper case letters demonstrating the flow in such a layout:
Lorem ipsum dolor sit amet consectetuer metus auctor ante gravida ac. Laoreet interdum ipsum consectetuer Nulla id. Massa enim malesuada tortor urna sociis elit augue habitasse fringilla metus. Sagittis nisl felis dis mauris Praesent nulla elit auctor gravida consequat. Dolor Nam pretium. Lacinia risus at congue Aenean Nam ut id lacinia ligula accumsan. Cursus amet Curabitur laoreet congue laoreet. Massa vel mi lacinia amet pede cursus metus senectus mus massa. At amet at at condimentum congue pretium Aenean lorem auctor quis. Nisl pretium nunc ut urna justo. Tincidunt ac Cum eget at Donec elit accumsan lobortis vitae est. Vestibulum urna adipiscing pretium mi et elit dui urna nec lacinia. Ante malesuada quis pellentesque. Id est justo neque iaculis ornare quis eget enim Nunc sagittis. Tempor Curabitur Integer id justo cursus. Non urna elit Nunc pretium Aenean at Curabitur Nulla fermentum massa. Suspendisse convallis consectetuer Nam congue adipiscing mauris lacus congue turpis tincidunt. Cras nunc pede pede faucibus dui sem condimentum pretium Curabitur a. Pretium nunc arcu semper. Cursus mollis elit massa et wisi magna Curabitur arcu lorem pellentesque. Lorem Morbi pellentesque vel orci ullamcorper metus nisl aliquet libero tempor.
There are three ways to lay out an element's content in columns:
Setting the number of columns using "-ro-column-count". The width of the columns is automatically calculated.
Setting the column width using "-ro-column-width". The number of the columns is automatically calculated.
Setting both the number and width of the columns using "-ro-columns".
Example: Setting a three-column layout.
div.multicolumn {
-ro-column-count: 3;
}Column gaps and rules are placed between columns to improve legibility.
The property "-ro-column-gap" sets the width of the gap between columns. If a column rule is set, it will appear in the middle of the column gap.
A column rule serves as a visual border between columns. Its styles can be set using the properties "-ro-column-rule-color", "-ro-column-rule-width" and "-ro-column-rule-style", matching the styles for borders. The shorthand "-ro-column-rule" can be used to set the width, color and style at once.
The filling of columns can be processed in two ways: balanced or sequential. If columns are filled balanced, their content is distributed with the intention of having columns of equal length. A sequential fill means the content is filled into one column after another. The filling is set using the property "-ro-column-fill". Allowed values are "auto" (meaning sequential) and "balance", which is the default value.
Example: Setting the column gap, column rule and column fill.
div.multicolumn {
-ro-column-gap: 0.5cm;
-ro-column-rule-width: 1pt;
-ro-column-rule-color: black;
-ro-column-rule-style: solid;
-ro-column-fill: balance;
}The same way page break properties influence the break behavior in pages (see chapter page breaks chapter), column break properties influence the break behavior inside columns.
The properties "-ro-column-break-before" and "-ro-column-break-after" define whether column breaks can be forced or prevented from occuring. The values "always" and "avoid" are valid settings.
Example: Setting styles for column breaks.
span.nocolbreak {
-ro-column-break-before: avoid;
-ro-column-break-after: avoid;
}
span.colbreakafter {
-ro-column-break-after: always;
}