W3C home > Mailing lists > Public > whatwg@whatwg.org > April 2013

Re: [whatwg] Alignment of empty buttons

From: Christian Biesinger <cbiesinger@google.com>
Date: Thu, 25 Apr 2013 10:58:58 -0700
Message-ID: <CAPTJ0XGoy+A7fxxw1zcVPsi0nVK=zfeL4m0zNtJuEWSJauGP7A@mail.gmail.com>
Cc: whatwg@lists.whatwg.org
On Thu, Apr 25, 2013 at 10:48 AM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
> On 4/25/13 1:43 PM, Christian Biesinger wrote:
>>
>> Where should the button be positioned relative to the input field (or
>> if you prefer, the baseline of the block)?
>
>
> The question you are really asking is "where is the baseline of the
> button?", right?

True - when I started writing the email, I thought that Firefox was
actually centering the button, which I only later realized wasn't
quite correct.

>> Chrome dev, IE and Opera
>> put the bottom of the button a bit higher than the bottom of the
>> input, whereas Firefox seems to approximately center the button on the
>> line (though without using vertical-align:middle).
>
>
> Gecko puts the baseline of the button at the baseline of the button's text,
> and if the button is not auto-height the extra height is added (or removed)
> equally from above and below the text.

Hm, but I don't think that's completely correct, because then the
positioning should stay the same when I start entering text in the
button, right? Or does adding text make the text run have height,
affecting where the extra height gets added?

I think what you are saying is: in Gecko, baseline of a button is
(content_box_height - text_height) / 2 + text_ascent

(BTW, where is that code located? I tried and failed to find it :( )

> It looks like Chrome dev does the same unless there's no text in the button,
> in which case they put the baseline at the bottom margin edge (more
> inline-block-like behavior?).

That sounds probably correct. I don't understand inline layout very
well, though I'm trying to learn...

-christian
Received on Thursday, 25 April 2013 17:59:22 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:57 UTC