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:

• AH = AntennaHouse 6.1.6.12100
• PR = Prince 9.0
• OP = Opera with Presto rendering engine
• OW = Opera with Webkit rendering engine

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.

	Figures	AntennaHouse	Prince	Opera Presto	Opera Webkit
Traditional floats
floating to the left/right
float left in column	float: left	float: left	float: left	float: left	float: left
float right in column	float: right	float: right	float: right	float: right	float: right
Page floats
floating to the top/bottom
float to top of column	float: top	float: top column OR, in longhand: float-y: top; float-reference: column	float: top-column	float: top	float: top
float to bottom of column	float: bottom	float: bottom column	float: bottom-column	float: bottom	float: bottom
Floating to nearest edge: snap()
snap elements to top/bottom when they naturally appear close	float: snap		float: prince-snap (?)		float: snap
float elements that otherwise would cause a column break	float: snap(0)	float: left auto-next	float: top unless-fit		float: snap(0)
float elements that otherwise would cause a column break to bottom	float: snap(0, bottom)	?
float elements that appear within 3em from a column break	float: snap(3em)
Setting the page float reference
float to bottom of page	float: bottom; float-reference: page	float-reference: page; float-y: bottom	float: 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 column	float: top; float-defer-column: last			float: top-corner	float: top-corner
float to top of next-to-last column	float: top; float-defer-column: -1
float to top of first column on next page	float: top; float-defer-page: next			float: top-next-page	float: top-next-page
float to top of last column on next page	float: top; float-defer-page: next; float-defer-column: last			float: top-corner-next-page	float: top-corner-next-page
float to the bottom of the next column	float: bottom; float-defer-column: 1	float-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 column	clear: top				clear: top
ensure that element is the only page float at bottom of column	clear: bottom				clear: bottom
ensure that element is the only page float in column	clear: column				clear: column
ensure that element is the only page float on page	clear: page
ensure that element is the only page float on spread	clear: spread
Spanning columns
float to top, span two columns	float: top; column-span: 2
float bottom, span all columns	float: bottom; column-span: all
float top right corner, span two columns	float: top; float-defer-column: last; column-span: 2
Two-dimensional floats
float element 3cm into the inside margin area, vertically aligned with reference point	float: inside; float-offset: -3cm	float: inside; float-offset-x: 6cm; longhand float-x: inside; float-offset-x: 6cm; float-y: normal
Floating inside and outside pages
float inside	float: inside	float: inside	float: inside
float outside	float: outside	float: outside	float: outside

Documentation on the various implementations are here:

• AH Float description page
• PR float description
• OP float description

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