CSS WG Blog Rotations and non-rectangular floats

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

Rotations and non-rectangular floats

By Bert Bos July 3, 2007 (Permalink)
Categories: general

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.

[image of a table with diagonal column headers]

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

[Image of a
flower with text wrapping around the right side]

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,
), 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.

« Previous article Next article »

[Photo: group photo of the CSS working group in Lyon, France] Contact: Bert Bos
Copyright © 2017 W3C®

Last updated 2007-07-03 23:19:47