Hi,
sorry for the delay...
On Tue, Apr 27, 2010 at 11:40:11PM +0200, Johannes Hofmann wrote:
> On Tue, Apr 27, 2010 at 09:04:49PM +0000, corvid wrote:
> > > commit 3e01d83fd6d1 (draw background for all Words, not just text)
> > > draws a too large background box e.g. in this example:
> > >
> > > <html><body>
> > > foo <div style="background-color: blue; margin-top: 100px">bar</div>
> > > </body></html>
> > >
> > > The margin should not be blue.
> > > What is the reason for this change anyway? Shouldn't each widget be
> > > responsible for it's drawing (including the background)?
> >
> > This is when I was looking at the rectangles of color on the fltk.org
> > page around, e.g., "FLTK Apps", "FLTK Library"...
> >
> > The rectangle of color (which came from the style of the A element, iirc)
> > is "supposed" to be taller than the little rounded-corner images, judging
> > by what firefox does.
>
> Ah, I think I see the problem now. Textblock has to draw the
> background for the <A> element - even at places where it is covered
> by child widgets, as they might be transparent.
> On the other hand margins are always transparent (see
> http://www.w3.org/TR/CSS2/box.html) so there is a problem in the
> current implementation.
> I guess I need some time to think about this.
>
> >
> > So if the margin is part of the child, then...
> > how should this be disentangled?
> > Does it come down to being one of those things that have to wait until
> > we have more of a real box model?
> >
>
> We already have a proper box model for block boxes, what we are missing
> is proper handling of inline boxes (e.g. drawing borders around
> <a>-elements).
Ok, the general problem is that a single Textblock widget can handle
multiple HTML elements. E.g. in this case:
<a href=foo style="background-color: red">foo <b>bar</b></a>
there is just a single Textblock drawing the whole thing.
The style of the word "bar" would normally not have a background
color set, but the red of the <a> element would shine through, but
as the textblock simply draws one word after the other, we do not
draw the whole <a> element and then draw the <b> element on top.
To make the background color work nevertheless, I had introduced the
inheritBackgroundColor hack, which will pass the red background to
the style of the child element (<b> in this case).
However, this hack does not work properly if the child element
has a margin:
<a href=foo style="background-color: red">foo <img src=foo.png alt=bar style="margin:1em"></a>
So I think we should remove the whole inheritBackgroundColor() hack
and replace it with some code in textblock.cc, that draws the proper
background color for all words as necessary.
We need to be careful though to not draw word backgrounds if they
are the same color as the whole textblock to avoid excessive
drawing.
This would still not allow things like:
<b style="border: 1px solid black">foo</b>
but I currently don't see a simple way to make that work.
Cheers,
Johannes
