Cross-Column Pull-Outs

by Daniel M. Frommelt

64 Reader Comments

Back to the Article
  1. Yet another extremely useful trick!  Thanks!

    Copy & paste the code below to embed this comment.
  2. “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.

    Copy & paste the code below to embed this comment.
  3. 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?

    Copy & paste the code below to embed this comment.
  4. 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/

    Copy & paste the code below to embed this comment.
  5. Very cool, but now let’s see that with a liquid layout ;)

    Copy & paste the code below to embed this comment.
  6. Nicely done! Great attention to detail.

    Copy & paste the code below to embed this comment.
  7. 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.

    Copy & paste the code below to embed this comment.
  8. I agree, very nice. I was trying to do something similar in terms of emulating print design techniques.

    Copy & paste the code below to embed this comment.
  9. 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

    Copy & paste the code below to embed this comment.
  10. 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.

    Copy & paste the code below to embed this comment.
  11. 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?

    Copy & paste the code below to embed this comment.
  12. Though <span > is still the right choice in that scenario.

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. 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.

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. 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?

    Copy & paste the code below to embed this comment.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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?)

    Copy & paste the code below to embed this comment.
  19. 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.

    Copy & paste the code below to embed this comment.
  20. 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.

    Copy & paste the code below to embed this comment.
  21. 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.

    Copy & paste the code below to embed this comment.
  22. “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. </dream>

    Copy & paste the code below to embed this comment.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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!)

    Copy & paste the code below to embed this comment.
  25. 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?

    Copy & paste the code below to embed this comment.
  26. I would like to apologize to Natalie Buxton for calling her a Mr.

    Copy & paste the code below to embed this comment.
  27. 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.

    Copy & paste the code below to embed this comment.
  28. .. now I need a cigarette.

    Copy & paste the code below to embed this comment.
  29. 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?

    Copy & paste the code below to embed this comment.
  30. 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.

    Copy & paste the code below to embed this comment.
  31. I just wanted to post a thank you for yet another very useful trick. Happy Holidays.

    Copy & paste the code below to embed this comment.
  32. Great example and very usefull, thanks!

    Copy & paste the code below to embed this comment.
  33. This is exactly what I wanted to do for a while now but have been putting off because of the anticipated difficulties :)

    Copy & paste the code below to embed this comment.
  34. 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.

    Copy & paste the code below to embed this comment.
  35. sorry, just cant see this being practical at all on a commercial project for many reasons. nice theoretical exersize however. roll on CSS3.

    Copy & paste the code below to embed this comment.
  36. 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.

    Copy & paste the code below to embed this comment.
  37. 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.

    Copy & paste the code below to embed this comment.
  38. 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:
    <div class=“col” id=“leftCol”>
    <div class=“preImageBuffer”></div>
    <span class=“CCspace”> </span>
    Lorem ipsum …

    <div class=“col” id=“rightCol”>
    <div class=“preImageBuffer”></div>
    <span class=“CCpullout”> [Pullout: <span>monkey.jpg The office monkey, riding the office camel. </span>] </span>
    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!

    Copy & paste the code below to embed this comment.
  39. 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.

    Copy & paste the code below to embed this comment.
  40. 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?

    Copy & paste the code below to embed this comment.
  41. 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.

    Copy & paste the code below to embed this comment.
  42. 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

    Copy & paste the code below to embed this comment.
  43. 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.

    Copy & paste the code below to embed this comment.
  44. 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.

    Copy & paste the code below to embed this comment.
  45. 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!

    Copy & paste the code below to embed this comment.
  46. 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

    Copy & paste the code below to embed this comment.
  47. Great article – thanks.

    Copy & paste the code below to embed this comment.
  48. 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 !-)

    Copy & paste the code below to embed this comment.
  49. 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.

    Copy & paste the code below to embed this comment.
  50. <style type=“text/css”>
    .newspaper {
      /* alter the flow model */
      direction:ttb-ltr;
      /* now, content flows into the block
      from the top left corner, down the left
      edge until hitting the bottom edge of
      bounding box.  Depending on the whitespace
      and overflow properties, content would
      flow into the next line down, i.e., the
      top edge of the next “column” to the
      right. */

      /* define the “column” width */
      line-height:50em;
      /* given that the box is turned 90 degrees
      from normal, the lines are now 90 degrees
      off also.  Here is the leap: Lines now
      serve as columns for this block.  Content
      flows into the vertical lines just as it
      would in any other flow model. */
    }

    .newspaper * {
      /* Make the output readable */
      direction:ltr;
      /* While it is important that the this
      object flows into the containing block
      like newspaper copy, it is also important
      that the content of this element be
      presented in a manner readable by the
      viewer.  In this case, we use the direction
      property to revert presentation to
      the expected ltr, as needed for English.
      */
    }
    </style>

    Copy & paste the code below to embed this comment.
  51. This is incredible. The only problem I see, is that it’s difficult to read in the (2-3) column layout.

    Copy & paste the code below to embed this comment.
  52. another already done

    http://www.literarymoose.info/=/synopsis/doublefloat.xhtml

    only using a , <span> and <object>or<img> tag

    Copy & paste the code below to embed this comment.
  53. 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.

    Copy & paste the code below to embed this comment.
  54. 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!)

    Copy & paste the code below to embed this comment.
  55. 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.

    Copy & paste the code below to embed this comment.
  56. 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!

    Copy & paste the code below to embed this comment.
  57. I think Mr Ryan has found the online niche for this print-technique: the print stylesheet.

    Copy & paste the code below to embed this comment.
  58. 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)

    Copy & paste the code below to embed this comment.
  59. 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.

    Copy & paste the code below to embed this comment.
  60. 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.

    Copy & paste the code below to embed this comment.
  61. 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.

    Copy & paste the code below to embed this comment.
  62. This is an amazing trick, it’s very well thought. Good job!

    Copy & paste the code below to embed this comment.
  63. Surely this helps wrap text around picture centered between two columns in a nicer way.

    Copy & paste the code below to embed this comment.
  64. 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.

    Copy & paste the code below to embed this comment.