CSS Figures implementation coverage

Work in progess, last updated 2014-07-02

This page documents documents how the functionality described in CSS Figures is implemented. Tested implementations are:

The table below lists many use cases for page floats and how they can be achieved using CSS Figures as well as existing implementation. The table is not complete, but gives an overview of the various syntaxes.
FiguresAntennaHousePrinceOpera PrestoOpera Webkit

Traditional floats

floating to the left/right
float left in columnfloat: leftfloat: leftfloat: leftfloat: leftfloat: left
float right in columnfloat: rightfloat: rightfloat: rightfloat: rightfloat: right

Page floats

floating to the top/bottom
float to top of columnfloat: topfloat: top column
OR, in longhand:
float-y: top;
float-reference: column
float: top-columnfloat: topfloat: top
float to bottom of columnfloat: bottomfloat: bottom columnfloat: bottom-columnfloat: bottomfloat: bottom
Floating to nearest edge: snap()
snap elements to top/bottom when they naturally appear closefloat: snapfloat: prince-snap (?)float: snap
float elements that otherwise would cause a column breakfloat: snap(0)float: left auto-nextfloat: top unless-fitfloat: snap(0)
float elements that otherwise would cause a column break to bottomfloat: snap(0, bottom)?
float elements that appear within 3em from a column breakfloat: snap(3em)
Setting the page float reference
float to bottom of pagefloat: bottom; float-reference: pagefloat-reference: page; float-y: bottomfloat: bottom
Deferring Page floats
float to top of next column float: top; float-defer-column: 1 float: top next column
Or, in longhand:
float-move: next;
float-reference: column;
float-y: top
float: next column-top
float to top of last columnfloat: top; float-defer-column: lastfloat: top-cornerfloat: top-corner
float to top of next-to-last columnfloat: top; float-defer-column: -1
float to top of first column on next pagefloat: top; float-defer-page: nextfloat: top-next-pagefloat: top-next-page
float to top of last column on next pagefloat: top; float-defer-page: next; float-defer-column: lastfloat: top-corner-next-pagefloat: top-corner-next-page
float to the bottom of the next columnfloat: bottom; float-defer-column: 1float-move: next; float-reference: column; float-y: bottom
OR, in shorthand:
float: bottom next column
float: next column-bottom
Clearing page floats
ensure that element is the only page float at top of columnclear: topclear: top
ensure that element is the only page float at bottom of columnclear: bottomclear: bottom
ensure that element is the only page float in columnclear: columnclear: column
ensure that element is the only page float on pageclear: page
ensure that element is the only page float on spreadclear: spread

Spanning columns

float to top, span two columnsfloat: top; column-span: 2
float bottom, span all columnsfloat: bottom; column-span: all
float top right corner, span two columnsfloat: top; float-defer-column: last; column-span: 2

Two-dimensional floats

float element 3cm into the inside margin area, vertically aligned with reference pointfloat: inside; float-offset: -3cmfloat: inside; float-offset-x: 6cm;
longhand
float-x: inside; float-offset-x: 6cm; float-y: normal

Floating inside and outside pages

float insidefloat: insidefloat: insidefloat: inside
float outsidefloat: outsidefloat: outsidefloat: outside

Documentation on the various implementations are here:

Another example that documents interoperability is this document, which has been formatted by AntennaHouse (AH) and Prince (PR), as discussed here.