Multi-Column Layout

I was playing around with CSS3 multi-column lately, mainly on this blog, to see what’s possible and what’s not. Here’s my verdict: insanely cool in new browsers, but not production ready. Stick to DIVs for now. Here’s how to do exactly that with CKeditor.

This is one of my favourite features of CSS3 but it’s also one of the very unsupported ones. Oh the irony. :) Browser support is even worse right now than gradients. Something I can’t really understand actually. The whole web is basically a multi-column layout and this spec would make responsive theming and theming in general a lot simpler. From my findings, the latest versions of Chrome, Safari and Firefox support the basic implementation. Spanning headings over multiple columns only works in webkit browsers. Breaking a column: fail. Widows and orphans: fail. Sigh.

There are some jQuery scripts out there which actually work and emulate the spec. But they are not bullet-proof either and a workaround like every other workaround.. I spent so much time on workarounds in the past five years, I’m really getting tired of it. In my case, I have to rely on jQuery scripts which are compatible to jQuery 1.5 and lower, making it kind of a pain in the ass to get anything fancy done.

However, it also makes you think a bit more on how to make things simpler than just using jQuery for each and everything. I’m not a big fan of jQuery, but I use it for front-end specific stuff that I can’t do otherwise. For example, the last thing I usually do is to hack contributed CMS modules. It kills the upgrade and maintenance workflow. That’s a problem if you have ~40 sites to administer.

In terms of multi-column layout, I came up with a number of CSS based solutions which work in WYSIWYG editors. I found that currently, the most stable way to tackle multi-column layout is indeed with a couple of DIVs. On this blog I only use CSS3 but on bigger, productive sites I stick to using HTML templates in the editor. I only use CKeditor for now, which provides a simple way to add templates via its config files. Here’s the source of one of them:

Creates 2 columns at 50% each. The paragraphs at the top and bottom make it possible to add other elements above or underneath the columns. Something you can’t do in most editors without switching to source view, because by clicking at the beginning of a paragraph, your cursor ends up inside the element, not before it, so to speak. This is most likely a limitation of HTML5 implementation and editors.

Also, “contenteditable” and “unselectable” make sure that the editor can’t accidentally delete the DIVs by hitting backspace one too many times. This markup requires you do a preprocessing filter which removes “contenteditable” and “unselectable” from the content body. I filter excessive paragraphs and those tags using FlexiFilter, a Drupal module which allows you to write your custom filters which are included in the format filter chain.

This can be extended to have any column layout you need, like 33%:33%:33% or 33%:66% etc. Because the widths are in percentages, it plays rather well with responsive themes. However, switching the number of columns gets complicated. The only thing “responsive” which is possible, is to float all columns above and underneath each other, for mobile devices:

The templates have to be inserted into CKeditor’s ckeditor.template.js, which you can place into your theme directory and needs to be referenced from ckeditor.config.js. Check the CKeditor configuration options for that. You can specifiy if there is a theme dependant config which should be used. And of course, you need to enable the toolbar element to be able to select templates.

With this solution, it’s possible to have end-user-friendly WYSIWYG multi-column layout with column-breaks and variations (as you can stack multiple templates and nothing is being “columnized” automatically). For most use-cases, this is perfect. The only problem is that you will again have complex markup stored in your nodes and database. So if you want to adjust the template markup on a site which already has hundreds of nodes, well - that’s going to be a PITA. Stripping the markup is no problem, however. And for the rest, you will need some serious REGEX magic, and we all love that extremely much, don’t we.. :-)

For me, this is just a temporary workaround until we have fullfeatured multi-column support in all major browsers, which should happen sometime in the next year, hopefully. At least, multi-column degrades more or less nicely into a column-less layout, which makes me think that as soon as the spec is 100% working across Safari/Chrome/Firefox, I will officially start to use it for production. Because, let’s face it, IE users are used to a bad browsing experience, so they probably won’t even notice. Hehe.

By far the best solution would be a native plugin specially crafted to create column layouts for CKeditor. I’m actually a bit surprised that no one ever went ahead and created something like this. The whole column-problem is one of the biggest layout problems of the web it seems. On the other hand, it’s probably going to be a rather complicated thing. If you came across something like that, please drop a comment with a link below. Thanks!