Re: Float as applied to textual elements

Douglas Rand wrote:

> I'm suprised that the float property applies to any textual element. 
> would have expected it to be limited to block elements and replaced
> elements.  Would someone explain how this is supposed to work with
> elements?

I'll give it a shot.

The floated text becomes a block element, subject to the same rules as
any text block. You can then independently size the text and position
it using margins and line-height. The float would typically be applied
to the beginning text of a paragraph. For example:

P      { font: 12pt;
         line-height: 100%;
         margin-left: 12pt;
         text-indent: -4pt }

SPAN   { float: left;
         margin-left: -12pt;
         margin-right: 4pt;
         line-height: 100%;
         font-size: 400% }


<P><SPAN>H</HELP>elp, there isn't<BR>
enough control over<BR>
the vertical positioning<BR>
of an initial floated text<BR>


should look something like this:

  |  |elp, there isn't
  |--| enough control over
  |  | the vertical positioning
       of an initial floated text

There's a negative left margin on the float, which draws it into the
left margin of the parent. There's a positive right margin on the
float, which gives space between the letter and the parent text.
There's a negative indent on the parent text, which causes the first
line of the parent (less the floated letter) to move left into the
margin of the floated letter.

It is my impression from the spec that the height of the floated text
block should equal the line-height plus any margins. A negative top
margin on the float should draw it upward. A negative bottom margin
should allow more of the parent's lines to flow to the left under the

Note that line-height is inherited as a fixed value except when
specified as a number. If the line-height of the parent is a fixed
value and the font-size of the float is increased but the line-height
is not explicitly changed, the text box will remain the same height as
the parent's first line and the text of the parent will overlap after
the first line. Since leading is split between the top and bottom of a
line of text, I assume that larger text in the float would then extend
both above and below the first line of text in the parent.

See <> for my take on how margins on
floats should work. If the above explanation is correct I'll try to
find time to illustrate floated text as well.

David Perrell

Received on Tuesday, 20 May 1997 22:14:17 UTC