Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#46703 closed defect (bug) (fixed)

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

Reported by: ianbelanger's profile ianbelanger Owned by: ianbelanger's profile ianbelanger
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: Cc:

Description

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.

Attachments (4)

46703.diff (749 bytes) - added by ianbelanger 6 years ago.
Fixes word-wrap issues
46703.1.diff (429 bytes) - added by ianbelanger 6 years ago.
Fixes word-wrap issues, with less CSS
46703-twenty-seventeen-site-title-before.PNG (348.6 KB) - added by ianbelanger 6 years ago.
.site-title before in chrome
46703-twenty-seventeen-site-title-after.PNG (420.9 KB) - added by ianbelanger 6 years ago.
.site-title after in chrome

Download all attachments as: .zip

Change History (15)

@ianbelanger
6 years ago

Fixes word-wrap issues

#1 @ianbelanger
6 years ago

  • Keywords has-patch needs-testing added

46703.diff adds

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

to these selectors:

.site-title

and max-width: 100%; to body:not(.title-tagline-hidden) .site-branding-text 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.

Last edited 6 years ago by ianbelanger (previous) (diff)

@ianbelanger
6 years ago

Fixes word-wrap issues, with less CSS

#2 @ianbelanger
6 years ago

Turns out all it needed was max-width: 100%; added to body:not(.title-tagline-hidden) .site-branding-text to prevent horizontal scrolling when long non-breaking text strings are used.

@ianbelanger
6 years ago

.site-title before in chrome

@ianbelanger
6 years ago

.site-title after in chrome

#3 @ianbelanger
6 years ago

  • Keywords has-screenshots added

#4 @ianbelanger
6 years ago

  • Milestone changed from Awaiting Review to 5.2

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


6 years ago

#6 @JeffPaul
6 years ago

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

#7 @dswebsme
6 years ago

  • Keywords needs-testing removed

Patch "46703.1.diff" 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.

Version 1, edited 6 years ago by dswebsme (previous) (next) (diff)

#8 @ianbelanger
6 years ago

  • Keywords commit added

Thanks for testing @dswebsme. 46703.1.diff is an iteration on 46703.diff, so no need to test the first patch.

I'm marking this for commit

#9 @SergeyBiryukov
6 years ago

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?

#10 @laurelfulford
6 years ago

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!

#11 @laurelfulford
6 years ago

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

In 45257:

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

Add a max-width to the site title, so too-long strings will wrap instead of causing horizontal scrolling.

Props ianbelanger, dswebsme.
Fixes #46703.

Note: See TracTickets for help on using tickets.