WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 weeks ago

#36346 assigned defect (bug)

Twenty Sixteen/Fifteen/Thirteen/Twelve titles can lead to horizontal scrolls

Reported by: Clorith Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4
Component: Bundled Theme Keywords: has-screenshots good-first-bug has-patch needs-refresh
Focuses: Cc:

Description

In the following bundled themes, a long non-breaking and non-hyphenated title can cause horizontal scrolling on smaller devices, and in the case of Twenty Fifteen also leads to container overflows in normal views as well.

This affects:

  • Twenty Sizteen
  • Twenty Fifteen
  • Twenty Thirteen
  • Twenty Twelve

The simple fix seems to be adding a word-wrap: break-word; to .site-title in these themes, as it has the best chance of breaking things up nicely when needed.

Attachments (12)

title-pre-fix.png (165.3 KB) - added by Clorith 2 years ago.
Before applying the word-break to .site-title
title-post-fix.png (165.9 KB) - added by Clorith 2 years ago.
After applying the word-break to .site-title
36346-responsive-site-title.patch (2.4 KB) - added by nickgermaine 2 years ago.
Patch to word wrap the site title correctly.
sitetitle-word-break.diff (545 bytes) - added by akiya 23 months ago.
site-title-add-hyphens.png (24.0 KB) - added by akiya 22 months ago.
fixed site-title overflow for TwentySixteen
36346-text-overflow-chrome.png (14.6 KB) - added by misfist 18 months ago.
Text Wrap Chrome
36346-text-overflow-ff.png (12.8 KB) - added by misfist 18 months ago.
Text Wrap Firefox
36346-text-overflow-ff.2.png (25.9 KB) - added by misfist 18 months ago.
Text Wrap Firefox - Working
36346-text-overflow-chrome.2.png (38.3 KB) - added by misfist 18 months ago.
About Page Chrome - Not Working
2018-04-25_17h12_01.png (48.4 KB) - added by akiya 5 weeks ago.
hyphens_and_wordbreak_together
twentyfifteen-site-title-stye.png (48.4 KB) - added by akiya 5 weeks ago.
hyphens_and_wordbreak_together
fix_cutoff_site-title.diff (6.2 KB) - added by akiya 5 weeks ago.

Download all attachments as: .zip

Change History (42)

@Clorith
2 years ago

Before applying the word-break to .site-title

@Clorith
2 years ago

After applying the word-break to .site-title

#1 @swissspidy
2 years ago

  • Focuses performance removed

#2 @mustaasamaleem
2 years ago

Thank you @Clorith for taking up my reported bug. Hope to see it resolved in the next release. :)

#3 follow-up: @nickgermaine
2 years ago

Can I fix this? I mean, I'm capable of fixing it, but not familiar with the WP workflow. This would be my first bug fix (contribution) to WP.

#4 in reply to: ↑ 3 @Clorith
2 years ago

  • Keywords good-first-bug added

Replying to nickgermaine:

Can I fix this? I mean, I'm capable of fixing it, but not familiar with the WP workflow. This would be my first bug fix (contribution) to WP.

Certainly, it's open for anyone to fix.

You'll probably want to look over the handbook for contributing which is available at https://make.wordpress.org/core/handbook/, as it contains information on how to create a patch if you are unfamiliar with the approach, as well as many other handy tips and tricks for getting involved. The end of the handbook also includes various tutorials and guides.

#5 @nickgermaine
2 years ago

Awesome, thanks. I was reading some other things but didn't get a lot of info about the entire process. It mentioned subversion (I mostly use github), but I didn't really get any sort of guide or anything out of it. I'll check your link, thanks.

#6 @nickgermaine
2 years ago

I've got the patch made for this. Hope I did it correctly. I just ran svn diff > <patchname>.patch once I was done making the changes. I didn't have a twenty sixteen theme from the trunk. Is there something I have to do to get it?

So this patch covers Twenty Eleven -> Twenty Fifteen, and fixes the site title responsiveness.

(I'm also not sure if I need to change the status of this bug or anything? And I guess I just attach the patch at the top of this ticket?)

@nickgermaine
2 years ago

Patch to word wrap the site title correctly.

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


2 years ago

#8 @nickgermaine
2 years ago

  • Keywords has-patch added

#9 @karmatosed
2 years ago

  • Keywords needs-testing added

#10 @karmatosed
2 years ago

  • Milestone changed from Awaiting Review to 4.6

#12 @karmatosed
2 years ago

@iamtakashi what do you think from a design view?

#13 @iamtakashi
2 years ago

This is kind of an edge case but it might happen often with a language like German. But if we decided to fix this, I think we need to test this really extensively (both browsers and languages) so to avoid the case where "the cure is worse than the disease".

#14 @mrahmadawais
2 years ago

I think we can add .break-word class to the CSS and use it in all the places where there are titles. @iamtakashi let me know if you agree and I will contribute that.

#15 @karmatosed
2 years ago

@mrahmadawais my concern with break-word is it could look bad in a lot of cases. It also could cause the browser issues being suggested. I'd be interested in seeing a suggestion of it and thorough browser and device testing to prove this isn't the case.

#16 @monikarao
2 years ago

Just tested the patch on cross browsers and devices and it works nicely for me on ->

OS: Windows 10 Browser: Chrome 50.0.2661.102 , IE-11 , Firefox 46.0.1 WP : 4.5.3-alpha-37528 Server: Environment : VVV

But it doesn't work on->

OS: Windows 10 Browser: Safari 5.1.7 WP : 4.5.3-alpha-37528 Server: Environment : VVV

Screenshot:-> http://www.awesomescreenshot.com/image/1289591/690fe3dacaf0997632d3a387002b14d6

#17 @danieltj
2 years ago

  • Keywords 2nd-opinion added

What about adding text-overflow where on potential text overflow, ellipses are added and the words are cut off?

Not a fantastic solution but it means that long title are shortened when too long.

I think this word be better than 'break the word' as breaking the word half way through could cause confusion, no?

#18 @monikarao
2 years ago

Tested The Patch and the problem is also appearing for "Twenty Sixteen" and "Twenty Twelve" themes.Only works for "Twenty Fifteen" and "Twenty Thirteen" theme

Last edited 2 years ago by monikarao (previous) (diff)

#19 @karmatosed
2 years ago

@danieltj I'd be more keen to not add an extra visual element at this stage of the themes. They are released and that could create a bad user experience. It may not, but potentially.

We need a solution that doesn't break on Windows 10. Anyone want to investigate this?

#20 @karmatosed
2 years ago

  • Milestone changed from 4.6 to Future Release

As we don't have a fix, I am removing 4.6 from this until we get closer to a resolution.

#21 @monikarao
2 years ago

Yes, we need another solution for this because the problem is also appearing in cross browsers for different themes.

Last edited 2 years ago by monikarao (previous) (diff)

#22 @akiya
23 months ago

Patch to Add class ".site-title" for hyphens style. Only TwentySixteen style.css .

@akiya
22 months ago

fixed site-title overflow for TwentySixteen

#23 @akiya
22 months ago

  • Keywords ui-feedback added

Post-title is not scroll or cut off too long word, so styled "hyphens".

style.css/TwentySixteen

1857 .post-navigation .post-title,
1858 .entry-title,
1859 .comments-title {
1860 >   -webkit-hyphens: auto;
1861 >   -moz-hyphens: auto;
1862 >   -ms-hyphens: auto;
1863 >   hyphens: auto;
1864 }                     

Similarly, hyphens style add .site-title .

Last edited 22 months ago by akiya (previous) (diff)

@misfist
18 months ago

Text Wrap Chrome

@misfist
18 months ago

Text Wrap Firefox

#24 @misfist
18 months ago

I tested the patch (sitetitle-word-break.diff) in Firefox 50.0.2 and Chrome 54.0.2840.98 (OS X 10.10.5) on Twenty Sixteen.

The patch, which is for Twenty Sixteen only seems to work in Firefox, but it has no effect in Chrome.

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

@misfist
18 months ago

Text Wrap Firefox - Working

@misfist
18 months ago

About Page Chrome - Not Working

#25 @akiya
16 months ago

I'm tested too Chrome 56.0.2924.76 on Windows 10 (Ver 1607 Build No.14393.693). This patch is not worked in Chrome. So, this problem seems to fixed by other way.

#26 @DrewAPicture
11 months ago

  • Owner set to misfist
  • Status changed from new to assigned

Assigning ownership to mark the good-first-bug as "claimed".

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 weeks ago

#28 @melchoyce
5 weeks ago

  • Keywords needs-refresh added; needs-testing 2nd-opinion ui-feedback removed
  • Owner misfist deleted

The hyphen solution works great. Does someone want to create an updated patch?

@akiya
5 weeks ago

hyphens_and_wordbreak_together

@akiya
5 weeks ago

hyphens_and_wordbreak_together

#29 @akiya
5 weeks ago

Chrome does not support "hyphens:auto"
Available value for hyphens are manual/none/unset on chrome 66.0.3359.117.
It is better that declaration hyphens property and word-wrap property like twentyfifteen.

twentyfifteen/style.css row 1657

.entry-content,
.entry-summary,
.page-content,
.comment-content {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word;
}

This style is renderd below screenshot.
hyphens_and_wordbreak_together

Last edited 5 weeks ago by akiya (previous) (diff)

#30 @akiya
5 weeks ago

Should I divide TwentySeventeen patch?
I had included TwentySeventeen/style.css in patch.

Last edited 5 weeks ago by akiya (previous) (diff)
Note: See TracTickets for help on using tickets.