[css3-content][css3-page] ::top, ::right, ::bottom, ::left

I suggest to consider six new pseudo elements for the Generated Content module, although I’m not entirely sure they would be all that useful:

    Generates a box at the visual top of the anchor box 
    which is generated for ‘x’ with “x::top”.
    The type (and thereby exact placement) of the box 
    depends on the ‘box-sizing’ property.
    Normal margin collapsing applies if applicable.
    Its initial ‘width’ is inherited from the anchor box, 
    all other properties have default initial values.

    Like ‘::top’, but at the visual right and it inherits only
    the ‘height’ from the anchor box.

    Like ‘::top’, but at the visual bottom.

    Like ‘::right’, but at the visual left.

    A relative alias for the four absolute pseudo elements above. 
    It depends on block progression for block boxes, 
              (on line progression for line boxes) and 
               on glyph progression for inline boxes.

    Like ‘::start’, but at the opposite side.

Later levels may also define

  ‘::top-right’    or ‘::top-corner’
  ‘::right-bottom’ or ‘::right-corner’
  ‘::bottom-left’  or ‘::bottom-corner’
  ‘::left-top’     or ‘::left-corner’

to address the corner areas, and unions 

  ‘::top-side’ or
  ‘::left-top-right’      := ::left-top, ::top, ::top-right
  ‘::right-side’ or
  ‘::top-right-bottom’    := ::top-right, ::right, ::right-bottom
  ‘::bottom-side’ or
  ‘::right-bottom-left’   := ::right-bottom, ::bottom, ::bottom-left
  ‘::left-side’ or
  ‘::bottom-left-top’     := ::bottom-left, ::left, ::left-top

as well as less useful

  ‘::top-top-right’       := ::top, ::top-right
  ‘::top-right-right’     := ::top-right, ::right
  ‘::right-right-bottom’  := ::right, ::right-bottom
  ‘::right-bottom-bottom’ := ::right-bottom, ::bottom
  ‘::bottom-bottom-left’  := ::bottom, ::bottom-left
  ‘::bottom-left-left’    := ::bottom-left, ::left
  ‘::left-left-top’       := ::left, ::left-top
  ‘::left-top-top’        := ::left-top, ::top

to incorporate them, or, when non-rectangular boxes are supported,

  ‘::top-right-side’    := ::top, ::top-right, ::right
  ‘::right-bottom-side’ := ::right, ::right-bottom, ::bottom
  ‘::bottom-left-side’  := ::bottom, ::bottom-left, ::left
  ‘::left-top-side’     := ::left, ::left-top, ::top

  ‘::non-top-side’      := ::right, ::bottom-side, ::left
  ‘::non-right-side’    := ::bottom, ::left-side, ::top
  ‘::non-bottom-side’   := ::left, ::top-side, ::right
  ‘::non-left-side’     := ::top, ::right-side, ::bottom

  ‘::non-top’           := ::right-side, ::bottom, ::left-side
  ‘::non-right’         := ::bottom-side, ::left, ::top-side
  ‘::non-bottom’        := ::left-side, ::top, ::right-side
  ‘::non-left’          := ::top-side, ::right, ::bottom-side

  ‘::sides’             := ::top, :non-top

(I left out combinations with ‘start’ and ‘end’ for sanity’s sake.)

This could (and probably should) be unified with page margin boxes from the Paged Media module <http://dev.w3.org/csswg/css3-page/#margin-boxes> which uses conflicting nomenclature and splits the (small) side boxes into three parts:

  @page {
    size: 8.5in 11in; margin: 10%;
    @top-left  {content: "Hamlet";}
    @top-right {content: "Page " counter(page);}

would become something akin 

  @page {size: 8.5in 11in; margin: 10%;}
  @page::top::left  {content: "Hamlet";}
  @page::top::right {content: "Page " counter(page);}

Received on Saturday, 6 August 2011 16:51:04 UTC