Design Lunatic

CSS3 Text Columns

The CSS3 text column module allows web developers to make text have multiple columns, like in a newspaper. It can be useful when there are long lines of text, and you wish to make the text more legible.

It is only supported by firefox and webkit-based browsers such as chrome. Internet Explorer doesn’t support it.

The list of all the properties that are for text colums are “column-count”, “column-width”, “column-gap”, “column-rule”, “column-rule-color”, “column-rule-style”, and “column-rule-width”.

A good idea with these columns is to use “text-align: justify”. It greatly increases legibility.

This is how many columns the specified text has. However, if the text in the element doesn’t fit into the amount of columns you have set, the browser will automatically add another column.

#column {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

This tells how wide the text columns are.

#column {
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;
}

This is how wide the gap between the columns is. This greatly increases legibility. Give it a nice, big value to make sure your users don’t go blind.

#column {
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}

This is supported only by webkit-based browsers and the iPhone. This is the styling of the gap between the columns. It is basically a vertical line with whatever styling you give it. The styling is much like how you would style a border. Read on to find out more.

#column {
	-webkit-column-rule: 1px solid #eeeeee;
	-moz-column-rule: 1px solid #eeeeee;
	column-rule: 1px solid #eeeeee;
}

This is the color of the rule between the columns.

#column {
	-webkit-column-rule-color: #eeeeee;
	-moz-column-rule-color: #eeeeee;
	column-rule-color: #eeeeee;
}

This is the width of the rule between the columns.

#column {
	-webkit-column-rule-width: 10px;
	-moz-column-rule-width: 10px;
	column-rule-width: 10px;
}

This is styled much like how you would style a border: “dotted”, “dashed”, and “solid”.

#column {
	-webkit-column-rule-style: dashed;
	-moz-column-rule-style: dashed;
	column-rule-style: dashed;
}