[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:

  ‘::top’
    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.

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

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

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

  ‘::start’
    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.

  ‘::end’
    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