form input button and margin

[corvid]

In the second one, the words and the button overlap. I'm not immediately
sure what's special enough about that case to cause that.


<button type="submit" style="font-size: 200%; margin-bottom: 1em; width: 100%;">button submit margin bottom</button> words words
<p>
<input type="submit" value="input submit margin bottom BAD" style="font-size: 200%; margin-bottom: 1em; width: 100%;"> words words
<p>
<input type="submit" value="input submit" style="font-size: 200%; width: 100%;"> words words
<p>
<div style="font-size: 200%; margin-bottom: 1em; width: 100%; border-width: 1px; border-style: solid">div margin bottom</div>
words words
<p>
<img src=file:/tmp/whatever border=1 style="margin-bottom: 1em; width: 100%">
words words

[corvid]

Post by corvid
In the second one, the words and the button overlap. I'm not immediately
sure what's special enough about that case to cause that.

Here's some quick code made by looking at how the image code is working.
I would not be surprised if there are still complications lurking
somewhere in textblock, but it's at least something to play with...


Aside: It seems that, at least for firefox, the border is the edge of a
button or text entry widget or whatever, and padding goes inside that.
Of course we're not in any position to do that, but it's interesting.

[Sebastian Geerken]

Post by corvid

Post by corvid
In the second one, the words and the button overlap. I'm not immediately
sure what's special enough about that case to cause that.

Here's some quick code made by looking at how the image code is working.
I would not be surprised if there are still complications lurking
somewhere in textblock, but it's at least something to play with...

First of all, two remarks: (i) the border should also be added in
getExtremesImpl; (ii) Embed::draw should either work similar to
Image::draw (testing for intersection), or as currently, which is
probably preferrably, since simpler, and drawing only some pixels more
than needed.

Post by corvid
Aside: It seems that, at least for firefox, the border is the edge of a
button or text entry widget or whatever, and padding goes inside that.
Of course we're not in any position to do that, but it's interesting.

I do not have specs at hand, but I assume that this is correct.

For this reason, I'd rather let the resource, not the embed widget,
handle border and padding. For a first version, the standard borders
(outset for button, inset for input fields, etc.) could be drawn; for
an improvement, custom Fltk widgets would be neccessary.

For reasons of uniformity, I'd let the resource als handle margin,
which should then be implemented somewhere in flkt::ui.

BTW: Johannes and I are planning to cleanup size handling; I'd like to
get rid of size hints, and so also of the distinction "uses size
hints". This will make it simpler to add <button>'s inline.

Sebastian