CSS3 Multiple Column Text

Reference material used to research this topic came from :


Content producers have long sought control over the presentation of their material in a pleasing way. Until recently, the ability to display long articles in more than a single column was the rare preserve of desktop publishing programs like Indesign and Pressworks Publisher. Even the older text processing programs like WordPerfect and WordStar attempted to offer a facility to make reading long blocks of text a much easier proposition. This ease of read has long been one of the most appealing aspects of newspapers and magazines. It was generally thought that about 60 characters offered the optimum length of text a reader could comfortably scan.

Early HTML did not have the degree of control that allowed content producers to create more than a single column of text unless they resorted on using html tables with multiple columns and rows.

The HTML5 and CSS3 improvements have a nice new feature to allow more than a single column of text. refer to the W3.org reference above for more details. But my initial interest was only to test the limits of this new feature as found in recent versions of my favorite browsers. I rarely test using Internet Exploder, so will confine my remarks to my favorite browsers. Google Chrome 11.0.696 dated 20april2011, Apple Safari 5.0.4 and Firefox 4.0.

Static Image of CSS3 Multi-column Test
Static Image of CSS3 Multi-column Test

I expected this new multi-column feature would have a number of issues and problems at least in their beta versions. I was much surprised to see that all three browsers presented the test page correctly.

<STYLE TYPE=”text/css”>
body {font-size:16px}
div#d3 {
max-height: 160px;
background: #E14678;
margin: 10px 15px 5px 15px;
padding: 10px 15px 5px 15px;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue;
div#d2 {
background: #0EFEBF;
margin: 10px 15px 5px 15px;
padding: 10px 15px 5px 15px;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
div#d1 {
padding: 10px 15px 5px 15px;
column-count: 2;
column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-width: 30em;
-webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue;
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-width: 30em;
p#p1 {
background: #F00;
p#p2 {
background: #0F0;
background: #00F;
} </style>
…Ya gotta fill in your own bits here
<h2>Test Multi-Column Text with Flow</h2>
<div id=”d1″>
<p id=”p1″>[p1] Lorem ipsum…..eros.</p>
<p id=”p2″>[p2] Ut consectetur…..</p>
<p id=”p3″>[p3] Morbi…..</p>
<div id=”d2″> Morbi….</div>
<div id=”d3″> Morbi….</div>

Ok, well i’m quite happy that this code fragment came out so well. You will need to add further html to this example. I did not have the chance to include all of the html code, but you be able to get the idea. Look at the css stylesheet example above. The declarations of column count and column gap size can be seen there. Note that there are vendor-specific versions of each form of column count. This is the part i don’t like about it : the column count and related declarations are browser-specific. So we have ‘-webkit…’ prefixed column specifications to support apple safari and webkit based browsers, ‘-moz…’ prefixed declarations to make firefox happy and a non-prefixed, supposedly default column-count declaration for everyone else. I have not checked this yet, but will the opera browser have it’s own prefix, and maybe camino will have one too, oh, wait a minute, my uncle needs a declaration too…. so where do we stop ? Sorry, enough of the rant, let’s look at what we can achieve with the common specifications. For further reference, look here and for some nice samples, look here.

  • column-count – how many columns of content do you want ?
  • column-gap – this value describes the amount of gutter space between columns. I use pixels or ‘px’ for my gaps, but you can use other choices as well. see reference link above.
  • column-width – roughly the number of characters per column expressed as ’em’s or ‘px’ values.
  • column-rule – uses the same choices as the border declaration
  • column-rule-color – if your ruler between columns is not an image, then this color is used
  • column-rule-style – several styles are available – consult the reference
  • column-rule-width – like column-width values but contains the ruler declared
  • column-span – if your content crosses more than a single column – sorry don’t really understand this one :}

In my example above, the html division ‘d1’ contains three paragraphs, [p1], [p2] and [p3] and each of these paragraphs have been given a nice background color to more easily identify which is which. The [p1] paragraph in the ‘d1’ division has a color of red, [p2] has a lime green background and [p3] has a blue background. I wanted to provide a background color for the ‘d1’ division but it would not take, or at least, it would not show that color in the margins and ruler column widths of ‘d1’.  As an interesting experiment, if you create a test page with this css, you will notice that different browsers expand and collapse the width of each column in a different way as you re-size the width of the browser window.

Division ‘d2’ is just to see what happens when text has no paragraph declared. It has an aqua color background and as we would expect, it grows and shrinks it’s columns down to around thirty-ish characters depending on the font used. When a window is made rather narrow, ‘d2’ will add more rows of text rather than shrink the column to hold less than the minimum number of characters. This may be due to having no column-width in the css for division ‘d2’.

The ‘d3’ division is rather more complex in that it has three columns separated by a blue ruler line but no column-gap declaration. So we can watch the column gutter while playing with the browser window resizing. The other interesting test here is to see how the css setting for the  “max-height: 160px;” and “overflow:auto;”  now suggests that the browser offer vertical scroll bars when content exceeds the max-height declaration.

Will play with column-span values later, time permitting !  :}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s