Editor’s Note: The following technique accomplishes its goals by using a few markup elements that lack innate semantic value. For some of you, that may place this means of achieving cross-column pull-outs beyond the pale. For the rest of you, bon appetit.
Print designers have long relied on the ability to wrap text around anything — most commonly around a picture centered between two columns. This design option has not been available for web designers … until now.
Basic two-column layout#section2
To use this technique, we must first set the stage.
XHTML:#section3
<div id="overall">
<div class="col">
<p>…</p>
<p>…</p>
</div>
<div class="col">
<p>…</p>
<p>…</p>
</div>
</div>CSS:#section4
* {margin: 0; padding: 0;}
/*Override defaults for all tags. */
p {padding: .625em 0; text-align: justify;
line-height: 20px;}
#overall {width: 755px; margin: 0 auto;}
.col {width: 365px; padding: 0 5px; float: left;}This makes an “overall” container with two columns with a 10-pixel gutter between them. Setting the line height and padding allows for more uniform display in browsers.
Preserving space#section5
The next thing is to make room for our pull-out. The concept is this: make room in the first column to allow the pull-out to step over its boundaries from the second column. This will give the illusion that we desire.
To do this, put a container in the middle of the first paragraph and float it to the right. It needs to have the same height as the image, and half the width of the image (350 x 300 pixels). Text will wrap around it since it is a floated element.
XHTML:#section6
<p>…parturient
montes,…There are numerous tricks in that simple span:
- Use a
spaninstead of adiv. We are inside a paragraph, and a block level element (div) can not be a child of an inline element ().
- Use a class attribute instead of an
idso you can do more than one pull-out on a page (if the images are the same size). - Use a non-breaking space as the content of the
span. (This fixes a problem with IE 5.2 on a Macintosh.) - Make sure you do NOT have a space between the prior word and the
span(example: parturient<span …).
CSS:#section7
.CCspace { width: 175px; height: 315px;
/*Set the width to half of the image and set the
height to the image height plus a little room
for the caption. */
float: right; padding: 5px;}
/*Float the span right and include any padding. */Figure 1: Example 1
Inserting the pull-out#section8
Next, we need to put a container in a paragraph in the second column to hold an image and its caption information.
XHTML:#section9
<p>… condimentum
The office
monkey, riding the office camel.
sit amet, …As before, use a span instead of a div because we are inside a paragraph and we want the XHTML to validate. The class attribute enables reuse. Again, make sure you do not have a space between the word and the span (example: condimentum<span…). Do, however, make sure there is a space between the and the caption.
CSS:#section10
.CCpullout { width: 350px; height: 315px;
/*Set the width and height of the span
to the image size. */
float: left; padding: 5px;
/*Float the span left and give it the
same amount of padding as CCspace. */
margin-left: -185px;
/*Move the image into the first column by negative
margin. The number is half the width of the
image (175px) plus the gutter (10px). */
text-align: center; font-size: .9em;
font-weight: bold; }
/*Add styling to the caption text*/The real trick to this technique is lining up the “CCspace” (first column) and the “CCpullout” (second column). The solution is to do some quick character counting. Highlight the text from the beginning of the paragraph up to “CCspace.” There are 294 characters. Go to the second column and try to find a space in the first paragraph that is as close to possible to 294 characters. In the example, there is room after 292 characters, so the “CCpullout” sits in that space right after the word “condimentum.” You may need some minor adjustments, but this technique works well within a two-character (+/-) range.
This example works in the current releases Mozilla, Netscape, Safari, Camino, Konqueror, and in IE 5.2 on a Mac. The most noticeable problem is IE on a PC, which displays the following.
Figure 2: Example 2
Cooking for picky eaters (IE and other bugs)
Warning: If you must make the design work in Netscape 4, then use the “@import” CSS rule to hide this design and protect the browser. Netscape 4 doesn’t play well with CSS and should be handled delicately.
To fix the remaining issues, we need to add some more information to the “CCpullout” and adjust the CSS.
XHTML:
<span class="CCpullout">
The office
monkey, riding the office camel.
By nesting another span inside the “CCpullout” we can remedy the problems with CSS.
CSS:
.CCpullout {width: 350px; height: 315px;
padding: 5px; float: left; margin-left: -185px;}
/*Note the removal of the caption styling.*/.CCpullout span {width: 350px; position: absolute;
/*Set the width of the nested span to the image
width. Position the span absolutely, so it
will appear in IE for the PC. */
text-align: center; font-size: .9em;
font-weight: bold;}
/*Caption styling appears at this level.*/Figure 3: Example 3
Accessibility#section11
There is one big concern with this technique. We’re interrupting the flow of a paragraph with additional and potentially unrelated content. What happens when a screen reader hits this?
We need to identify the pull-out for screen readers so that users will understand what’s going on. This requires additional information in the content and styling.
XHTML:#section12
<span class="CCpullout">
[Pullout:
The
office monkey, riding the office camel.
]
By inserting another inline element, such as the del, we can make the screen reader aware that something different is about to happen. The square brackets “ [ ] ” are used to indicate that something different is being read. Any special character could be used, but make sure it’s different enough so the screen reader user will notice the change in content. Make sure you put a space before and after the square bracket so the del doesn’t become part of the word immediately before it (example: [Pullout: …). We then use CSS to hide the information in the pull-out.
CSS:#section13
.CCpullout del {font-size: 0px; color: #fff;
position: absolute;}We want to hide the content from the computer while allowing the screen readers to read the information. A solution is to make the font zero pixels high and use a color that matches the background of the page since some browsers force a one-pixel minimum size. The last part of this trick is to remove the inline del from content flow. This can be achieved with absolute positioning. (Note: Using “display: block;” gave an unexpected display error in Konqueror.)
Using the del tag in this way is arbitrary and not particularly semantic. Another span could take care of that issue, but it would have to contain a class, etc. or another tag entirely could be used as long as it was an inline element.
The example was tested with the JAWS screen reader; it did not read a style of “visibility: hidden;” nor a “display: none;” which is why neither technique is used. A large negative left margin was unstable in some user agents. The bottom line is that JAWS is able to read the content inside del with this technique, yet it remains invisible to browsers. It reads as follows:
… condimentum Left bracket. Pullout Colon The office monkey, riding
the office camel. Right bracket. sit amet, …”
That’s not perfect, but it’s a lot better than just surprising screen reader users with unexpected content.
Another accessibility option is to avoid the use of an image and a caption. Use CSS to make the image appear as a background in the child span. It’s less messy, and the screen readers will skip over it entirely since it would then be a design element.
Review of the cross-column pull-out technique#section14
This technique is a bit picky when you try to line up the span tags in both columns — but it gives us the option to use a cross-column pull-out on a web page. The CSS validates. The XHTML validates Strict 1.0. The page even prints correctly with the pull-out. The pull-out will scale with text size adjustments in the user agent (Note: major adjustments to text size could break the design.)
I want to thank my student Matthew Latzke for his assistance and hard work helping to develop this technique! We’ll be back soon to explain the next version: “Cross-Column Pull-Out Part Two: Custom Silhouettes.”
Completed Code#section15
XHTML:#section16
[Column 1 paragraph]
<p>…parturient
montes,…[Column 2 paragraph]
<p>… condimentum
[Pullout:
The office
monkey, riding the office camel.]
sit amet, …CSS:#section17
* {margin: 0; padding: 0;}
p {padding: .625em 0; text-align: justify;
line-height:20px;}
#overall {width: 755px; margin: 0 auto;}
.col {width: 365px; padding: 0 5px;
float: left;}
.CCspace {width: 175px; height: 315px;
padding: 5px; float: right;}
.CCpullout {width: 350px; height: 315px;
padding: 5px; float: left; margin-left: -185px;}
.CCpullout span {width: 350px; position:
absolute; text-align: center; font-size: .9em;
font-weight: bold;}
.CCpullout del {font-size: 1px; color:
#fff; position: absolute;}Additional Examples#section18
Example 4 — Double-column image pull-out.
Example 5 — Double-column pull-quote.
Example 6 — Three-column double pull-out.
Example 7 — Three-column single pull-out (Fails in IE 5.2 Mac).
Enjoy!
Yet another extremely useful trick! Thanks!
“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.
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?
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/
Very cool, but now let’s see that with a liquid layout 😉
Nicely done! Great attention to detail.
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.
I agree, very nice. I was trying to do something similar in terms of emulating print design techniques.
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
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.
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?
Though is still the right choice in that scenario.
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.
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.
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.
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?
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.
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?)
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.
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.
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.
“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.
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.
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!)
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?
I would like to apologize to Natalie Buxton for calling her a Mr.
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.
.. now I need a cigarette.
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?
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.
I just wanted to post a thank you for yet another very useful trick. Happy Holidays.
Great example and very usefull, thanks!
This is exactly what I wanted to do for a while now but have been putting off because of the anticipated difficulties 🙂
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.
sorry, just cant see this being practical at all on a commercial project for many reasons. nice theoretical exersize however. roll on CSS3.
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.
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.
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 …
[Pullout:]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!
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.
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?
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.
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.
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!
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
Great article – thanks.
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 !-)
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.
This is incredible. The only problem I see, is that it’s difficult to read in the (2-3) column layout.
another already done
http://www.literarymoose.info/=/synopsis/doublefloat.xhtml
only using a
, and
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.
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!)
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.
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!
I think Mr Ryan has found the online niche for this print-technique: the print stylesheet.
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)
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.
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.
This is an amazing trick, it’s very well thought. Good job!
Surely this helps wrap text around picture centered between two columns in a nicer way.
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.