Re: flowing around both sides of a float

On Jan 5, 2008, at 10:45 PM, James Elmore wrote:

> On Jan 5, 2008, at 8:56 PM, Brad Kemper wrote:
>>
>>> It rises many questions as you may see. Some of them:
>>>
>>> 1) what exactly is text-align: right or center for text flowing  
>>> around such elements?
>>> 2) how rtl is handled in such contexts?
>>> 3) Centered paragraph (last one on the screen shot above), how  
>>> you would expect
>>>   float:free element to be positioned? In other words: how  
>>> float:free elements interact with
>>>   float:left/right ones?
>>
>> The one with text-align:left on the field text looks good. But on  
>> the other two, I think the text should snug up to the float  
>> better. For instance, when the field text is text-align:right, you  
>> should fit as much text as will fit in each line to the right of  
>> the float before adding it to the left. It looks like at least the  
>> "1 2" in the first line of that one should move to the right, for  
>> instance. maybe that's the hard part? To figure out how much of  
>> the text needs to be to the right before you figure out what  
>> remainder should be on the left (in LTR writing)?
>
> I haven't looked at Andrew's examples recently. (Sorry Andrew) But  
> I did look at them the last time he posted them. I wondered how we  
> would specify text-align for each side of the 'floated' element?

I wouldn't. That would get really complex depending on how many  
elements the float touched. The text-align is a feature of the  
separate block of text "underneath" the free floated element. It is  
that element that should deal with what it means to have some  
something pushing away words from somewhere in its middle. It should  
do so in a way that looks most natural, IMO.

> In the most complex case -- floated center -- does 'text-align:  
> left;' apply only to the beginning of the line, or does it apply to  
> the beginning of the line as well as after the floated element?

Look at it this way (using LTR writing in these examples): The line  
starts flush left on the left. It comes to a point where the next  
word won't fit, because of the float. So it draws it in the next  
place available to its right, which is immediately after the float's  
right margin. It then continues until it can't fit any more on that  
line, so it continues the text on the next line and the flowing  
process repeats for that line and the lines after it that are  
affected by the float.

So, for text-align:right, it looks most natural if the same sort of  
thing happens, but in reverse (sort of). For normal, unbroken lines  
that are right justified (no float involved), the UA has to figure  
out how much can fit on the line, and then start it drawing the first  
letter of the line in the horizontal location that would cause the  
line to align on the right. So for a right-aligned line of text  
broken by a float like Andrew's, the UA should figure out  much can  
fit on the line to the right of the float, then start it in the  
horizontal location that would cause it to align on the right. Then  
do the same thing for the left of the float. Then rinse and repeat  
for the lines under that.

In other words, the UA should do for each half line what it normally  
does for full lines, like it did in the sample, but starting on the  
side that has the flush edge.

> And does 'text-align: justified;' make straight edges only at the  
> ends of the line or does it make the borders next to the center- 
> floated element straight as well?

I would say each half of the line should be justified. You can see  
something similar, in print publications, when you have columns that  
have a pull quote centered on the gutter, that pokes into the columns  
on each side. Even though the lines next to the pull quote (or  
illustration) are shorter than the others, they remain justified with  
themselves as long as the pull quote (or illustration) is  
rectangular. And even if it is an illustration with a curved or  
uneven edge, justified text follows the shape much more closely that  
text that is not, as its letter spacing increases to stretch the line  
to the full width available for that line (same as any other  
justified text anywhere).

So with this logic:
-- each line of text-align:left text ends up with its two halves  
flush left within the horizontal spaces available
-- each line of text-align:right text ends up with its two halves  
flush right within the horizontal spaces available
-- each line of text-align:ljustify ends up with its two halves fully  
justified to the available spaces. 
(... for text-align:left and text-align:right, that is what Andrew  
shows, but it looks like he fit the left side first, even on the  
right justified text, and that looks odd when you see how the numbers  
are split in the first line)

So for all of the above, the text aligns in pretty much the same way  
it would if it was in two columns (but with no gutters above and  
below the float), and seems to me looks best that way (most natural).

Centered text is characterized by having ragged edges on the left and  
right, and no flush sides. But if you drew an imaginary line down the  
middle to split it into right and left halves, you would have one  
half that was flush right/ragged left, and the other half would be  
flush left/ragged right. So that's the effect that would look most  
natural for lines of centered text that needed to be divided  
vertically to make room for a float, especially to make the lines  
look like they are part of the same text that might start above the  
float and continue below it. Since you are splitting between words  
(not bisecting letters, as with the imaginary line), you won't get  
two exact halves. But at least with the alignment I suggested you  
would simulate that effect.

Centered text is probably the hardest to make look right, as some  
long words on one side or the other of the center mark could cause  
the text to look somewhat less than centered. For instance, putting a  
float in the middle of a centered line of text such as "My  
supercalifragilistic cat" will not end up looking centered any more  
(unless we allow hyphenation). But I don't imagine there would really  
be that many layouts with really narrow blocks of centered text split  
by a float (and those that are would most likely be by bad designers  
that wouldn't care anyway).

> I expect the implementation of this feature will be easier than  
> getting agreement on exactly what options are needed and what each  
> of these options mean.
>
>>
>> For the third example, with center aligned field text, I would  
>> expect the text to the left of the free float to be flush right  
>> against the margin of the float, and the text to the right of the  
>> free float to be flush left against the floats other margin. That  
>> way, all the field text would look like it is part of the same  
>> paragraph, with the ragged edges only where they needed to be for  
>> you to perceive the whole block as centered text.
>>
>> The float left seems logical the way it is working there. Not that  
>> it is a pretty design, but it seems to do what I would expect it  
>> to do.
>
>
> James Elmore
>

Received on Sunday, 6 January 2008 08:21:10 UTC