text wrap around image: how can we do it with css?

[Zhang Weiwu]

Hello. I have been using word processor like OOO for nearly 10 years and
such layout is very usual to me:

gopher://sdf.lonestar.org/I/users/we..._correctly.png

but I found it's very difficult to achieve the same layout with HTML/css.
The best result I can achieve is like this:

gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xml

As you can see in Firefox, the list items which wraps around the image has
wrong indent. The list bullet is displayed on-top-of the image, which is
wrong.

I discovered the margin style (which should be what sets list item
indent) do not work when there is an image floated on the left side.

I knew the problem I got must be a very common problem so there must
already be solutions on the Internet, but I cannot figure out what proper
keyword to use to search for solutions, hance this post.

Thanks in advance!

[Rik]

Zhang Weiwu wrote:

Hello. I have been using word processor like OOO for nearly 10 years
and such layout is very usual to me:

gopher://sdf.lonestar.org/I/users/we..._correctly.png

but I found it's very difficult to achieve the same layout with
HTML/css. The best result I can achieve is like this:

gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xml

As you can see in Firefox, the list items which wraps around the
image has wrong indent. The list bullet is displayed on-top-of the
image, which is wrong.

I discovered the margin style (which should be what sets list item
indent) do not work when there is an image floated on the left side.

Then use padding instead of margin to indent list-items, and use
list-style-position: inside;
--
Rik Wasmus

[Ben C]

On 2007-01-20, Zhang Weiwu <zh********@rea lss.comwrote:

Hello. I have been using word processor like OOO for nearly 10 years and
such layout is very usual to me:

gopher://sdf.lonestar.org/I/users/we..._correctly.png

but I found it's very difficult to achieve the same layout with HTML/css.
The best result I can achieve is like this:

gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xml

As you can see in Firefox, the list items which wraps around the image has
wrong indent. The list bullet is displayed on-top-of the image, which is
wrong.

I discovered the margin style (which should be what sets list item
indent) do not work when there is an image floated on the left side.

It works for me in Firefox to put a left margin on <li>. In any case a
right margin on the image might be better instead, so the <li>s that fit
below it don't get an extra left indent.

But there is some question here whether what Firefox is doing is
actually correct. Each <liis a block box whose inline content is
offset to flow around the float. Should the list-item marker follow the
inline content or the <liblock box? We might expect the markers right
over on the left positioned somewhere near the left edges of the <li>
block boxes which are under the image.

Indeed that's where the CSS 2.1 spec implies they should be since it
says that the list-item-position property specifies "position with
respect to the principal [i.e. block] box". So whether the markers are
inside or outside, you'd expect them to be somewhere near the principal
box left edge, not near the left edge of the inline box inside it (which
in this case has moved right because of the float).

I knew the problem I got must be a very common problem so there must
already be solutions on the Internet, but I cannot figure out what proper
keyword to use to search for solutions, hance this post.

This is a real problem. list-style-position: inside should work as the
the poster suggested, since in that case the markers are inline boxes
and should go the right of the float. But you might not like the way
<li>s that span multiple lines come out.

[Ben C]

On 2007-01-20, Ben C <sp******@spam. eggswrote:
[snip]

Indeed that's where the CSS 2.1 spec implies they should be since it
says that the list-item-position property specifies "position with
respect to the principal [i.e. block] box". So whether the markers are
inside or outside, you'd expect them to be somewhere near the principal
box left edge, not near the left edge of the inline box inside it (which
in this case has moved right because of the float).

Sorry, that was rather misleading and I should put it right. If the
marker position is "inside", it's positioned as if it were an inline box
first thing in the <li>'s block box (aka "principal box").

The situation looks like this, where "F" is the float, and L and R are
the left and right edges of the list item's block box:

LFFFFFFFFF R

An outside marker (m) you would expect to be positioned somewhere like
this (exactly where is up to the UA):

m LFFFFFFFFFF R

off the left edge of the <li>'s block box.

i.e. not like this:

LFFFFFFFFmF R

which is roughly where Firefox seems to put it-- offset to the left of
the inline box containing the <li>'s content.

If the marker position is inside, it should reliably look like this:

LFFFFFFFFFF m R

since the marker is inline and therefore moves right of the float just
like any inline box.

[Jukka K. Korpela]

Scripsit Zhang Weiwu:

gopher://sdf.lonestar.org/I/users/we..._correctly.png

Please use http URLs. If you want to author for the WWW, use an http server.

I think it was about five years ago I last saw discussions about Gopher
still being alive. Nobody had seen a living Gopher server.

IE 7 dropped support to the gopher: protocol.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[dorayme]

In article <4F************ ****@reader1.ne ws.saunalahti.f i>,
"Jukka K. Korpela" <jk******@cs.tu t.fiwrote:

Scripsit Zhang Weiwu:

gopher://sdf.lonestar.org/I/users/we..._correctly.png

Please use http URLs. If you want to author for the WWW, use an http server.

I think it was about five years ago I last saw discussions about Gopher
still being alive. Nobody had seen a living Gopher server.

IE 7 dropped support to the gopher: protocol.

I was surprised... but delighted when my Mozilla browser dusted
itself off and fired up and opened it.

--
dorayme

[Zhang Weiwu]

于 Sat, 20 Jan 2007 15:02:07 -0600，Ben C写到：

On 2007-01-20, Ben C <sp******@spam. eggswrote:

[snip]

The situation looks like this, where "F" is the float, and L and R are
the left and right edges of the list item's block box:

LFFFFFFFFF R

An outside marker (m) you would expect to be positioned somewhere like
this (exactly where is up to the UA):

m LFFFFFFFFFF R

off the left edge of the <li>'s block box.

i.e. not like this:

LFFFFFFFFmF R

which is roughly where Firefox seems to put it-- offset to the left of
the inline box containing the <li>'s content.

If the marker position is inside, it should reliably look like this:

LFFFFFFFFFF m R

since the marker is inline and therefore moves right of the float just
like any inline box.

Your explaination is very prompt and clear. Thanks for helping me with
this issue.

It seems impossible in Firefox to layout the content exactly the way my
word processor has done. If I used 'inside' position the list item line
that wraps many lines looks strange, but acceptable to me.

Thanks a lot for explain this to me and other people on the group.

[Zhang Weiwu]

[snip: Ben's explaination of boxing model and how float works ... ]

If all what you have described is true (obviously it is), then we will
again have problem with <blockquote>

If I float an image to the left side, and explain this image with normal
text flowing around this image, and during my text explanation I need to
use blockquote, then it doesn't work.

+-----------+ <pBlah Blah</p>
| | <blockquote><pQ uote text here blach</p>
| | <p>Again quote text</p>
+-----------+ <p>again, blach</p>
<p>and quotes</p>
</blockquote>

For the above case, the first 3 paragrahs in the blockquote might get
incorrect left-side padding/margin, but the last paragraph in the
blockquote is correctly indented.

Is there a way to workaround this? (except floating image to the right
side instead)

[Ben C]

On 2007-01-21, Zhang Weiwu <zh********@rea lss.comwrote:

[snip: Ben's explaination of boxing model and how float works ... ]

If all what you have described is true (obviously it is), then we will
again have problem with <blockquote>

Yes, what happens is the blockquote's block box's left edge is all the
way to the left, under the image, and that's where its margin goes. It's
only the words inside the blockquote (in this case inside <pelements,
which make more block boxes, also stacking up against the left of their
container-- the blockquote) that are moved right to avoid the float.

If I float an image to the left side, and explain this image with normal
text flowing around this image, and during my text explanation I need to
use blockquote, then it doesn't work.

+-----------+ <pBlah Blah</p>
| | <blockquote><pQ uote text here blach</p>
| | <p>Again quote text</p>
+-----------+ <p>again, blach</p>
<p>and quotes</p>
</blockquote>

For the above case, the first 3 paragrahs in the blockquote might get
incorrect left-side padding/margin, but the last paragraph in the
blockquote is correctly indented.

Exactly.

Is there a way to workaround this? (except floating image to the right
side instead)

So long as the left margin you want on the blockquote is known to be
smaller than the width of the float, set the same amount also as right
margin on the float, and it should come out all right, provided that the
blockquote and the <p>s have transparent backgrounds.

[Jukka K. Korpela]

Scripsit Ben C:

Yes, what happens is the blockquote's block box's left edge is all the
way to the left, under the image, and that's where its margin goes.
It's only the words inside the blockquote - - that are moved right to
avoid the float.

I think you meant "lines", not "words".

>Is there a way to workaround this? (except floating image to the
right side instead)

So long as the left margin you want on the blockquote is known to be
smaller than the width of the float, set the same amount also as right
margin on the float, and it should come out all right, provided that
the blockquote and the <p>s have transparent backgrounds.

But that would create a uniform right margin for the floated image, so that
<pelements and <blockquoteelem ents would still be lined up on the left,
instead of any visible indentation of <blockquote>.

I don't see any general workaround, but in many special cases, it might be
feasible to use

blockquote { float: left; }

(You'd need to consider what happens in different situations, especially
when the canvas width varies.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/