Not Just Rectangles Anymore

December 11, 2008 8:28 PM

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges, then copy the generated code to your web site. From the folks at The Idea Shower who brought us Read It Later.
posted by netbros (12 comments total)

Sheesh, those are going to be some annoying web pages.
posted by ryanrs at 8:43 PM on December 11, 2008

oh, that's kinda cool. css today reminds me of the time I first saw quark. you know, cool, now I can do in just ten minutes on the computer what I used to do in two seconds with my pen. good times.
posted by krautland at 8:59 PM on December 11, 2008

You know, there is some potential for awesome, and some³ potential for awful here.
posted by maxwelton at 9:01 PM on December 11, 2008 [3 favorites]

/views source.

What in the fuck?
posted by Artw at 9:23 PM on December 11, 2008 [2 favorites]

What in the fuck?

Yeah, no kidding. Whole shit-ton of tiny little 15px divs? That's about as useful for separating content and style as a steak knife is for splitting atoms.
posted by danb at 9:34 PM on December 11, 2008 [2 favorites]

This reminds me of the sort of things we used to do with tables back in the day. Soon enough people will realize that a thousand nested divs is no less hacky and stupid than using tables, web devs will find some other, similar way to abuse markup, all while celebrating their new "div-less layout techniques."
posted by braksandwich at 9:49 PM on December 11, 2008 [5 favorites]

I'm not certain about the official position of the Church of our Lord and Savior Separation of Style and Content, but I would hope that degrading gracefully with javascript (their option #3) renders it a forgivable sin.

Unfortunately, the alignment breaks when the user adjusts their text size and it stays broken when the size is reset to default (in Firefox 3.0.4, at least) so I'd say that the sensitive artists who need this kind of thing should probably stick with images of text (with lengthy alt attributes) for now.
posted by finite at 10:25 PM on December 11, 2008

Dunno. I think this is pretty cool if it really really works.

Seems source horrors would be mitigated if you choose the javascript options, which will produce the markup madness for you under the hood.

But yeah. Images with alt text seem like a decent idea.
posted by weston at 11:42 PM on December 11, 2008

How lovely, the CSS/XHTML methods result in awful source code and the JavaScript method doesn't display any text at all if you have JavaScript turned off (or at least that's what happens on their examples page with it turned off).

Here's my plan:

I'm going to use this technique to create round headings, then I'll get a 3-D animation of a hand made in Flash, use sIFR to replace the headings with the flash and then have it slap anyone trying to read the page.

That's a win, yeah?
posted by mandal at 1:15 AM on December 12, 2008 [4 favorites]

This is the animated gif of CSS.
posted by bwg at 3:35 AM on December 12, 2008

css today reminds me of the time I first saw quark. table based layouts.

I'm so glad someone has finally figured out a way to put a bunch of excessive, presentational code into my xhtml!
posted by medium format at 8:03 AM on December 12, 2008 [1 favorite]

What's wrong with rectangles. I *like* rectangles.
posted by device55 at 9:09 AM on December 12, 2008 [2 favorites]