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