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.
Tobin Jones
“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>
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.
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.
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?
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.
Richard
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.
Daniel M. Frommelt
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.
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.
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.
Robert
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.
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
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.
Greg Burghardt
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.
Dave Mo
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.
Dave Egerton
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
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 !-)
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.
<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.
Dest
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.
Dominic (not a designer)
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.
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.
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)
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.
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.
Randy
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.
Steve
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.
64 Reader Comments
Back to the ArticleSteven N. Severinghaus
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.
Tobin Jones
“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>
Ali Karbassi
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.
RCotton
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!)
Dmitri Colebatch
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?
Ali Karbassi
I would like to apologize to Natalie Buxton for calling her a Mr.
Mike Purvis
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.
Seele Varcuzzo
.. now I need a cigarette.
James Edwards
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?
Daniel Sheppard
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.
Bob Duncan
I just wanted to post a thank you for yet another very useful trick. Happy Holidays.
Carlos Rovira
Great example and very usefull, thanks!
Kevin Francis
This is exactly what I wanted to do for a while now but have been putting off because of the anticipated difficulties :)
Nathan
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.
jim
sorry, just cant see this being practical at all on a commercial project for many reasons. nice theoretical exersize however. roll on CSS3.
Chris
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.
Richard
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.
Daniel M. Frommelt
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!
Seth Thomas Rasmussen
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.
Edgard Durand
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?
Robert
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.
Major
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
Tee Bore
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.
Greg Burghardt
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.
Dave Mo
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!
Dave Egerton
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
Aaron
Great article – thanks.
Luis Speciale
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 !-)
Flow Jocky
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.
Flow Jocky
<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>
ottawa
This is incredible. The only problem I see, is that it’s difficult to read in the (2-3) column layout.
Spruit_elf
another already done
http://www.literarymoose.info/=/synopsis/doublefloat.xhtml
only using a , <span> and <object>or<img> tag
Gilles Racine
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.
Dest
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!)
Dominic (not a designer)
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.
Patrick Ryan
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!
Willem
I think Mr Ryan has found the online niche for this print-technique: the print stylesheet.
Mike Purvis
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)
Mark Wyner
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.
Dracos
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.
Randy
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.
amygdela
This is an amazing trick, it’s very well thought. Good job!
design
Surely this helps wrap text around picture centered between two columns in a nicer way.
Steve
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.