Re: Floated pseudo-elements

Hakon:

>I very much agree with you here. The pseudo-elements in CSS1 are base
>on a very general mechanism: their behavior is defined through the
>common CSS1 properties. (The drawback of this approach is that it's
>hard to align the baseline of a dropcap initial character with the
>baseline of the surrounding text.)

A truly general mechanism would not have "certain restrictions" on a
per-element basis. Instead of excluding float from :first-line properties,
why not explain how to render it?

As for the alignment problem, a hypothesis: Vertical-align is applicable to
all textual elements, even floated :first-letter. (This idea might help to
describe alignment of table cells, also.)

A floated textual pseudo-element has an implicit height defined by the
line-height. (Note that "When [line-height] is set on an inline element, it
specifies the exact line height for the element's inline box."[1])
Therefore, when a :first-letter is floated left and no other formatting is
applied, there is no change in the position of the character -- it remains
baseline-aligned within a one-character anonymous inline box.

I suggest that increasing the font-size of the floated textual element does
not change the size of its containing box and that the vertical-alignment
remains relative to the anonymous inline box derived from the parent.

I also suggest that increasing the height of the floated element will allow
additional anonymous inline boxes to exist, and that an oversized character
will 'snap' to the baseline that best fits the character inside its
container.

Examples:

    The :first-letter of this paragraph
    is floated. There is no change in
    appearance.
    _____
      |
      |  he :first-letter is floated
    and the :first-letter font-size
    is increased. The letter remains
    baseline-aligned with the first
    line of the parent.

    _____
      |  he :first-letter is floated,
      |  the :first-letter font-size
    is increased, and the :first-letter
    height is doubled. The character
    'snaps' to the second baseline.

The same principle could apply to multiple lines of text. For example, given
an explicit height greater than the number of lines required to fit some
text, and a vertical-align of 'bottom', the lines of text will 'snap' to
bottom-alignment with the bottommost anonymous inline box that fits within
the element.

This behavior could elimate the need to define explicit interrelations
between horizontally-adjacent table cells. Cells could be defined as floated
pseudo-elements of rows, with explicit widths. The cell pseudo-elements
overlap column pseudo-elements of tables, with properties from column, row,
and cell hierarchically-applied.

David Perrell

[1] http://www.w3.org/TR/WD-CSS2/flowobj2.html#line-height

Received on Thursday, 18 December 1997 13:15:47 UTC