WordPress.org

Make WordPress Core

#46703 closed defect (bug) (fixed)

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

Reported by: ianbelanger Owned by: 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 18 months ago.
Fixes word-wrap issues
46703.1.diff (429 bytes) - added by ianbelanger 18 months ago.
Fixes word-wrap issues, with less CSS
46703-twenty-seventeen-site-title-before.PNG (348.6 KB) - added by ianbelanger 18 months ago.
.site-title before in chrome
46703-twenty-seventeen-site-title-after.PNG (420.9 KB) - added by ianbelanger 18 months ago.
.site-title after in chrome

Download all attachments as: .zip

Change History (15)

@ianbelanger
18 months ago

Fixes word-wrap issues

#1 @ianbelanger
18 months 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 18 months ago by ianbelanger (previous) (diff)

@ianbelanger
18 months ago

Fixes word-wrap issues, with less CSS

#2 @ianbelanger
18 months 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
18 months ago

.site-title before in chrome

@ianbelanger
18 months ago

.site-title after in chrome

#3 @ianbelanger
18 months ago

  • Keywords has-screenshots added

#4 @ianbelanger
18 months ago

  • Milestone changed from Awaiting Review to 5.2

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


18 months ago

#6 @JeffPaul
18 months ago

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

#7 @dswebsme
18 months ago

  • Keywords needs-testing removed

Patch "46703.1.diff" looks good on Mac. Do I need to test "46703.diff" as well or is .1 meant to replace it? Just clarifying as your second diff mentions fixing the same problem with less CSS (new here so not 100% up to speed on approach / nomenclature for multiple diffs).

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.

Last edited 18 months ago by dswebsme (previous) (diff)

#8 @ianbelanger
18 months 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
18 months 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
18 months 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
18 months 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.