[wp-trac] [WordPress Trac] #37384: Text alignment in options-discussion.php

[WordPress Trac]

#37384: Text alignment in options-discussion.php
-----------------------------------+---------------------------------
 Reporter:  Ankit K Gupta          |       Owner:
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  Administration         |     Version:  4.5.3
 Severity:  normal                 |  Resolution:
 Keywords:  has-patch 2nd-opinion  |     Focuses:  ui, administration
-----------------------------------+---------------------------------

Comment (by FolioVision):

 @Ankit, great that you opened up this ticket. The poor alignment in
 WordPress preferences drive me batty.

 In some ways, it would be easier to remove the p tags as you recommend.
 Here's what our discovery found: sometimes things in right column are
 wrapped in p tags, but sometimes not (in Options -> Discussion the top
 ones). P tags as well as Label tags have their own margins, which add up.
 Plus, TH and TD don't have the same paddings, as well as TDs and P tags
 don't have the same line height. If you count this together, it's a mess.

 In line with @karmatosed's recommendation, we keep the p tag, I did some
 work on making preferences line up. In this case, every element is wrapped
 in P. For the moment it doesn't work with default WordPress admin but does
 work starting with a clean slate. I'm attaching an HTML example of clean
 WordPress preferences with each the content in each td wrapped in P.

 .form-table cells include all different elements and tags. Right now many
 of them don't even share the same margins or paddings (like TH and TD).
 Every try to unify the tags one by one resulted in more work.

 So we looked at what kind of scenarios happen inside table cells. In the
 end we found out, that the alignment improved by slightly changing the top
 margin on the Label tag. Then we added one extra declaration if a Label is
 placed inside a P tag and all of the cells aligned nicely. One more
 element changes regular paragraph text line heights on a regular basis -
 small select fields. If they are in first line of the text, it's breaking
 the alignment. Negative margin was added.

 The big decision now is whether we should include P tags to wrap content
 in each TD or whether it would be better to only include P tags where
 absolutely required (no wrapping element). After this decision it will be
 hard slogging to clean up the WP Admin CSS to make the TD content align in
 all possible cases. There will need to be a lot of small changes
 (hopefully more removing properties than adding them).

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