12 ms·

This is cool, but reading text with oddly-shaped images inside of it is pretty annoying. I hope CSS shapes aren't going to be used excessively.

thathonkey 12y ago
Yeah, I agree it would be annoying for long-form content (which is why magazines/newspapers never really adopted layouts like that in earnest) even if only because we've learned to read and therefore favor rectangular blocks of text. It's still a neat effect for creating little asides, blurbs, etc. though
jdjb 12y ago
Not to mention this is exactly the sort of "pixel perfect" design that we should be discouraging, not encouraging. It doesn't seem like this technique translates well to a flexible design philosophy by letting the browser choose the best way to reflow text around elements (based on the amount of available screen real estate).
- untog 12y ago
  I don't think that's true. Looking at the video it seems like an ideal mix of both worlds - non-standard shaped images will be floated with CSS, and text will reflow and rewrap according to available size. Sounds pretty flexible to me.
- lowboy 12y ago
  But that's exactly what this is doing: defining a better bounding area for an element so that the browser can flow text around it according to the available screen real estate. Defining the length of each line of text is a backward-facing solution and should be discouraged.
drunken_thor 12y ago
That form of content has been used for ages in magazines. There is no reason why it can't work for the same type of content on the web.
- tripzilch 12y ago
  Except for the most obvious difference between web and print, which is that you can design print layout for one particular rendering medium/resolution/size. It's the same reason why we don't use absolute positioning in pixels to do all our CSS layout. Custom shapes can be very finicky in when they break or don't break certain lines. Designing such a breaking-shape for a print magazine depends not only on the shape of the image, but is tweaked considerably depending on whether it breaks on a particular word on a particular line, and how this looks in the context of the page, spacing, readability, etc. Sometimes you can see this went wrong when a text has been edited without adjusting the shape. On the web with different mediums, resolutions, fonts and rendering, you can pretty much expect this to turn out wrong a significant part of the time.

thathonkey 12y ago

Yeah, I agree it would be annoying for long-form content (which is why magazines/newspapers never really adopted layouts like that in earnest) even if only because we've learned to read and therefore favor rectangular blocks of text. It's still a neat effect for creating little asides, blurbs, etc. though

jdjb 12y ago

Not to mention this is exactly the sort of "pixel perfect" design that we should be discouraging, not encouraging. It doesn't seem like this technique translates well to a flexible design philosophy by letting the browser choose the best way to reflow text around elements (based on the amount of available screen real estate).

untog 12y ago
I don't think that's true. Looking at the video it seems like an ideal mix of both worlds - non-standard shaped images will be floated with CSS, and text will reflow and rewrap according to available size. Sounds pretty flexible to me.
lowboy 12y ago
But that's exactly what this is doing: defining a better bounding area for an element so that the browser can flow text around it according to the available screen real estate. Defining the length of each line of text is a backward-facing solution and should be discouraged.

drunken_thor 12y ago

That form of content has been used for ages in magazines. There is no reason why it can't work for the same type of content on the web.

tripzilch 12y ago
Except for the most obvious difference between web and print, which is that you can design print layout for one particular rendering medium/resolution/size. It's the same reason why we don't use absolute positioning in pixels to do all our CSS layout. Custom shapes can be very finicky in when they break or don't break certain lines. Designing such a breaking-shape for a print magazine depends not only on the shape of the image, but is tweaked considerably depending on whether it breaks on a particular word on a particular line, and how this looks in the context of the page, spacing, readability, etc. Sometimes you can see this went wrong when a text has been edited without adjusting the shape. On the web with different mediums, resolutions, fonts and rendering, you can pretty much expect this to turn out wrong a significant part of the time.