RE: [css-inline] Floats and Initial Letters

Comment at bottom below

Steve Z



> -----Original Message-----

> From: Liam R E Quin [mailto:liam@w3.org]

> Sent: Thursday, December 11, 2014 6:53 PM

> To: fantasai

> Cc: www-style@w3.org

> Subject: Re: [css-inline] Floats and Initial Letters

>

> On Thu, 11 Dec 2014 12:33:35 -0800

> fantasai <fantasai.lists@inkedblade.net<mailto:fantasai.lists@inkedblade.net>> wrote:

>

> > On 12/10/2014 07:04 PM, Liam R E Quin wrote:

> > > On Wed, 10 Dec 2014 18:08:37 -0800 fantasai

> <fantasai.lists@inkedblade.net<mailto:fantasai.lists@inkedblade.net>> wrote:

> > >

> > >> Dave Cramer and I just finished all the outstanding edits on initial letters.

> > > \o/

> > >

> > >> We thought it makes the most sense for floats to automatically

> > >> clear the initial letter, rather than the alternative options we thought of

> > >>     * being between the initial letter and the rest of the text

> > > No, that's no good

> > >

> > >>     * being somehow pushed through the initial letter to the containing

> block

> > >>       edge (and thereby shift the initial letter further into the containing

> > >>       block).

> > >

> > > I think this may be right.

> > >

> > > Consider e.g. an image of an open double quote floated left,

> > >

> > > [ “ ] A F T E R  the fire came a still

> > >       A A     and soft voyce.  And when

> > >      A _ A    Eliiah heard it, he couer-

> > >      A   A    ed his face with his mant-

> > >      el and went out, and stoode in the

> > >      entring of þe caue: and behold,...

> > >

> > >> We're not 100% sure if this is the right behavior for floats that

> > >> happen to be on the first line, however, since in that case the

> > >> second behavior is less of a problem. (It makes more sense and

> > >> doesn't create loops.)

> > >

> > > A float in the middle, e.g. with markup just after "voyce" in my

> > > example, I think could either come after the initial letter, yes, or

> > > between that letter and the text, making the effective text line

> > > length smaller (in this example it'd displace "Eliiah"). But if the

> > > float was more than one line high it would then cause a gap under

> > > the initial, so it would be better to move it down. Hmm, I'm not

> > > going to draw these with ASCII art :-)

> > >

> > > Would it make more sense to give the author control of this by considering

> the initial to be an obstruction in the sense of the "clear" property?

> >

> > What you want here is for the float after voyce to shift bot to the

> > left of the letter *and up* to the top of the containing block. It

> > will not do this, because 'float: left | right' does not move  a float

> > up.

>

> No (although that owuld be better), I wasn't clear enough, tried to include two

> examples in one diagram, sorry. Not up to the left corner (the double quote in

> my example would have to be before the initial in the input).

>

> A floated box would have to go below the initial, or at the next available space,

> i.e. behave as if the initial was itself a floated image or whatever, and end up

> between the intial and the text; but then clear: left; would (in my proposal)

> make it go below the initial.

[SZ] Let me try a different view of what should happen. Instead of considering the float consider the Initial Letter. Since the Initial Letter (a drop cap) covers more than one line (for the case to be interesting), then perhaps, for the purpose of positioning floats, we should consider all the lines covered by the Initial Letter to be (effectively) the first line. In particular, all these lines will be pushed right by an intrusion that pushes the Initial Letter right whether it is a float or shape or something else. So, any float that was in any of the lines covered by the Initial Letter would be position as if it were in the first physical line; namely,  no higher (but, could be as high) as the first (covered) line.



Suppose that the text is

<div><span style="first-letter:3>V</span>asoline is a slippery substance that can become very gooey over time<span style="float:left"><img href="some_image.png"></float> and make a real mess of things, do not you think so?</div>



Then this might format as:

****** V   Vasoline is a slippery substance

*Some*  V V that can become gooey over time

*Image   V  and make a real mess of things,

****** do not you think so?



The advantage of this approach is that an image with a negative right margin equal to its width can be used to give a background to the Initial Letter. That is, my example above would become:

V***Vasoline is a slippery substance

*VoVethat can become gooey over time

*IVagand make a real mess of things,

do not you think so?



This is example is not particularly useful, but with a real (background) image the effect could be quite pleasant.



Steve Z