Rotations and non-rectangular floats
Aaron Gustafson asked last week in an article called “Wouldn't it be nice?” for rotation of text over arbitrary angles and for wrapping text around non-rectangular floating images.
Diagonal column headings save space and make the table easier to read.
I remember discussing diagonal text when the CSS WG first added support for tables. It often makes tables with many column easier to read when the column headers are vertical or diagonal.
At the time, we didn't expect rotated text to be possible in many browsers soon. We also thought that at some point vertical text would be added, because of languages such as Japanese, and we were happy to leave angles other than 90° to SVG. (We are also going to have 90° rotations of images.)
Although it was (and is) not yet clear how to put a diagonal heading on an HTML table with the help of SVG, from the point of view of modularity and because of the extra possibilities that SVG promises, we decided to focus CSS on typography and leave graphic design for later, possibly to SVG. (It is difficult to draw the line, but there are clearly things that are better done with one than with the other.)
Reasons of usability may still make it desirable to add some cases to CSS, but rotation is not a simple thing to add. The easiest may be to rotate an element after layout and not care about overlapping other elements (the same way relative positioning doesn't affect other elements). It is not clear if that is enough to put diagonal headings on tables, though.
We will probably add a proposal for rotated blocks to the Box Module, but we'll have to see how much chance it is has of being implemented.
An example of text wrapping around a non-rectangular floating image.
Polygonal margins (instead of rectangular ones) around floating elements is also something that was first discussed long ago. Traces of that discussion can still be found in drafts of CSS level 1.
One idea was to describe the shape of the float in CSS (as in Aaron's proposal). That is a powerful way to describe a shape, but it is not so easy for the designer. Finding the error if the shape doesn't work as expected can be tedious. And every image needs its own rule in the style sheet.
In most cases, the shape is the shape of the image and a more direct and visual way is thus to put the image on a transparent background and let the CSS renderer determine the shape by itself. A single rule
img {float: left contour}
is then enough to wrap text tightly around all images, no matter what their shape.
A famous hack to create the illusion of non-rectangular floats is Ragged Float (and its variants, Curvelicious and Slantastic), due to Eric Meyer.
Non-rectangular floats are simple enough for the writer of a CSS style sheet, especially with the 'contour' keyword, but implementing them is a bit more difficult. With rectangular floats, determining where to break a line is a matter of looking at the width of words. But adding or removing a word from a line may change the line's height and when floats are not rectangular, a tall line may not fit where a lower line would. And imagine putting one floating image next to another… (Not that that is a common thing to do, but a browser still has to be able to handle it.)
There are some questions about how margins are added to irregularly shaped floats, but I think 'contour' is still relatively easy to add, and I would support any lobbying to get it implemented.
Pingbacks/trackbacks
- “ThePickards » Blog Archive » Call for a WCAG Blog” – (21 July 2007)
