The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns. But first we need to update the original technique.
Upgrading the cross-column pull-out#section2
After ALA published Cross-Column Pull-Out Part One, Daniel Sheppard shared a technique that lets us avoid character counting, the most cumbersome part of the original method. Let me briefly explain this new technique.
XHTML:#section3
<div id="leftCol" class="col">
<div class="preImageBuffer"></div>
<span class="CCspace"> </span>
<p>…</p>
</div><div id="rightCol" class="col">
<div class="preImageBuffer"></div>
<span class="CCpullout">
<del> [Pullout: </del>
<span>
<img src="monkey.jpg" alt="" />
The office monkey, riding the office camel.
</span>
<del>] </del>
</span>
<p>…</p>
</div>
CSS:#section4
.CCspace {… clear:right;}
.CCpullout {… clear:left;}.preImageBuffer {height:9em;width:1px;}
#leftCol .preImageBuffer {float:right;}
#rightCol .preImageBuffer {float:left;}
Identify both columns using leftCol and rightCol. 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 the CCspace and CCpullout in the columns. 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.) Now we have the ability to change the vertical height of the pull-out without character counting!
Example 0 — The fixed cross-column pull-out
The only design error is on IE 5 on a Macintosh, which we’ll get to later. Now that we’ve improved the core technique, we can move on to the fancy stuff.
Setting the stage for the silhouette#section5
To begin, you will need a GIF or PNG with a transparent background. Our test subject is the Office Monkey: monkey.gif. (Note: We’ve added a border here to show that the background is transparent.)
The goal of the silhouette is to wrap the text around our diamond-shaped graphic. As in the basic cross-column pull-out, we’ll start with two columns and the image will be placed at the top of the second column, right after the preImageBuffer.
XHTML:#section6
<div id="overall">
<div id="leftCol" class="col">
<div class="preImageBuffer"></div>
<p>…</p>
<p>…</p>
</div>
<div id="rightCol" class="col">
<div class="preImageBuffer"></div>
<span class="CCsilhouette">
<span>
<img
src="monkey.gif"
alt="Office Monkey" />
</span>
</span>
<p>…</p>
<p>…</p>
</div>
</div>
CSS:#section7
* {
margin: 0;
padding: 0;
}
p {
padding: 0.625em 0;
text-align: justify;
line-height: 20px;
}
#overall {
width: 755px;
margin: 0 auto;
}
.col {
width: 365px;
padding: 0 5px;
float: left;
}
.CCsilhouette {
float: left;
clear: left;
margin-left: -180px;
}
.CCsilhouette span {
position: absolute;
}
.preImageBuffer {
height:9em;width:1px;
}
#leftCol .preImageBuffer {
float:right;
}
#rightCol .preImageBuffer {
float:left;
}
Perhaps the most important piece to this CSS is in the
where we set the top and bottom margin to 0.625 pixels and the line height to 20 pixels. This standardizes the text to allow us to position the silhouette in a more predictable manner.
Figure 1: Example 1
Preserving silhouette space#section8
The image is in the middle of both columns, but the text is not wrapping yet, so we need to make room for our pull-out. Unlike the original cross-column technique, this method floats only small sections of the text at a time. Let’s start by adding space to the leftCol.
XHTML:#section9
<div class="preImageBuffer"></div> <span class="LS1"> </span>
CSS:#section10
.LS1 {
/* Float the <span> right and clear it right.
*/
float: right; clear: right;
/*
The height will be arbitrary based on the
section of the image that you want to float
text around.
*/
width: 50px; height:40px;
/*
Use a background color to see the space you
are creating. Remove it later.
*/
background: #f00;
}
Figure 2: Example 2
By using height increments of 20 pixels (same as the line-height in the <p>), we are able to wrap the text a line at a time (20px = 1 line; 40px = 2 lines; etc). You can see the space with the background color turned on. Use it until you have the space you desire. Then remove the background color.
Finishing the first column#section11
One space down and a bunch to go! Let’s add some more spans right after the first. The number of spans is based on the image that you have and how close you want the text to float to the image.
XHTML:#section12
<div class="preImageBuffer"></div> <span class="LS1"> </span> <span class="LS2"> </span> <span class="LS3"> </span> <span class="LS4"> </span> <span class="LS5"> </span> <span class="LS6"> </span> <span class="LS7"> </span> <p>…</p>
Putting carriage returns after the <span> doesn’t alter the effect and it makes it a lot easier to spot when editing code.
CSS:#section13
.LS1, .LS2, .LS3, .LS4,
.LS5, .LS6, .LS7
{
float: right; clear: right;
}
.LS1 {width: 50px; height:40px; background: #f00;}
.LS2 {width:100px; height:40px; background: #0f0;}
.LS3 {width:140px; height:40px; background: #00f;}
.LS4 {width:170px; height:60px; background: #f00;}
.LS5 {width:140px; height:40px; background: #0f0;}
.LS6 {width:100px; height:40px; background: #00f;}
.LS7 {width: 50px; height:40px; background: #f00;}
To make things more visible for the example, there are different background colors to show the location of each <span>. (Note: The class name LS stands for “left side” and is arbitrary.)
Figure 3: Example 3
The second column#section14
The technique is similar for the second column, rightCol, but there is one minor change in the XHTML:
XHTML:#section15
<div class="preImageBuffer"></div>
<span class="RS1">
<span class="CCsilhouette"><del> [Pullout:
</del>
<span>
<img
src="monkey.gif"
alt="Office Monkey" />
</span>
<del> ] </del></span>
</span>
<span class="RS2"> </span>
<span class="RS3"> </span>
<span class="RS4"> </span>
<span class="RS5"> </span>
<span class="RS6"> </span>
<span class="RS7"> </span>
The trick is to make the very first space (RS1) have the pull-out (CCsilhouette) as a child. We do this to make IE on the Macintosh behave better. It still doesn’t completely solve the problem, but without the pull-out nested in the first space, the text would be nearly impossible to read in IE 5 Mac. The rest of the spacer <span> behaves as the first column. (Note: RS stands for “right side.”)
CSS:#section16
.RS1, .RS2, .RS3, .RS4,
.RS5, .RS6, .RS7
{
float: left; clear: left;
}
.RS1 {width: 50px; height:40px; background: #f00;}
.RS2 {width:100px; height:40px; background: #0f0;}
.RS3 {width:140px; height:40px; background: #00f;}
.RS4 {width:170px; height:60px; background: #f00;}
.RS5 {width:140px; height:40px; background: #0f0;}
.RS6 {width:100px; height:40px; background: #00f;}
.RS7 {width: 50px; height:40px; background: #f00;}
As you look through the CSS, you will realize that the image being used is symmetrical. The heights and widths are the same as the first column, so the CSS could be optimized. This exercise is left up to the designer, and will not be true when dealing with odd shaped and non-symmetrical images.
Figure 4: Example 4
Recap of the cross-column silhouette pull out#section17
To finish the pull-out, remove all references to the background colors from the CSS.
Figure 5: Example 5
This particular technique works great in most browsers. IE on a Macintosh has some issues with spacing, but the error is tolerable. (The design forces space above the image as in Figure 6.)
Figure 6: the design error for IE on a Macintosh
Please be aware of this discrepancy as you decide whether to use this technique.
There are a few points that should be made clear. Remember to keep the non-breaking spaces ( ) in the <span> tags. Though it doesn’t fix IE on a Macintosh, it does make it a bit more presentable. The choice to make the pull out an image instead of a background image is up to the designer. If you desire a background image, then add the CSS to the .CCsilhouette span.
Once again, I want to thank my students Matthew Latzke for his assistance and Andrew Assarattanakul for helping discover and resolve the nesting problem for IE on a Macintosh. Most importantly, I want to thank Daniel Sheppard who helped eliminate the character counting and showed us how to use the preImageBuffer.
Completed Code#section18
XHTML:#section19
<div id="leftCol" class="col">
<div class="preImageBuffer"></div>
<span class="LS1"> </span>
<span class="LS2"> </span>
<span class="LS3"> </span>
<span class="LS4"> </span>
<span class="LS3"> </span>
<span class="LS2"> </span>
<span class="LS1"> </span>
<p>…</p>
</div><div id="rightCol" class="col">
<div class="preImageBuffer"></div>
<span class="RS1">
<span>
<img
src="monkey.gif"
alt="Office Monkey" />
</span>
</span>
<span class="RS2"> </span>
<span class="RS3"> </span>
<span class="RS4"> </span>
<span class="RS3"> </span>
<span class="RS2"> </span>
<span class="RS1"> </span>
<p>…</p>
</div>
CSS:#section20
* {
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;
}
.CCsilhouette {
float: left;
clear: left;
margin-left: -180px;
}
.CCsilhouette span {
position: absolute;
}
.preImageBuffer {
height: 9em;
width: 1px;
}
#leftCol .preImageBuffer {
float: right;
}
#rightCol .preImageBuffer {
float: left;
}
.LS1, .LS2, .LS3, .LS4 {
float: right; clear: right;
}
.RS1, .RS2, .RS3, .RS4 {
float: left; clear: left;
}
.LS1, .RS1 {
width: 50px; height:40px;
}
.LS2, .RS2 {
width:100px; height:40px;
}
.LS3, .RS3 {
width:140px; height:40px;
}
.LS4, .RS4 {
width:170px; height:60px;
}
Additional examples#section21
Example 6—Non-symmetrical variation
Example 7—Double face (or is it a vase?)
Enjoy!
Daniel,
I have to applaud your solution to approximate a print-based cross-column layout in validating CSS and (X)HTML, but if we’re going to be adding all of those extra spans, counting pixels, and fussing over the layout I don’t see how this is easier or faster to implement than the old days of creating a table-in-table column layout and slicing up the image.
While it is a great technique I have to agree with Jough on this one. I thought the whole point of standards/semantics was that we were moving away from the tag soup and trying to use the minimal mark-up necessary?
Yo!
To echo the statement of the others, the technique is interesting. I’d auggest though, that the spans, that offset the image, shuold realy be done via Javascript, it’s perfect for this kind of job.
– Kevin
I haven’t read all the comments in the ‘Part One’ discussion, but I’m sure someone would have touched on the readibility aspect of this approach. It’s annoying on my eyes to have to read across different line lengths, so I don’t find much worth in sacrificing readibility to embed a picture which could be placed anywhere really.
BUT having said that, there are definately cases in which this technique could be useful and if used in moderation along with a neat design. Thanks for your efforts.
nt
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html
I’m sorry I had to dig that up.
I don’t know why someone would like to use this technique.
I don’t care if it requires as much markup as a table solution or if it’s a bit of tag soup, or if it could be better handled with JavaScript, or if the surrounding text is difficult to read.
I think it’s a creative bit of work… practical or no (time will tell). Thanks for your efforts Daniel 8 )
One more thought (see message title)
What happened to ALA!!! No offense to the author, because I do respect the amount of effort it takes to impliment something like this, but that’s just my point. What happened to elegance? As of late there have just been a lot of overly complicated techniques or even worse; javascript hacks!
I don’t know what it takes to become a contributor to ALA, but I’ve consistently found that people’s replies in the forums are either more useful than the articles, debunk what the article was proving, or provide far better solutions! Yee gads!
Stefan:
Yes, we got the slant idea from slantastic, although we implimented it in a different way.
To Everyone else:
We here at the Web Department strive to push the envelope, and want people to understand that we took on this project because people said that it couldn’t be done. Use it where you want, when you want, or don’t.
Yes, we understand that the web is not print. This does not mean that the technique should be immediately pushed aside, however. Whether or not it has any practicle implications has yet to be seen, perhaps someone somewhere will find a use. Ultimately we furthered our knowledge in CSS and it’s capabilities, and we hope that it furthered yours as well.
Ryan:
Dude! Why the exclamation points!!! Did you read Joe Clark’s article in this issue!!! Or would you rather whine about Cross Column II!!!!! Cross Column I bore a disclaimer acknowledging that it was not for everybody!!! Did you read that!!!! If not why not!!! How many exclamation points can you put into a single message!!! What does it take to become a contributor to ALA you ask!!! Why don’t you read ALA’s Contribute page and find out!!!! Stop shouting, you’ll hurt your throat!!!!!!!!!!
I have no use for the technique yet.
But like Image Replacement began as a ‘hack’, these exercises will be further pushed for more practicle uses.
The creative process begins with often weird ideas then get refined.
Nothing’s wrong when ALA or others think out-loud.
…
Is the effect really worth all this effort???
A lot of work, so long code and so small effect.
I didn’t object the first article, because it’s effect was pretty nice and it was a fresh idea, but the second article, that makes this hack even dirtier, should not be published.
This is unreliable hack, and we’ve all seen CSS/Edge slantastic, anyway.
I do hope this doesn’t get “out into the wild” and become a new screen design technique for sites, sure it’d be nice for print style sheets, but definately not for screen reading.
If it does then I hope designers read the other current ALA article on alternative style sheets and provide two versions of the site so users arn’t forced to scroll down, up and down to read an article.
In one article we talk about accessibility for low-vision people and here we go with two columns 🙂 And the other time we say how web is different from print.
I’m not sure if I will ever use this technique, but I’m not criticizing it–it is always interesting to see what is possible and how in web design 🙂
The first person to shove a stick through a round disk and call it a wheel was probably met with nay-sayers as well Daniel.
Again, I applaud your efforts.
It is a nice twist on Slantastic. It probably should not be used “as-is” considering the obvious usability issues, but it’ll eventually trigger a good idea for someone someday.
I also agree with Michael Efford that this technique, if taken literally, should be reserved for print. Still, it’s really a lot of work for something that wouldn’t necessarily be noticed by many (outside the web design world anyway). Not sure my clients would like to pay for that.
While, I may never use this particular effect, I am very happy to learn more about CSS and its capabilities. That someone would spend a time attempting this and then exploring an improvement is exactly what ALA is about (to me). Just because YOU may not see a use or think it is inappropriate doesn’t mean that other don’t or can’t learn from it.
The negative comments in this discussion remind me of all the flack that the Pop-Up article got from people who have never developed a web application. I’d hate to think what would happen if someone decided to seriously explore frames (which I am doing for my web apps).
Progress is made by those who ignore “conventional wisdom” and push pass the small minded. Back to the dark ages with you nay-sayers! The web is for more than just browsing pretty brochures or reading blogs.
Thank you Daniel for opening the door a little wider.
But how many of our clients understand this simple concept? And how many of us really have complete creative control over the work we do? If I ever run into a client who comes from a print background (which seems to be damn near all of them in my experience) and they’ve just got to put an image in two columns of text ‘cos they used to always do it that way in the newspaper of magazine or whatever, and this article lets me meet those rather silly demands without having to resort to a tables based layout, I’ll be thankful for these two articles. Could I have read the first one and then applied Erid’s slantastic to it myself? Sure, but reading this article is a hell of a lot less work for me.
I can also see this technique forming the basis of an argument to move away from publishing stuff online in PDF format. Am I the only one who has heard something about how we’ve got to use PDFs in order to preserve the fidelity between the printed content and the online content? Maybe I’ve just been unlucky and worked with a lot more thick headed print centric idiots who also happen to sign my paychecks.
I can see applications for this, if handled with care. My biggest worry would be users resizing their text and suddenly getting giant gaps in the line-spacing. I suppose that could be handled by making more spans equal to half the line-spacing.
As for ALA readers complaining about not wanting to read two huge columns, perhaps it’s best that we not think of this technique solely for a news site. How about as a homepage design with two wide, but not too tall columns under a large splash image? (sorry, I’m designing in my ehad) Many companies have a similar treatment and with a nice graphic (or quote) breaking the columns up, it could look rather elegant, especially with generous line spacing.
I should proofread my comments. Sorry about the HTML and misspelling the word head. :^(
hi, very interesting technique. I have had several students wanting to acheive this…
I tested robustness when resizing the text (in Safari). I didn’t expect miracles, but it was okay. What techniques do other people use to ensure design integrity and accessibility?
My opinion tends to agree with a few other posts I’ve read. It’s interesting to learn something new about CSS but as of right now I don’t see a practical application for myself, especially with the browser incompatibility.
And to reply to the above post about what techniques people use to ensure design integrity and accessibility. I try and check out all of my projects on as many browsers and operating systems as I can get my hands on to make sure it doesn’t break down too much. As I am just beginning to become more active on the subject usability I’ll have to leave that one to someone else.
This is too much. The benefit of the technique is way less than the effort involved. I guess a PDF document is more approprite if this kind of layout is required.
…So browsers that don’t support the CSS won’t have to bother downloading the extra markup. Just create the extra elements with the DOM Onload.
I work in advertising, and they always have me break things up like this, the layouts are just like print. There’s nothing you can do about it. So a technique that lets you do table-layout things but ISN’T a table layout is GREAT! Thanks ALA.
Whilst I agree that any furthering of the/our understanding of the capabilities of CSS is a Good Thing (TM), I also tend to agree that, on average, the quality of articles on ALA has gone down significantly.
To put it another way, before (whenever that was), ALA articles generally had the base intention of helping a great many of the readers do something they’d been wanting to do for improving the websites they create *for the users.* Now (whenever that begain), ALA articles seem to have the base intention of publicizing hacks and kludges to the tune of pleasing the occasional off-kilter client.
Unfortunately, the only way to draw the line between the two is with “feeling” (the same way one person might judge something as “art,” and another might not). I can’t think of the right words for the situation, but it almost seems as if the distinction between techniques (which implies an element of craft) and tricks (which implies something of a more devious, short-sighted nature).
Perhaps the best way of saying it is that it feels as though we’ve reached the summit of the mountain, and are now, unfortunately, rolling back down the other side. We’ve pushed CSS/XHTML to its limit, and are now trying to estabilish new tricks that won’t help the user, but will only further our own egos (or those of our clients). We’re headed back toward tag soup — toward something we’d never want our clients to even touch, lest they “break” something, and that’s just foolish.
IMHO There is no problem with the quality of the article, which is fine. Sometimes you have to do funny things as per client request.
It is true though, the article is addressing something that is in no way a practical issue.
If the example image had been something else than that diamond-shaped monkey on a dromedary; if the coloured squares had been more discrete, and if there had been less aliasing over them, then my primary reaction would have been less painful..
Although I acknowledge the amount of work to achieve them, the existing examples make those markup/css tricks quite hard to swallow..
And, yes, it looks like a joke! ,)
NEver knew you could do that stuff! Awesome article
Whilst I too could not see myself using the technique I think the article is interesting and can stimulate thought in our minds so thanks for publishing it.
ALA for me acts like an online (although not real time) brainstorm session – and that’s valuable. It’s up to each individual to take or leave the techniques that are presented. And the comments you get often point the way to other and/or better refinements.
Are you disappointed still to get some negative comments despite the appearance of your new aquatic car logo?
http://www.iht.com/articles/2005/01/11/business/ibm.html
I just happened to see this on slashdot, and I think that the column thing really works in that context. They could possibly put a technique like this to work.
man what a bunch of zealot crybabies.
ala is as always- putting forth ideas, stretching, enlarging and sometimes breaking barriers that have led to where we are now.
its like some of you forget who runs this mag, and the fact that he just might know a thing or two.
drop your stones, and the last I looked this wasnt the salem witch trials.
Those who say this technique is a bit too messy have a point. But then again, articles like this can be an inspiration to other developers, even if it only proves that it is not worth bothering with – isn’t that part of what ALA is all about?
Also, do I detect a bit of an anti-print design bias in the comments? The web is about distributing information, it is not just media for computer monitors. Some of it, believe it or not, is printed on paper and read.
I think there’s a place for techniques to achieve print-style layouts.