Monday, 28 March 2005

Gecko 1.8 For Web Developers: Columns

One of the big things I've been working on for Gecko 1.8 is support for multicolumn layout. Our implementation follows the CSS3 draft pretty closely. Right now we support the properties -moz-column-count, -moz-column-width, -moz-column-gap and (soon) -moz-column-rule.

Basically this lets you set up multiple columns like a newspaper, so that content flows from the end of one column to the top of the next column automatically. The big win is that you can use the full width of a large screen without making lines excessively long. This very blog is using columns on most entries --- check it out with a Firefox trunk build.

The draft specifies 'balanced' columns. This means that we automatically find a minimal height for a set of columns that balances the content as evenly as possible across the columns while fitting into the available width of the page. This is very powerful and you have to see it in action to appreciate what it does for you. However, balanced columns are inherently a little slow. Also, sometimes you want the columns to be a fixed height but extend horizontally as far as necessary to fit the content. We support that by extending the draft slightly; if the 'height' property on the column set is 'auto', we balance the columns and horizontal overflow doesn't happen, otherwise we do not balance the columns and horizontal overflow can happen.

Our implementation has a few limitations that cannot be fixed for 1.8:

  • Tables don't break across column boundaries.
  • Absolutely positioned elements don't break across column boundaries, even if the absolutes' container does.
  • We don't always find the minimum height for a balanced column set, for example when the column set contains blocks with margin, borders or padding things can go wrong.
  • We don't support the CSS properties for page break control, so you can get widows and orphans (a paragraph breaking just after its first line or just before its last line). And you can't prevent breaks from happening without using hacks.
  • There is no way to make content in one column span multiple columns. In the future we may allow content in a column to flow around overflowing floats in previous columns, but we're not going to get that in this release.


Of course there are still some bugs but it's already in much better shape than it was a few weeks ago. In particular some huge issues involving floats breaking across columns have been fixed. Since we use the same code for page layout as for columns, this also means a lot of problems with printing (and print previewing) pages with floats have been fixed.

I'm really interested in having Web developers play with this feature, in particular to shake out any critical bugs. Some tips for using columns:

  • Watch out for content that horizontally overflows the column it's in. The next column will draw right over it.
  • Thus, it might be a good idea to put a DIV inside a columns element and give it a background color, and put the rest of your content inside that.
  • Column balancing can be slow. Unbalanced columns give faster layout.
  • People have always thought of elements as being rectangular, thus we have Javascript properties like clientX, clientY, clientWidth, clientHeight etc. That was never true for inlines, and now it's not even true for blocks. Those properties will just give you the first rectangle of many rectangles that might make up the block. Beware.


Please file Bugzilla bugs when you find we're doing something unexpected or not per spec. If you have other feedback you can email me personally or just blog about it and let me know.


16 comments:

  1. When viewing this very page half of ot is missing (this form is not visible for example), resizing fixes the issue. This seems to only happend when the screen is very wide, i have a widescreen monitor with 1680x1050 resolution.
    Screenshot:
    http://www.jeria.net/mozilla/columns_bug.gif

    ReplyDelete
  2. Wouldn't it be better to return the bounding box of all the components for clientX, clientY, clientWidth, clientHeight?
    And make new properties for getting the real coverage. ( As a list of paths? Dunno what would make sense for this. )

    ReplyDelete
  3. The columns in your blog look great! I imagine there are many good uses for them. Can't wait to see this in a release (Firefox 1.1?). :-)
    PS. I really mainly posted to imitate your subheader, because I thought it curious to be proclaiming being a christian. ;-)

    ReplyDelete
  4. Robert O'Callahan28 March 2005 20:42

    Jos�: known bug, I'll fix it soon.
    rjw: that doesn't seem very useful. Consider a paragraph that has one line at the bottom of column 1 and a second line at the top of column 2.
    Peter: :-)

    ReplyDelete
  5. Wow, great work, as always, roc. I'd love to put this on my webpage eventually, with a user option to change the number of columns on the page (through javascript).

    ReplyDelete
  6. This is a powerful feature, but personally I think columns are self-defeating if they don't exactly match the available screen height. It's counter-intuitive to scroll down a page while reading only to have to scroll back up to the top to read more. I think this feature requires some sort of device to match the height of the columns to the current window size.

    ReplyDelete
  7. I see a couple of problems...
    In http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we_1.html when I hit reload, only part of the page (up till and including the columns) is rendered; the rest is shown when I click and hold a link though.
    I also saw part of the content disappear a number of times. E.g. when I have any of these columned blog entries and remove my (Sage) sidebar (at 1024x768). A third column appears, and half of the content disappears.
    ~Grauw

    ReplyDelete
  8. Whenever I use the middle mouse button for autoscrolling, the text in the columns moves ... this has never happened with normal text formatting before.

    ReplyDelete
  9. I've been playing with it quite a bit, and it really starts to work fine. I have it implemented through an alternate stylesheet on one of my sites (http://emps.l-c-n.com/), for the articles section.
    It is a bit of problem when you have longer articles, spanning more than one window worth of contents, though. But it is sure a fun thing to play with.
    Implementing css3 media queries, would give more (better ?) control over width and text flow.
    But thanks for implementing this.

    ReplyDelete
  10. Robert O'Callahan29 March 2005 21:45

    Luke: you can do that. Position the columns element relative to the viewport and set its height to the height of the viewport and you'll get columns with the correct height flowing off to the right if necessary.
    Grauw: probably the same bug that's already filed. I will fix it.
    Foxtrot: not sure what you mean

    ReplyDelete
  11. Why do you have <div class="columns"> twice in the source for this page?

    ReplyDelete
  12. Robert O'Callahan30 March 2005 02:35

    Sorry, I needed to update the template...

    ReplyDelete
  13. I don't like to be a victim of "pet bug syndrome", but if Gecko is getting column support, it really REALLY needs soft hyphen support too. Any chance of getting someone to look at that?

    ReplyDelete
  14. Robert O'Callahan30 March 2005 05:49

    I'm aware we need hyphens but it's not happening for 1.8, sorry.

    ReplyDelete
  15. Dang, just took a look at this with 20050328/OSX and I am impressed as all get-out, even at such a relatively early stage.

    ReplyDelete
  16. My Goddess, that is a wonderful idea! I have been wanting to print out this wiki I have for ages now, and if I could work out a way to get it into newspaper style columns... that'd just be awesome. Time to go get me a development firefox...

    ReplyDelete