Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52184 closed defect (bug) (fixed)

Generalize the use of CSS hyphenation on WP Admin list tables

Reported by: audrasjb's profile audrasjb Owned by: audrasjb's profile audrasjb
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch has-screenshots commit
Focuses: ui, css Cc:


In #50838, we fixed some WP Admin list table headings issue by adding hyphens: auto to .fixed .column-posts CSS selector. It fixed the issue pretty well, but only for <th> cells. However, this is also needed for all table cells.

Use case: In WP 5.6, the French translation team made some translation changes to user roles so I think it would be nice to use the same CSS rule for all cells (th, td) of all WordPress Admin Tables.

For reference, see: #50838

Attachments (4)

french-users-admin-table-without-any-hyphenation.png (159.4 KB) - added by audrasjb 3 years ago.
showing issues with long words
french-users-admin-table-using-proper-hyphenation.png (189.7 KB) - added by audrasjb 3 years ago.
it's looking better with proper hyphenation :-)
52184.diff (474 bytes) - added by Chaton666 3 years ago.
Patch for #52184
52184.2.diff (395 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (13)

3 years ago

showing issues with long words

3 years ago

it's looking better with proper hyphenation :-)

#1 @Chaton666
3 years ago

  • Keywords has-patch added

Here is a diff patch proposal for this ticket.
The auto hyphenation apply to all WP admin list tables (users, posts, pages, plugins, comments...).

3 years ago

Patch for #52184

#2 @audrasjb
3 years ago

  • Keywords commit has-screenshots added

Thanks @Chaton666, just tested your patch: it applies cleanly and fixes the issue. I wasn't sure about using a universal selector *, but it looks like it doesn't introduce any bad behavior. Since it only adds a correct hyphenation to all texts, I think it's safe to use it here.

Marking this for commit.

#3 @kebbet
3 years ago

In the Swedish locale at least I have started to use &shy; for longer words in places where I know the space is to narrow for a long word. With it I can control where the hyphenation happens, a CSS-solutions breaks the word at random.
E.g. Permalänks&shy;inställningar (Permalink settings). The heading looks ok on the page, and the Help tab handle is hyphenated due to narrow space.

I think that the approach with CSS could be used in combination with the use of &shy; and &#8203; for even better hyphenation. :-)

#4 @Chaton666
3 years ago

Thanks @kebbet for this idea :-).

We can try to use &shy; too in the French locale. We will discuss it.
Although I'm afraid it may be a bit complicated to use and understand for "non-technical" people.

#5 @audrasjb
3 years ago

Thanks @kebbet for this feedback.
Indeed, it should be used in coordination with correct hyphenation CSS rules :)

Last edited 3 years ago by audrasjb (previous) (diff)

#6 @SergeyBiryukov
3 years ago

Looking at french-users-admin-table-using-proper-hyphenation.png it's not quite clear whether the hyphen is a part of the email address or not, which makes me think this might not be appropriate for all columns, as we don't know in advance what kind of data would be presented there.

If the current issue is about longer translations in the Role column, I would prefer to limit this to just that column for now, pretty much like [49317] / #50838 was limited to the Posts column. If we do need to expand this in the future, let's do that on a case-by-case basis as necessary.

See 52184.2.diff.

#7 @audrasjb
3 years ago

  • Keywords needs-refresh added; commit removed

Reading your comment I agree with you that is probably better to handle that on a case-by-case basis @SergeyBiryukov. The email column is a good example. Let's start with the role column, then 👍

Removing commit keyword and marking this as needs-refresh.

#8 @audrasjb
3 years ago

  • Keywords commit added; needs-refresh removed

ah sorry @SergeyBiryukov you already proposed a patch :D
It looks good to me and it still apply against trunk. Marking for commit.

#9 @SergeyBiryukov
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 50111:

Administration: Accommodate long translations of user roles in the "Role" list table column.

Follow-up to [49317].

Props Chaton666, audrasjb, kebbet.
Fixes #52184.

Note: See TracTickets for help on using tickets.