CSS WG Blog Rotations and non-rectangular floats

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.

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.

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.

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.

« Previous article Next article »