[wp-trac] [WordPress Trac] #48531: Regression: styling of most form elements is uneven or off-center

[WordPress Trac]

#48531: Regression: styling of most form elements is uneven or off-center
-----------------------------------+---------------------------------
 Reporter:  azaozz                 |       Owner:  (none)
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  5.3.1
Component:  Administration         |     Version:  5.3
 Severity:  normal                 |  Resolution:
 Keywords:  has-screenshots close  |     Focuses:  ui, administration
-----------------------------------+---------------------------------
Changes (by afercia):

 * keywords:  needs-patch has-screenshots => has-screenshots close


Comment:

 @azaozz please refer to the above screenshots. Those are the same UI parts
 illustrated by your screenshots the way they looked like in WordPress 5.2
 on Chrome on Windows.

 The text within selects, buttons, (and input fields) is ''already'' not
 vertically centered in WordPress 5.2 and that happens since the
 introduction of system fonts in WordPress 4.6.

 Please look at the "Apply" button :) That's the most evident case. Please
 look at all the other input fields. Is that the "good" alignment you'd
 like to restore?

 A "regression" implies there was a previous situation where things worked
 well. This is not the case, as the vertical alignment of text within form
 controls is far from ideal on Windows since WordPress 4.6.

 I've already mentioned a few times on #47477 and #48420 that this problem
 on Windows can't be solved via CSS. The only way would be serving a
 different CSS for macOS and Windows but that would mean opening a can of
 worms as any operating system uses different system fonts and would need
 different CSS.

 Specifically, the Windows 10 problem is caused by the default system font
 used there and its internal metrics: Segoe UI. This is a problem that's
 basically unsolved since a few years. More details on #48423 where I'm
 proposing to just remove Segoe UI from the "font stack".

 > Removing the padding "broke" the old-style structural CSS in many places

 Having worked on these CSS changes and having extensively tested on all
 the operating systems and browsers I have access to, I think the best way
 to standardize all the form controls in WordPress is by avoiding to use
 top and bottom padding. ''I did try with padding''. It just doesn't work
 well. Line-height and min-height gave the best results across OSes and
 browsers.

 Also, (this sounds like a conversation we already had) could you please
 explain to the broader audience reading this ticket what do you mean by
 "structural CSS"? I do know, I'm asking just for clarification and
 history.

 > and should have been fixed during 5.3-beta

 I'd like to remind you on #47477 there was a patch ready that improved
 things a bit. I recommended to commit it even if WordPress was in Beta.
 That didn't happen.

 Considering all this is already covered on other tickets (#48420 and
 #48423) and that this is not a regression but it's a change that made more
 evident pre-existing issues, can we agree to close this ticket and focus
 on the other tickets? I'd like to focus on solutions rather than
 struggling to coordinate tickets that are, basically, a duplicate of other
 open tickets.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48531#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform