Page Floats

about

This page is a demonstrator of some new properties and values recently proposed in the W3C working draft CSS Page Floats. Several extensions proposal from pagedmedia.org have been added.

For more explanations about page floats, see the article published by Julie Blanc on pagedmedia.org : https://www.pagedmedia.org/page-floats/

Licence: MIT (c) Adam Hyde
Developpement: Julie Blanc
To contributing: https://gitlab.pagedmedia.org/JulieBlanc/demo-page-floats (please, contribute and correct if you see an error)

Float reference values float-reference: page | column | inline

Float values float: none | [<float-x> || <float-y>] | [<float-a> || <float-b>]

  • <float-y>

  • <float-x>

  • <float-a>

  • <float-b>

elements {

float-reference: page;

float: none

}

elements {

float-reference: page;

float: left

}

elements {

float-reference: page;

float: right

}

elements {

float-reference: page;

float: inside

}

elements {

float-reference: page;

float: outside

}

elements {

float-reference: page;

float: top

}

elements {

float-reference: page;

float: bottom

}

elements {

float-reference: page;

float: top left

}

elements {

float-reference: page;

float: top right

}

elements {

float-reference: page;

float: bottom left

}

elements {

float-reference: page;

float: bottom right

}

elements {

float-reference: page;

float: top inside

}

elements {

float-reference: page;

float: top outside

}

elements {

float-reference: page;

float: bottom inside

}

elements {

float-reference: page;

float: bottom outside

}

elements {

float-reference: page;

float: inline-start

}

elements {

float-reference: page;

float: inline-end

}

elements {

float-reference: page;

float: block-start

}

elements {

float-reference: page;

float: block-end

}

elements {

float-reference: page;

float: block-start inline-start

}

elements {

float-reference: page;

float: block-start inline-end

}

elements {

float-reference: page;

float: block-end inline-start

}

elements {

float-reference: page;

float: block-end inline-end

}

elements {

float-reference: page;

float: inline-start

}

elements {

float-reference: page;

float: inline-start inline-start

}

elements {

float-reference: page;

float: inline-start inline-end

}

elements {

float-reference: page;

float: inline-end

}

elements {

float-reference: page;

float: inline-end inline-start

}

elements {

float-reference: page;

float: inline-end inline-end

}

elements {

float-reference: page;

float: snap-block

}

elements {

float-reference: page;

float: snap-block inline-start

}

elements {

float-reference: page;

float: snap-block inline-end

}

elements {

float-reference: page;

float: snap-inline

}

elements {

float-reference: page;

float: snap-inline inline-start

}

elements {

float-reference: page;

float: snap-inline inline-end

}

elements {

float-reference: column;

float: none

}

elements {

float-reference: column;

float: left

}

elements {

float-reference: column;

float: right

}

elements {

float-reference: column;

float: inside

}

elements {

float-reference: column;

float: outside

}

elements {

float-reference: column;

float: top

}

elements {

float-reference: column;

float: bottom

}

elements {

float-reference: column;

float: top left

}

elements {

float-reference: column;

float: top right

}

elements {

float-reference: column;

float: bottom left

}

elements {

float-reference: column;

float: bottom right

}

elements {

float-reference: column;

float: top inside

}

elements {

float-reference: column;

float: top outside

}

elements {

float-reference: column;

float: bottom inside

}

elements {

float-reference: column;

float: bottom outside

}

elements {

float-reference: column;

float: inline-start

}

elements {

float-reference: column;

float: inline-end

}

elements {

float-reference: column;

float: block-start

}

elements {

float-reference: column;

float: block-end

}

elements {

float-reference: column;

float: block-start inline-start

}

elements {

float-reference: column;

float: block-start inline-end

}

elements {

float-reference: column;

float: block-end inline-start

}

elements {

float-reference: column;

float: block-end inline-end

}

elements {

float-reference: column;

float: inline-start

}

elements {

float-reference: column;

float: inline-start inline-start

}

elements {

float-reference: column;

float: inline-start inline-end

}

elements {

float-reference: column;

float: inline-end

}

elements {

float-reference: column;

float: inline-end inline-start

}

elements {

float-reference: column;

float: inline-end inline-end

}

elements {

float-reference: column;

float: snap-block

}

elements {

float-reference: column;

float: snap-block inline-start

}

elements {

float-reference: column;

float: snap-block inline-end

}

elements {

float-reference: column;

float: snap-inline

}

elements {

float-reference: column;

float: snap-inline inline-start

}

elements {

float-reference: column;

float: snap-inline inline-end

}

English like
writing-mode: horizontal-tb

Japanese like
writing-mode: vertical-rl