Discuss: Cross-Column Pull-Outs
by Daniel M. Frommelt
- Editorial Comments
12 <p /> is not an inline element...
Though <span > is still the right choice in that scenario.
posted at 03:05 pm on December 21, 2004 by Seth Thomas Rasmussen
13 Nice.. but why...
While I admit that you have successfully copied a print layout, the first question that jumped into my head was “why?”.
The web is not print. And as soon as we (as programmers/designers) stop pandering to the needs of legacy “print” media ideas, the sooner they might realise that web pages don’t need to be pixel perfect facsimilies of the print equivalent.
This thinking, (pixel perfect design in every browser) is what helped spawn awful table based layouts.
It is our job to educate our customers. Not to spend hours creating convoluted markup and hacks to make it look like a print magazine.
hmmm sorry.. on reading that, I got to ranting. I’ll just go and scowl in the corner some more.
posted at 03:55 pm on December 21, 2004 by Steve
14 re: Already Done
Hi, Apartness,
Freeway does use CSS for the text flowing trick. The text is in a CSS positioned DIV, with CSS controlled shims (or transparent GIFs) to create the offset. The gifs are placed in the text flow using float:left or float:right – this was an idea inspired by the Curveliscious demo that I found last year.
As well as procude rectangle holes in HTML text for images to look through, my Action allows more irregular shapes to achieve a similar effect.
The rest of the pages are laid using a table, which is Freeway’s default. The point of the demo pages was to demo the Action, rather than build a 100% CSS page.
posted at 03:58 pm on December 21, 2004 by Paul
15 Reason why.. (maybe)
Steve,
A few good outcomes of this:
-News sites such as New York Times, Milwaukee State Journal, etc. now can achieve the same layout as their newspaper with valid web standards
-New possibilities for designers.
posted at 04:03 pm on December 21, 2004 by Ali Karbassi
16 Newspaper layouts
Yes, Ali, they could. And again, I’ll congratulate the author of this piece for their patience and endeavour.
Column based layouts for printed media have proven to be a very effective way to present readable text.
But on the web, column based layouts make reading a large prose difficult – To say the least. We are here to present information in a palatable fashion, in an easily readable format.. so why would I intentionally choose a layout such as this?
If the papers you mentioned need to mimic their physical printed media counterparts for some reason (so I, for example, being in Australia, could have the benefit of getting my hands on them) then provide a PDF for me to download and print.
I just don’t understand why you would deliberately make it hard(er) for someone to digest your information?
posted at 04:15 pm on December 21, 2004 by Steve
17 RE: Newspaper layouts
I think that multiple columns can certainly improve readability on the web. It is true that having two columns of text that extends past the visible area is a real pain. However, two columns of text that fills only the visible area can also be easier to read i.e. no scrolling, keeping lines below 10 words.
I am not sure if this article is the answer, but it is a step in the right direction.
posted at 04:30 pm on December 21, 2004 by heath weaver
18 RE: Newspaper Layouts
Re; heath weaver. Exactly how do you propose to know when a remote user’s user-agent can fit two particular columns on a page without scrolling?
I was faintly interested in this technique, up until the “count characters” came up.
Who here really thinks that counting the characters in a string to set your formatting is the way forward? Seriously? (Do you never have to revise pages’ content in your world or something?)
posted at 04:40 pm on December 21, 2004 by RCotton
19 More than just Newspaper Layout
This is a fantastic little bit of markup that can be used for more than just ‘newspaper’ layouts.
Being able to offset an image between two columns of ANYTHING, not just verbose prose, is something that could certainly come in useful.
Paul, your action is good in principle, but seems poor in execution. Transparent gifs to achieve layout? Might as well go back to tables.
posted at 04:45 pm on December 21, 2004 by Natalie Buxton
20 re: Avoid web text in columns
So why we are all looking forward having column layout with CSS3?
In fact these are “fake” columns – you set the text breaks yourself – when it whould be done automatically at a given height that would be more usable for web.
posted at 05:08 pm on December 21, 2004 by Alexander
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






11 Minor quibble
Thanks for sharing – interesting final results, although somewhat tedious (character counting, especially) to get to.
My minor quibble is with using the del tag, which is to indicate deleted text. Wouldn’t ins (for inserted text) be more appropriate and just a smidge closer to semantically correct?
posted at 02:59 pm on December 21, 2004 by Joe Lowery