Twenty Nineteen: Long non-breaking text strings can cause horizontal scrolling

[ianbelanger]

While fixing #36346 I noticed that all Bundled Themes have some sort of word-wrap issues when using long non-breaking text strings. While this might be an edge case issue, I believe that it warrants fixing. Also, there doesn't seem to be any backwards compatibility issues.

In order to better track this issue in each theme, I am separating #36346 into separate tickets per theme.

[ianbelanger]

Fixes word-wrap issues

[ianbelanger]

46704.diff adds

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;

to these selectors:

.site-branding,
.site-info,
.comments-area,
#colophon .widget-column .widget

and word-wrap: break-word to

.post-navigation .post-title,
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.comments-title,
blockquote

to prevent horizontal scrolling when long non-breaking text strings are used.

However, hyphens: auto; currently only works in Firefox. Unfortunately nothing worked for me in Chrome, IE11 or Edge.

This patch was tested on a Windows 10 machine, in Firefox, Chrome, IE11 and Edge browsers

Testing in other OS's and browsers would be appreciated.

[ianbelanger]

.site-title before in chrome

[ianbelanger]

.site-title after in chrome

[ianbelanger]

.comments before in Chrome

[ianbelanger]

.comments after in Chrome

[ianbelanger]

.widgets before in chrome

[ianbelanger]

.widgets after in chrome

[ianbelanger]

.footer before in chrome

[ianbelanger]

.footer after in chrome

[JeffPaul]

Per input in today's bugscrub, @dswebsme looking to test this on a Mac and update later today.

[dswebsme]

Patch looks good on Mac.

Tested in Chrome, Safari and Firefox.

Tested Site Title, Site Description, Post Title, Page Title, Content and Comments with non-breaking strings.

Mac results reflect AFTER screenshots captured by @ianbelanger.

[mukesh27]

#46888 was marked as a duplicate.

[mukesh27]

@ianbelanger Patch looks good on Ubuntu 18.04.2 LTS.

Tested in Google Chrome Version 73.0.3683.75 and Firefox Version 65.0.1

[ianbelanger]

Thanks for testing @dswebsme and @mukesh27.

I'm marking this for commit

[SergeyBiryukov]

Just wanted to note that there are some previous discussions on long non-breaking text strings in bundled themes: #25008, #25232, #29971, all closed as wontfix due to being an edge case. Should we revisit those discussions before making a decision on commit here?

[laurelfulford]

I added a comment to #36346 re: the previous tickets closed as wontfix -- it seemed like it'd be easiest to centralize that discussion in one spot. Any feedback/thoughts would be appreciated there!

[laurelfulford]

Thanks for tackling this, @ianbelanger! I noticed a couple things while reviewing 46704.diff​ :

• The RTL stylesheet needs to be regenerated as well with these changes (it's the one default theme that doesn't load the default style.css with the RTL styles). This can be done by running npm install and npm run build inside of the theme's folder.

• In headings.scss, .post-navigation .post-title, .entry-title, .not-found .page-title... already has word-break: break-word -- I don't think the word-wrap: break-word; is needed there, too (unless I'm missing something!).

• It looks like Edge and IE 10-11 will also support hyphens with the -ms- prefix -- do you think it's worth adding that as well?

[ianbelanger]

Replying to laurelfulford:

Thanks for tackling this, @ianbelanger! I noticed a couple things while reviewing 46704.diff​ :

• The RTL stylesheet needs to be regenerated as well with these changes (it's the one default theme that doesn't load the default style.css with the RTL styles). This can be done by running npm install and npm run build inside of the theme's folder.

Oops, I forgot about that. I'll refresh the patch after building the theme.

• In headings.scss, .post-navigation .post-title, .entry-title, .not-found .page-title... already has word-break: break-word -- I don't think the word-wrap: break-word; is needed there, too (unless I'm missing something!).

The reason for adding word-wrap: break-word; was to appease IE and Edge. word-break: break-word; does not work with them.

• It looks like Edge and IE 10-11 will also support hyphens with the -ms- prefix -- do you think it's worth adding that as well?

Yes I do, good catch! I will add them in the updated patch, coming soon.

[ianbelanger]

Updated patch

[laurelfulford]

Ah, thanks @ianbelanger! That makes sense to me, and 46704.1.diff​ looks good!

[laurelfulford]

In 45258:

Twenty Nineteen: Prevent too-long strings from causing horizontal scrolling.

Add hyphen and word-wrap styles to the site title, comments, and widget areas to break too-long strings and prevent horizontal scrolling.

Props ianbelanger, dswebsme, mukesh27.
Fixes #46704.