WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 8 months ago

#36346 assigned defect (bug)

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

Reported by: Clorith Owned by: misfist
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4
Component: Bundled Theme Keywords: has-screenshots good-first-bug has-patch needs-testing 2nd-opinion ui-feedback
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 (9)

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 20 months ago.
site-title-add-hyphens.png (24.0 KB) - added by akiya 19 months ago.
fixed site-title overflow for TwentySixteen
36346-text-overflow-chrome.png (14.6 KB) - added by misfist 15 months ago.
Text Wrap Chrome
36346-text-overflow-ff.png (12.8 KB) - added by misfist 15 months ago.
Text Wrap Firefox
36346-text-overflow-ff.2.png (25.9 KB) - added by misfist 15 months ago.
Text Wrap Firefox - Working
36346-text-overflow-chrome.2.png (38.3 KB) - added by misfist 15 months ago.
About Page Chrome - Not Working

Download all attachments as: .zip

Change History (35)

@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
23 months ago

  • Keywords needs-testing added

#10 @karmatosed
23 months ago

  • Milestone changed from Awaiting Review to 4.6

#12 @karmatosed
22 months ago

@iamtakashi what do you think from a design view?

#13 @iamtakashi
22 months 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
21 months 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
21 months 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
21 months 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
21 months 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
21 months 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 21 months ago by monikarao (previous) (diff)

#19 @karmatosed
21 months 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
21 months 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
21 months ago

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

Last edited 21 months ago by monikarao (previous) (diff)

#22 @akiya
20 months ago

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

@akiya
19 months ago

fixed site-title overflow for TwentySixteen

#23 @akiya
19 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 19 months ago by akiya (previous) (diff)

@misfist
15 months ago

Text Wrap Chrome

@misfist
15 months ago

Text Wrap Firefox

#24 @misfist
15 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 15 months ago by misfist (previous) (diff)

@misfist
15 months ago

Text Wrap Firefox - Working

@misfist
15 months ago

About Page Chrome - Not Working

#25 @akiya
13 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
8 months ago

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

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

Note: See TracTickets for help on using tickets.