WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 8 months ago

#46304 assigned defect (bug)

On the privacy request table buttons switch to break-word for legibility

Reported by: garrett-eclipse Owned by: garrett-eclipse
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: has-patch 2nd-opinion ui-feedback
Focuses: ui Cc:
PR Number:

Description

Hello,

Depending on the screensize the buttons in privacy request tables start to downgrade breaking to 2+lines depending on locale. Currently the css is break-all which causes the string to become illegible. Switching to break-word in the css will allow the button text to be readable.

Gif Example;
https://gyazo.com/5aa60b8dda2eacbd23e9c95086ac8e3d

The breakdown for english starts around 1020 down to 920. For other locales and users with zoomed browsers the breakpoints will differ as to when this falls apart.

The css for this can be found here - https://github.com/WordPress/WordPress/blob/173e0f9ee7b7f7dee03c351f2f9bf968759eb20e/wp-admin/css/forms.css#L1141

Thanks

Attachments (1)

46304.diff (424 bytes) - added by garrett-eclipse 8 months ago.
Switching to word-wrap: break-word and white-space: normal

Download all attachments as: .zip

Change History (3)

#1 follow-up: @afercia
8 months ago

  • Component changed from Administration to Privacy
  • Focuses accessibility privacy removed

Seems this was intentional, see [43282]. Worth investigating on the reasons for that change, see the related ticket.

I'd also note the CSS value unset used for white-space is not supported by IE11 and shouldn't be used.

@garrett-eclipse
8 months ago

Switching to word-wrap: break-word and white-space: normal

#2 in reply to: ↑ 1 @garrett-eclipse
8 months ago

  • Keywords has-patch 2nd-opinion ui-feedback added
  • Owner set to garrett-eclipse
  • Status changed from new to assigned

Replying to afercia:

Seems this was intentional, see [43282]. Worth investigating on the reasons for that change, see the related ticket.

Thanks @afercia I see what you mean with the second commit switching to break-all. I went through Slack and Trac surrounding the ticket and couldn't find any explanation provided. Maybe @azzozz has information as he made both commits. Only thought I had was the original CSS was word-break: break-word; which isn't an official value and is only supported on Webkit browsers.
Reference - https://caniuse.com/#search=word-break
*Also it seems to indicate break-all is only partially supported.

From my investigation on Trac and Google is that the norm for this sort of thing appears to be going with word-wrap: break-word; as it's most widely supported.
Reference - https://caniuse.com/#search=overflow-wrap

Other Trac tickets/changes that went with word-wrap: break-word;:
https://meta.trac.wordpress.org/ticket/1157
https://core.trac.wordpress.org/ticket/36207
https://core.trac.wordpress.org/ticket/22554
https://core.trac.wordpress.org/ticket/22359

Replying to afercia:

I'd also note the CSS value unset used for white-space is not supported by IE11 and shouldn't be used.

Thanks for pointing that out, I supplied a patch where I switched it to 'normal'. Is that a fairly safe approach or do you recommend a different setting?

Note: See TracTickets for help on using tickets.