Webreakstuff's blog on design, development and strategy. Click here to subscribe.

Column layouts using CSS3

Fred Oliveira on September 10, 2005
Lets get the innovation wand out. One of the proposed features for CSS 3 are text columns, like the ones you would see in a newspaper or magazine, instead of the standard vertical-only blocks. This allows for greater readability, considering lines are smaller and faster to digest. This is also one of the things I’ve wished for the most in terms of webpage layout mechanisms, because I’ve always been an enthusiast of newspaper and magazine layouts as well as the grid - which you’ve probably studied if you’re into graphic design.

The latest Mozilla Firefox release (1.5 beta 1, that you can download here if you didn’t yet) has preliminary support for columns of text - in fact, if you’re looking at this blog post using FF 1.5 beta or above, you’ve probably noticed the difference already. Apart from showing the effect on this post, I’ve worked out a test page for CSS3 columns that you’re able to check out here (Firefox 1.5b only).

From the Mozilla Developer page for CSS3 columns: People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.

If you are a web-developer, you probably want to have a look at the MDC page for CSS3 columns, or the proposed draft for CSS3 column text from the W3C. If you want to learn how I did it, check out my example page.

View/add comments on this entry

Comments on this post

Jeff Wheeler

Woah, nicely done. I saw this a while back in the proposed draft, but it was before any browser supported it. I didn’t realize the beta which I downloaded earlier today already had it. Awesome.

I can’t wait for Safari support, though.

Fred

Safari has some CSS3 support rolling, actually. The latest version of the WebKit (that powers Safari) has a few CSS3 selectors already (even if none related to column-based text layouts). These are (from Surfin Safari, the webkit development blog):

border-image - WebKit now fully supports the CSS3 border-image property. This property allows you to slice an image into nine pieces (the corners, sides, and center) and use these images to render the border of a box. You can stretch, tile or round the sides and middle. WebKit can also even handle border-image on inline flows like spans and links.

background-clip - Background-clip is a new property that lets you clip the background to the border, content or padding box. WebKit supports this new property as part of the background shorthand as well. This property works with multiple backgrounds also.

background-origin - The background-origin property lets you control where the origin of the background is as far as background-position is concerned. You can also choose the border, padding or content boxes. Like background-clip it can be specified in the background shorthand and works with multiple backgrounds.

border-radius - WebKit now supports border-radius for transparent borders. When used with transparent borders, both the background and border images will render with a rounded clip rect applied, so you can make rounded boxes now with a border-image or with background images. Support for other border types will be coming soon.

It’s actually looking pretty good, considering this is most of the proposal for Backgrounds and borders.

Mark

Thanks for the info; and great use of the column layout here. This site is very easy on the eyes.

WeBreakStuff » Some tools of the trade

[...] Column layouts using CSS3 [...]

Sorry, the comment form is closed at this time.