A List Apart: Comments on: Cross-Column Pull-Outs

Posted by: Joe

2012-01-31T13:00:49+00:00

Yet another extremely useful trick! Thanks!

Posted by: Nick Franceschina

2012-01-31T13:00:49+00:00

"Use a span instead of a div. We are inside a paragraph, and a block level element (div) can not be a child of an inline element (< p >)." I'm pretty sure a < p > tag is actually block-level. and although the effect is nice, it seems ungainly to have to "count characters in the second column" to make things line up correctly.

Posted by: Nic Rodgers

2012-01-31T13:00:49+00:00

When using text zoom on the example pages (in Firefox 1.0 and Safari 1.2.4) then repeatedly the images cover a portion of the text, meaning you are unable to read a line or two of text that is covered by the image. This seems to hapeen most if you zoom down 2 levels from the default size, or if you zoom up by 1 or more level. Does anyone else notice the same behaviour?

Posted by: Paul

2012-01-31T13:00:49+00:00

This has been available to Freeway users for a while now. Freeway is a web design app that employs Actions to extend its output, and my Text Flow Action has allowed Freeway users to flow HTML text around images and other irrecgular shapes without needing to type in code, count pixels or draw on graph paper. You draw a couple of guide lines on the Freeway page, apply the Action to a DIV (or layered) object, and that does it. http://www.actionsworld.com A series of test/demo pages is here - I used these to show Softpress what the Action could do before I released it: http://www.actionsworld.com/textflow/

Posted by: John

2012-01-31T13:00:49+00:00

Very cool, but now let's see that with a liquid layout ;)

Posted by: Cory Condiff

2012-01-31T13:00:49+00:00

Nicely done! Great attention to detail.

Posted by: apartness

2012-01-31T13:00:49+00:00

Paul, on the page to which you linked (actionsworld.com/textflow/), Freeway is using HTML table layouts to create staggered visual effects. By contrast, this article is using CSS layout.

Posted by: Dante

2012-01-31T13:00:49+00:00

I agree, very nice. I was trying to do something similar in terms of emulating print design techniques.

Posted by: Michael

2012-01-31T13:00:49+00:00

The double column span in a three column layout doesn't work well in FireFox1.0 on MacOSX, but I don't see where it would ever be useful (specifically the two images in three columns example, not the method on the whole) so I don't think it's a big deal. Kudos

Posted by: Dominic

2012-01-31T13:00:49+00:00

While I'm sure you're all excited about this new thing, remember that text set across multiple columns is harder to read on the Web than a single-column layout. It requires the user to scroll up and down, which breaks their concentration.

Posted by: Joe Lowery

2012-01-31T13:00:49+00:00

Thanks for sharing - interesting final results, although somewhat tedious (character counting, especially) to get to. My minor quibble is with using the del tag, which is to indicate deleted text. Wouldn't ins (for inserted text) be more appropriate and just a smidge closer to semantically correct?

Posted by: Seth Thomas Rasmussen

2012-01-31T13:00:49+00:00

Though is still the right choice in that scenario.

Posted by: Steve

2012-01-31T13:00:49+00:00

While I admit that you have successfully copied a print layout, the first question that jumped into my head was "why?". The web is not print. And as soon as we (as programmers/designers) stop pandering to the needs of legacy "print" media ideas, the sooner they might realise that web pages don't need to be pixel perfect facsimilies of the print equivalent. This thinking, (pixel perfect design in every browser) is what helped spawn awful table based layouts. It is our job to educate our customers. Not to spend hours creating convoluted markup and hacks to make it look like a print magazine. hmmm sorry.. on reading that, I got to ranting. I'll just go and scowl in the corner some more.

Posted by: Paul

2012-01-31T13:00:49+00:00

Hi, Apartness, Freeway does use CSS for the text flowing trick. The text is in a CSS positioned DIV, with CSS controlled shims (or transparent GIFs) to create the offset. The gifs are placed in the text flow using float:left or float:right - this was an idea inspired by the Curveliscious demo that I found last year. As well as procude rectangle holes in HTML text for images to look through, my Action allows more irregular shapes to achieve a similar effect. The rest of the pages are laid using a table, which is Freeway's default. The point of the demo pages was to demo the Action, rather than build a 100% CSS page.

Posted by: Ali Karbassi

2012-01-31T13:00:49+00:00

Steve, A few good outcomes of this: -News sites such as New York Times, Milwaukee State Journal, etc. now can achieve the same layout as their newspaper with valid web standards -New possibilities for designers.

Posted by: Steve

2012-01-31T13:00:49+00:00

Yes, Ali, they could. And again, I'll congratulate the author of this piece for their patience and endeavour. Column based layouts for printed media have proven to be a very effective way to present readable text. But on the web, column based layouts make reading a large prose difficult - To say the least. We are here to present information in a palatable fashion, in an easily readable format.. so why would I intentionally choose a layout such as this? If the papers you mentioned need to mimic their physical printed media counterparts for some reason (so I, for example, being in Australia, could have the benefit of getting my hands on them) then provide a PDF for me to download and print. I just don't understand why you would deliberately make it hard(er) for someone to digest your information?

Posted by: heath weaver

2012-01-31T13:00:49+00:00

I think that multiple columns can certainly improve readability on the web. It is true that having two columns of text that extends past the visible area is a real pain. However, two columns of text that fills only the visible area can also be easier to read i.e. no scrolling, keeping lines below 10 words. I am not sure if this article is the answer, but it is a step in the right direction.

Posted by: RCotton

2012-01-31T13:00:49+00:00

Re; heath weaver. Exactly how do you propose to know when a remote user's user-agent can fit two particular columns on a page without scrolling? I was faintly interested in this technique, up until the "count characters" came up. Who here really thinks that counting the characters in a string to set your formatting is the way forward? Seriously? (Do you never have to revise pages' content in your world or something?)

Posted by: Natalie Buxton

2012-01-31T13:00:49+00:00

This is a fantastic little bit of markup that can be used for more than just 'newspaper' layouts. Being able to offset an image between two columns of ANYTHING, not just verbose prose, is something that could certainly come in useful. Paul, your action is good in principle, but seems poor in execution. Transparent gifs to achieve layout? Might as well go back to tables.

Posted by: Alexander

2012-01-31T13:00:49+00:00

So why we are all looking forward having column layout with CSS3? In fact these are "fake" columns - you set the text breaks yourself - when it whould be done automatically at a given height that would be more usable for web.

Posted by: Steven N. Severinghaus

2012-01-31T13:00:49+00:00

Nick Franceschina commented, "I'm pretty sure a < p > tag is actually block-level." That may be true, but you'll find that it's still invalid to put a {div} inside a {p}. Very curious design decision in the standard, but I suppose it is a reasonable attempt to force the {p} to only contain paragraphs of text, and not arbitrary blocky objects. I was working with some wiki code (Trac, specifically) that would occasionally try to put {ul}s and other such blocks inside paragraphs, invalidating the XHTML. My solution was to simply replace the {p}s with a specific {div class="paragraph"}, styled appropriately. Not perfect, but it retains some semantic value and is legible and valid.

Posted by: Tobin Jones

2012-01-31T13:00:49+00:00

"Exactly how do you propose to know when a remote user's user-agent can fit two particular columns on a page without scrolling?" Well, it's not a css/xhtml site, though the markup is quite clean, but the international herald tribune (www.iht.com) does just that using some javascript DOM wizadry. Works perfectly on firefox and allows you to navigate through pages or put it all into one column (instantly, because the whole article is in the html, it's just controlling the display). Now if only we could get this technique and that technique together in unobtrusive javascript and semantic html.

Posted by: Ali Karbassi

2012-01-31T13:00:49+00:00

Mr. Natalie Buxton, Yes, the newpaper was just a certain example. This layout example can be used for anything designers what to use it for. Just think of all the possibilities for designers. 'Zine layouts, etc.

Posted by: RCotton

2012-01-31T13:00:49+00:00

Not all browsers have javascript (or have it enabled) Did you check the commedy effect with JS turned off? (hint: no article text at all! great!)

Posted by: Dmitri Colebatch

2012-01-31T13:00:49+00:00

I agree with Steve on the 2-column point. As an academic exercise its great to learn additional techniques for formatting the page. If you want to make an article readable, why not just have one scrolling div the height of the page and the correct reading width?

Posted by: Ali Karbassi

2012-01-31T13:00:49+00:00

I would like to apologize to Natalie Buxton for calling her a Mr.

Posted by: Mike Purvis

2012-01-31T13:00:49+00:00

I was trying to print up Christmas carol songsheets using CSS recently, just as a challenge to myself, and I realised that yeah, CSS is pretty lacking in terms of having content flow from one block element into another one. Products such as OpenOffice have taken stylesheet-based print documents a long way, and hopefully CSS3 will bring us some of their innovations. Not so that we can necessarily abuse them on the screen, but provide options for print and projection sheets.

Posted by: Seele Varcuzzo

2012-01-31T13:00:49+00:00

.. now I need a cigarette.

Posted by: James Edwards

2012-01-31T13:00:49+00:00

Is it really necessary at all? Would it not be possible to position the image-containing span in such a place that the caption text make sense in context, as though it were part of the sentence?

Posted by: Daniel Sheppard

2012-01-31T13:00:49+00:00

The solution which I created for the intersmash design challenge a year and a half ago produces the same effect without all the fiddling around. http://www.intersmash.com/challenge/ It introduces an extra placeholder tag into your page, but that's it.

Posted by: Bob Duncan

2012-01-31T13:00:49+00:00

I just wanted to post a thank you for yet another very useful trick. Happy Holidays.

Posted by: Carlos Rovira

2012-01-31T13:00:49+00:00

Great example and very usefull, thanks!

Posted by: Kevin Francis

2012-01-31T13:00:49+00:00

This is exactly what I wanted to do for a while now but have been putting off because of the anticipated difficulties :)

Posted by: Nathan

2012-01-31T13:00:49+00:00

Great work on the article, I personal think this style of "print on screen" layout could be useful in some circumstances. As for the title of my response, well it is for all of the negative posts that seem to be saying , "hey printers do this every day but we don't need it because we are on the web". Well as far as I'm concerned the boundaries between paper and monitor are not an issue, if the two shall meet it can only benefit or add to the extent of what we can achieve. Cheers for your input guys, I will find a use for this somewhere as I am sure many others will also.

Posted by: jim

2012-01-31T13:00:49+00:00

sorry, just cant see this being practical at all on a commercial project for many reasons. nice theoretical exersize however. roll on CSS3.

Posted by: Chris

2012-01-31T13:00:49+00:00

Safari/WebKit displays the [Pullout:] on top of the image. Kinda ruins the effect. It seems like using a background image would be the best approach.

Posted by: Richard

2012-01-31T13:00:49+00:00

The purpose of CSS is to disconnect Content+Structure from Format. Therefore while setting offsets to accomodate an image brought in through CSS is a reasonable thing (the image dimensions reside in the domain of awareness of the CSS rather than the (x)html), setting specific offsets to match the Content is a Bad-Thing. It erodes the seperation in the (x)html+css paradigm, moving back towards a direct connect between a specific instance of content and a specific set of formatting instructions that only work for that one instance. Its a step back towards slicing an image up and loading it into the cells of a table... Its also a step backward in that it concentrates on emulating a design highly suited to a specific medium (physical print) in a logically and practically different medium (web document), instead of spending that effort finding a better suited design for the actual target medium. As stated by someone else above; what is required is a system which will allow us to take a single element (or collection of contained elements) and instruct the UA to produce columns from it under certain stipulations. However, given the essentially "open-bottomed" nature of a UA-rendered document, I'm not convinced that any directive to "fit to screen" is actually desirable.

Posted by: Daniel M. Frommelt

2012-01-31T13:00:49+00:00

We tip our hats to Daniel Sheppard, who showed us a better method. As the co-developer of this technique, I was never happy with the pullout in the middle of the content, or counting characters. Daniel Sheppard has a solution, so I've got some adjustments to my code in the article, to merge both concepts. XHTML:

Lorem ipsum �

[del] [Pullout: [/del]monkey.jpg The office monkey, riding the office camel. [del]] [/del] Cum sociis � CSS: .CCspace {� clear:right;} .CCpullout {� clear:left;} .preImageBuffer {height:9em;width:1px;} #leftCol .preImageBuffer {float:right;} #rightCol .preImageBuffer {float:left;} Here's what's going on. Remove the CCspace and CCpullout from the middle of the content. Put it before all of the paragraphs. Make sure you add the preImageBuffer DIV prior to each. Make adjustments to the CCspace by adding a clear:right; and CCpullout by adding a clear:left; Add the three new CSS lines .preImageBuffer and the information about the left and right columns. To adjust the location of the pullout in the content, simply change the height in .preImageBuffer (height is in EMs.) Daniel Sheppard was not able to eliminate the second image from his example, but we've already fixed that part in our technique. By merging the two techniques, I'm happier about the overall concept. I owe Mr. Sheppard a big THANK YOU!

Posted by: Seth Thomas Rasmussen

2012-01-31T13:00:49+00:00

I've heard the arguments now in favor of this as a practical technique, and they pretty much fall flat. The chorus of "design for the web, not against it" is loud and proud, as it ought to be. This is a good thing, people. This technique isn't really practical enough to be used much of anywhere, thought I applaud the attempt. It's good to see experimentation. Kinda feels like ALA is trying to make up for lost time or somethin', though.

Posted by: Edgard Durand

2012-01-31T13:00:49+00:00

Whenever I found a technique that uses more elements than required remembers me what we did with tables. Aren't we doing the same thing with divs, spans and other elements just for visual concerns?

Posted by: Robert

2012-01-31T13:00:49+00:00

The merits of using this technique for on-screen display can (and should) be debated. However, has anyone considered using this in a print stylesheet? That would seem to be a natural place to use this, in my mind.

Posted by: Major

2012-01-31T13:00:49+00:00

In Mozilla 1.7.2 it looks fine, but in IE5/Win i see no borders and with Opera 7.6 i cannot see the middle text in http://www.alistapart.com/d/crosscolumn/example5.html

Posted by: Tee Bore

2012-01-31T13:00:49+00:00

While it can be useful in some cases, wrapping text around non-rectangular pictures with semantic markup would be a lot cooler. Paul's not-so-semantic solution (http://alistapart.com/discuss/crosscolumn/2/#c9730) gives you more artistic freedom. An article on how to do freeform wrapping would be a popular one I bet.

Posted by: Greg Burghardt

2012-01-31T13:00:49+00:00

I played around with this technique a while ago. I was really geeked that I got it to work: http://users.tm.net/gburghardt/crosscolumn/ And I have to agree with some of the other people here; I really don't see much of a use for it on the Web. I used to manage a newspaper Web site for my college and there were times when it would have been handy, but most pictures have cutlines to go with them. Once you add text into the mix, the height becomes too variable if you're not working with em-based layout widths. Still glad to see you guys cover it here. Somebody, somewhere WILL find a use for it, if I've learned one thing about Web design.

Posted by: Dave Mo

2012-01-31T13:00:49+00:00

Actually, I can think of a couple of practical uses for this technique right now, particularly as a 'call-out' type technique. Let's say you don't have 2 identical columns of solid text, but rather, one large column of main body copy and a smaller column to either the left or right that may or may not have text/or content in it. Let's say you'd like to float a 'call-out' that contains whatever you want, in my case I was thinking of links to popular or related content that is positioned over and into each column and has the content of both flow around it? Wouldn't this technique work for something like that? I think I may give this some experimentation. Thanks to both Mr. Frommelt and Mr. Sheppard for formulating another interesting and useful tool for designers to use!

Posted by: Dave Egerton

2012-01-31T13:00:49+00:00

Just a thought really. Would it not be possible to create the columns as divs with fixed or percentage widths. Then use a transparent image floated either left or right (in the right position within the text columns) to force the text to go around it where you want the image to span. This would create your effect for the text spacing, but at this stage the area to hold the image would be just blank. Then, you could relitivly position the image in a div (using z index) so that its really sitting in the space occupied by transparent images. Of course, if the page was a fixed size and you could be certain of the amount of text, you could simply add an absolutely positioned div. But then what happens with text resize. Would that not be less code, standards compliant and work in all modern browsers, or am I being stupid and making it too simplistic ? Overall I would like to see some further investigation please on different options as I like columns of text in web pages, just like newspapers but always struggle when allowing for text flow when the browser is resized

Posted by: Aaron

2012-01-31T13:00:49+00:00

Great article - thanks.

Posted by: Luis Speciale

2012-01-31T13:00:49+00:00

First of all, I write and speak a poor english, but I hope I can read and recognize an excellent idea. I'm a newbie in what concerns CSS and XHTML. My own site is full of tables and I try to learn. So you said that you will soon talk about �Cross-Column Pull-Out Part Two: Custom Silhouettes.�. Magn�fico !-)

Posted by: Flow Jocky

2012-01-31T13:00:49+00:00

This is a great topic and thanks for the article. I have to admit that this is way to difficult using the current toolset. However, if the semantics of the current flow model were slightly modified, it would become extremely simplified. The issue is that the current flow model one works horizontally, i.e., ltr or rtl. In the case of direction:ltr, this really implies the flow of content is from left-to-right, top-to-bottom, as determined by overflow and wrap properties. If the model was extended to allow for the CSS direction property to define top/bottom aspects of flow, then this problem would solved. To do this, there is needed additional values for direction to include: ttbltr, ttbrtl meaning Top to Bottom Left to Right, Top to Bottom Right to Left, respectively. The inverse of these may also be valid, but semantically, where is the bottom of the body block? I would advise staying away from that. Back on point. Today, inline objects flow into lines that wrap at the boundary of the containing block. The inline objects can be characters, inline-blocks, etc. My site http://aviston.org is an example of how this is done. In an enhanced model, a containing block could be defined to flow from ttbltr, i.e., top to bottom, right to left. The containing block would flow objects, not just glyphs, into the contained area using existing semantics for lines, margins, padding, etc. simply rotated to conform to the writing direction. I realize this does not conform to the CSS3 model, but it would be great to have.

Posted by: Flow Jocky

2012-01-31T13:00:49+00:00

Posted by: ottawa

2012-01-31T13:00:49+00:00

This is incredible. The only problem I see, is that it's difficult to read in the (2-3) column layout.

Posted by: Spruit_elf

2012-01-31T13:00:49+00:00

another already done http://www.literarymoose.info/=/synopsis/doublefloat.xhtml only using a , and or tag

Posted by: Gilles Racine

2012-01-31T13:00:49+00:00

Looking at the samples provided with the article, everything is fine but those columns are too close for confortable reading (at least in IE6)! Still, there is a lot of value in the proposed methods. Will try to figure out the ins and outs and adapt it to my site.

Posted by: Dest

2012-01-31T13:00:49+00:00

I am not so sure about the effectiveness of columns in web pages. For the user, scrolling up and down simply for the novelty of a page that reads like a newspaper is a pain. Columns require scrolling up and down for reading, if you see the content through a window. While you may be able to fit the content into a visible area, the window may be resized by the user, or viewed in a small screen. (shrinking font size with the window/screen? the feller's gonna ask for glasses when he's through!)

Posted by: Dominic (not a designer)

2012-01-31T13:00:49+00:00

Having read the comments which followed my original comment about the poor usability of multi-column text layouts on the Web, here's a few final thoughts. 1. Someone said to use this for a print version rather than an on-screen version. On the face of it, this sounds like a great idea. When reading from paper, narrow column widths are easier on the eye. Which is why newspapers use them. 300 years of convention for this. If the intention is to give the user something that will be easier to read when they print it out, then flowing text in columns is good. However, many users of online newspapers and zines will switch to the printer-friendly view when they want to read an item which is broken up across several pages. In this case, a multi-column print version would be extremely frustrating because these folks want to read online, not print out the item. 2. Someone said you can use this technique for non-text multi-column layouts. Yes, as long as the text you want people to read is in one column, no reason you can't use this technique to design interesting pages. 3. Someone said that newspapers can and do use multi-column layouts for text. They can, but mostly don't because they have learned that it doesn't work. Many papers and magazines started with multi-column layouts in their Web versions, but gave up on them due to feedback from users. As for the online International Herald Tribune, designed in France, they started with a multi-column layout, then had to add the option for users to switch to single-column views. They still have a multi-column layout as their default, but it's done as an ego/branding thing, not because it is better for users. So, this technique has very limited value.

Posted by: Patrick Ryan

2012-01-31T13:00:49+00:00

I agree with a lot of comments in terms of how usefull this is for display on screen. However I implemented this in a print stylesheet (as someone else mentioned) and it is brilliant. I can take my long one column web layout (with inline pictures) and translate it into a much friendlier version for print. Previously my print version was simply one long column resulting in two printed pages. It is now side by side columns with my image or quote in between - resulting in one page. Excellent work. Thank you!

Posted by: Willem

2012-01-31T13:00:49+00:00

I think Mr Ryan has found the online niche for this print-technique: the print stylesheet.

Posted by: Mike Purvis

2012-01-31T13:00:49+00:00

Re: Patrick Ryan I wasn't able to find the effect you mentioned anywhere on your site. Were you able to pepper your markup with the necessary 'column divs' and then have the print-stylesheet introduce the necessary float behaviour? Or are we back in old-school Printer-Friendly-Version territory here? Ultimately, neither solution is all that great, since as soon as you size up the font, you'll have the bottom three lines of every column poking their nose onto the next page. Before this becomes a genuinely useful technique, we're going to need to see some very careful CSS3 additions -- ones that downgrade to a simple single column flow in legacy browsers like IE6 and Firefox 1.0, but that also look better in whatever's the newest thing out there. Ultimately, however, as mentioned above, I'd like to see a lot more CSS for dealing with paged layouts. I'd like to bypass Powerpoint completely, give an xHTML presentation from my laptop, post it online afterwards, and print out a reasonable document to hand out. But without sacrificing any features of the three individual formats. (ie, columns in the paged version)

Posted by: Mark Wyner

2012-01-31T13:00:49+00:00

This is a very crafty and imaginative technique, but its reliance on aligning two columns of text poses a risk to readability. Many people view the web with text larger than default, and at certain levels of magnification this example cloaks text with text, rendering the copy illegible. While I do not wish to offend the author with a negative comment post, I do feel it's fair to make note of this potential pitfall. This isn't about semantic code (albeit important to me), but rather about accessibility. Your technique is absolutely appreciated, though, Mr. Frommelt. This is one of the few areas where print designers have it easier than web designers, and we would do best to find a viable means to the end result.

Posted by: Dracos

2012-01-31T13:00:49+00:00

Having to count characters to make this effect work is horribly unmanageable. CSS wasn't specifically designed to recreate everything print can do; some things should be left to print. Hopefully CSS3, with its automagic column mechanism (which Mozilla already supports), will give us something more logical to accomplish this, like float:center.

Posted by: Randy

2012-01-31T13:00:49+00:00

I'm looking at example 4 and 5 on a Windows XP machine with a standard install (for compatability testing) and both examples have the pull-outs overlapping the column text.

Posted by: amygdela

2012-01-31T13:00:49+00:00

This is an amazing trick, it's very well thought. Good job!

Posted by: design

2012-01-31T13:00:49+00:00

Surely this helps wrap text around picture centered between two columns in a nicer way.

Posted by: Steve

2012-01-31T13:00:49+00:00

Having multiple columns can be usefull in many situations, for example, say you have two authors and want to highlite both of their achivements, or like Jakob Neilson's http://www.useit.com you want to seperate two things. And want an image in the middle.