WordPress.org

Make WordPress Core

#46695 closed defect (bug) (wontfix)

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

Reported by: ianbelanger Owned by: ianbelanger
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots close
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 (9)

46695.diff (1.3 KB) - added by ianbelanger 12 months ago.
Fixes word-wrap issues
46695-twenty-thirteen-site-title-before.PNG (91.5 KB) - added by ianbelanger 12 months ago.
.site-title before in chrome
46695-twenty-thirteen-site-title-after.PNG (112.8 KB) - added by ianbelanger 12 months ago.
.site-title after in chrome
46695-twenty-thirteen-entry-title-before.PNG (25.8 KB) - added by ianbelanger 12 months ago.
.entry-title before in Chrome
46695-twenty-thirteen-entry-title-after.PNG (72.8 KB) - added by ianbelanger 12 months ago.
.entry-title after in Chrome
46695-twenty-thirteen-post-nav-before.PNG (9.8 KB) - added by ianbelanger 12 months ago.
.post navigation before in chrome
46695-twenty-thirteen-post-nav-after.PNG (12.6 KB) - added by ianbelanger 12 months ago.
.post navigation after in chrome
46695-twenty-thirteen-comments-title-before.PNG (13.4 KB) - added by ianbelanger 12 months ago.
.comments-title before in Chrome
46695-twenty-thirteen-comments-title-after.PNG (32.4 KB) - added by ianbelanger 12 months ago.
.comments-title after in Chrome

Download all attachments as: .zip

Change History (20)

@ianbelanger
12 months ago

Fixes word-wrap issues

@ianbelanger
12 months ago

.site-title before in chrome

@ianbelanger
12 months ago

.site-title after in chrome

@ianbelanger
12 months ago

.entry-title before in Chrome

@ianbelanger
12 months ago

.entry-title after in Chrome

@ianbelanger
12 months ago

.post navigation before in chrome

@ianbelanger
12 months ago

.post navigation after in chrome

@ianbelanger
12 months ago

.comments-title before in Chrome

@ianbelanger
12 months ago

.comments-title after in Chrome

#1 @ianbelanger
12 months ago

  • Keywords has-patch has-screenshots needs-testing added
  • Milestone changed from Awaiting Review to Future Release

#2 @ianbelanger
12 months ago

46695.diff adds

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

to these selectors:

.site-title,
.site-description,
.entry-title,
.post-navigation .nav-links,
.comments-title

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.

#3 @ianbelanger
12 months ago

  • Milestone changed from Future Release to 5.2

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


12 months ago

#5 @JeffPaul
12 months ago

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

#6 @dswebsme
12 months ago

  • Keywords needs-testing removed

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.

As demonstrated in the AFTER screenshot of .site-header the non-breaking title / description bleeds vertically past the background image however everything is still correctly contained within .site-header (no overflow).

Noting an edge case where pages with long non-breaking titles added to a menu result in horizontal scrolling. This could be addressed in a separate issue as menus can be edited via the UI to solve the issue.

#7 @ianbelanger
12 months ago

  • Keywords commit added

Thanks for testing @dswebsme.

I'm marking this for commit

#8 @SergeyBiryukov
12 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?

#9 @laurelfulford
12 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!

#10 @laurelfulford
12 months ago

Thanks for tackling this @ianbelanger! I figured I could check these over while this issue is discussed in #36346 :)

46695.diff ​looks good to me! Similar to my comment in #46704, what do you think about adding the -ms- prefix to hyphens as well, for Edge and IE 10-11? Like Twenty Fifteen, it looks like Twenty Thirteen already uses it in its existing hyphen styles.

I also noticed the theme also formats prefixed values like:

-webkit-hyphens: auto;
-moz-hyphens:    auto;
-ms-hyphens:     auto;
hyphens:         auto;

... with extra spacing to line up the values. What do you think about following that, too, for consistency with existing styles?

#11 @ianbelanger
12 months ago

  • Keywords close added; commit removed
  • Milestone 5.2 deleted
  • Resolution set to wontfix
  • Status changed from assigned to closed

As per the discussion in #36346, I am closing this as a wontfix

See comment for details https://core.trac.wordpress.org/ticket/36346#comment:40

Note: See TracTickets for help on using tickets.