This article was automatically recovered from archived versions of this site via the Wayback Machine. It is likely outdated or contains formatting errors, as it has not been reviewed.

CSS3 Columns, Drupal and CKeditor

June 29, 2013

css3multi-columndrupalckeditor

It seems like some kind of holy quest to find a viable solution for multicolumn content in WYSIWYG editors without annoying your users too much - but at the same time provide a solution which is technically maintainable and doesn’t put too much markup inside WYSIWYG fields. Quite the masochistic idea..

I’ve tried ckeditor’s inline templates and pure CSS3 so far. Both aren’t perfect and require content editors to have a little bit of background in terms of HTML and CSS. With Drupal 8 around the corner, which will provide system wide inline editing, it’s time to look for a better solution.

2 ideas came to my mind recently. Number one is a simple text filter in combination with 2 ckeditor buttons. The UI elements insert HTML comments declaring where a column starts and when it should end, the text filter then replaces the HTML comments with markup, handling the number of columns as well as all required wrapping. The catch is, it wouldn’t use CSS3 multicolumn but depend entirely on flexbox layout. It’s much easier to provide a polyfill for flexbox (basically, float the whole shebang accordingly and add some spacing) than providing a polyfill for CSS3 multicolumns.

Idea number 2 would be to handle the definition of columns on the back-end side of things. You can add multiple text bodies to a Drupal entity/node and by adding a layout trigger, define the desired layout of these bodies. All the rest will happen on a theme level and for the glorious “mobile first”, all the body fields will simply list above each other et voila.

“Why not use panels?” you might ask. Well. I want to keep things easy to manage. Panels adds a lot of overhead for simply getting some text into columns. I actually wonder if Drupal core devs at some point thought about this problem. Because with all the content becoming more and more dynamic from a layout point of view, the system underneath should provide the possibilities to easily layout contents in a generic way. But that’s a long way off. I guess my best bet would be idea number one in combination with the great Omega 4 theme and some custom code. This would at least provide a bit of a challenge, too. :-)

I’m going to try out a few things for the next project I’m working on. If I come up with some more or less ingenious way to handle columns, well, you will read it here.

I’ve come across a couple of interesting things which might be helpful in coming up with an actual module for Drupal 7: