WebCore Rendering V – Floats

WebCore Rendering V – Floats

Posted by Dave Hyatt on Wednesday, August 15th, 2007 at 4:33 pm

A float is a renderer that is designed to shift all the way to the left side or all the way to the right side of a paragraph. The lines of the paragraph then flow around the floating object avoiding it. You can see an example of a float in this very paragraph. There is a purple box in the upper right hand corner. Note how all of the text in this paragraph is avoiding the float.

Here is how the purple float above was declared:

<div style="float:right; width:50px; height:50px; background-color:purple; margin-left: 5px"></div>

There are also HTML constructs that imply CSS floating behavior. For example, the align attribute on the img element can be used to float an image.

<img align=left src="...">

A float can span multiple paragraphs. In this example, even though the float was declared inside this paragraph, it is tall enough that it will protrude out of this paragraph and into the next one.

Because floats can effectively intersect multiple blocks, WebCore uses a floating objects list on block flows to track all of the floating renderers that intrude into the bounds of that block. A single float can therefore be in the floating objects lists of multiple block flows. Line layout has to be aware of the positions of floats so that it can make sure to shrink lines as necessary to avoid these floats. By having all of the relevant floats for a given block immediately accessible in this floating objects list, it becomes easy for that block to know where the floats are that it needs to avoid.

A floating objects list contains the following data structure:

    struct FloatingObject {        enum Type {            FloatLeft,            FloatRight        };        FloatingObject(Type type)            : node(0)            , startY(0)            , endY(0)            , left(0)            , width(0)            , m_type(type)            , noPaint(false)        {        }        Type type() { return static_cast<type>(m_type); }        RenderObject* node;        int startY;        int endY;        int left;        int width;        unsigned m_type : 1; // Type (left or right aligned)        bool noPaint : 1;    };

As you can see, this structure effectively contains a rectangle (a top, bottom, left and width). The reason each list entry has its own position and size that is independent of the floating object’s position and size is that these coordinates are in the space of the block that owns the floating objects list. This way each block can easily query for the float’s position in its own coordinate space without having to do a bunch of conversions.

In addition the margins of the float are included in the list entry rectangles, since lines don’t just avoid the border box of the float. They avoid the margin box of the float. This is important so that floats can be padded with extra space to avoid having lines run right up to their edges.

The following methods operate on the floating objects list:

void insertFloatingObject(RenderObject*);void removeFloatingObject(RenderObject*);void clearFloats();void positionNewFloats();

The first two functions are pretty self-explanatory. They are used to add and remove specific floats from a block’s floating objects list. clearFloats will delete all of the objects in a block’s floating objects list.

When an object gets inserted into the list it is unpositioned initially. Its vertical position is set to-1. The positionNewFloats method is called by layout to place all of the floats. CSS has a bunch of rules for where floats are allowed to go. It is this method that ensures that all of those rules are obeyed.

There are many more helper methods for working with floats. I will cover these when I talk about block and line layout in more detail in future articles.

Clearance

CSS provides a way for objects to specify that they should be below either all left floats, all right floats, or all floats. The clear property specifies this behavior and has values ofnone, left, right or both.

This paragraph is below the blue float from the previous paragraph because it specified  clear: left. Clearance is computed and applied during block and line layout. The clear property can also be applied to floats to make sure that a float ends up below all previous floats (again, either left, right or both types of floats).