Page MenuHomePhabricator

Page titles breaking in middle of the word on stable
Closed, ResolvedPublic

Description

IOS Safari 8.1, mobile on desktop
Long words in titles are hyphenating in middle of word instead of going to the next line.
Titles should never wrap to a second line in the middle of a word. Its very uncommon for text on the web.
They should wrap in between words.

Current:


Let's remove hyphens and use word-wrap: break-word for page title and section titles per Kaity [1]

[1] https://phabricator.wikimedia.org/T93826#1546072

Event Timeline

KHammerstein raised the priority of this task from to Needs Triage.
KHammerstein updated the task description. (Show Details)
KHammerstein added a subscriber: KHammerstein.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 24 2015, 11:18 PM
KHammerstein renamed this task from Text breaking in middle of the word on mobile beta to Page titles breaking in middle of the word on mobile beta.Mar 24 2015, 11:50 PM
KHammerstein set Security to None.
KHammerstein updated the task description. (Show Details)

@KHammerstein, how should we handle cases where a word doesn't fit in a line by itself either?

@bmansurov they should be hyphenated

Change 199761 had a related patch set uploaded (by Bmansurov):
Hyphenate page titles

https://gerrit.wikimedia.org/r/199761

Change 199761 merged by jenkins-bot:
Hyphenate page titles

https://gerrit.wikimedia.org/r/199761

bmansurov closed this task as Resolved.Mar 26 2015, 10:12 PM
bmansurov reopened this task as Open.EditedMay 7 2015, 6:48 PM

According to @KHammerstein, the word "National" in the screenshot should not be hyphenated.


iphone 4s safari

More comments from @KHammerstein:

  1. its most important to not hyphenate all words
  2. I think wrapping without a hyphen is ok
  3. and wrapping should only happen when a word by itself doesn't fit in a line
  4. I looked up antidisestablismentarianism on dictionary.com. they have it working with a hyphen, not sure how. maybe check out how dictionary.com did it? maybe they used a different method

Visit http://dictionary.reference.com/browse/Supercalifragilisticexpialidocious?s=t on a small screen device. Their implementation is unique and can't be easily replicated.

bmansurov removed bmansurov as the assignee of this task.Jul 2 2015, 10:59 AM
Restricted Application added a subscriber: Luke081515. · View Herald TranscriptJul 2 2015, 10:59 AM

@bmansurov What's the progress on this? Still an important bug.

@KHammerstein, I haven't been able to work on it. @Jhernandez, should we pull it in the next sprint? @phuedx?

phuedx added a comment.Jul 3 2015, 3:16 PM

The following resources might be helpful here:

It's worth noting that at the moment we apply hyphens: auto to the title and changing this to hyphens: none fixes the example above but might not have the desired effect overall.

@KHammerstein, I haven't been able to work on it. @Jhernandez, should we pull it in the next sprint? @phuedx?

This bug hasn't yet been given a priority, so I'm not sure if we should or not. I'd hazard a guess that this affects all iOS users though.

@Jhernandez
We should prioritize this, saw the bug again today. I see it about every few weeks as an iOS user.

KHammerstein renamed this task from Page titles breaking in middle of the word on mobile beta to Page titles breaking in middle of the word on stable.Aug 14 2015, 11:25 PM
KHammerstein updated the task description. (Show Details)
Jhernandez triaged this task as High priority.Aug 17 2015, 10:08 AM

@KHammerstein I don't think we can do something different for titles with words and too-long-word titles like supercalifragilisticexpialidocious.

Either we break words or we hyphen.

If we break words, too-long words will break without hyphen.
If we do hyphens all words will break with hyphens.

See an example: https://output.jsbin.com/juguzuzuyu
First box is breaking words. Second box is hyphening.

Note: Hyphens are seldom supported, and wherever they're not supported the words will break without any hyphen (android, chrome, etc, see http://caniuse.com/#feat=css-hyphens)

Let's define exactly what we want here and we'll fix this on a following sprint.

//Source of jsbin to play: https://jsbin.com/juguzuzuyu/edit?css,output

cc/ @bmansurov @phuedx

@Jhernandez
Lets break words. Very long words are less common, and giving them hyphens will hyphenate a lot of shorter words that will be unnecessary and hard to read.

Alright, thanks for the comment @KHammerstein.

Let's go with a simple word-wrap: break-word for titles (both page title and section titles) and remove hyphens where it makes sense.

Jhernandez updated the task description. (Show Details)Aug 19 2015, 9:18 AM

@Jhernandez
Could we prioritize this for a sprint coming up?

This comment was removed by KHammerstein.
phuedx claimed this task.Sep 23 2015, 1:02 PM
phuedx moved this task from To Do to Doing on the Reading-Web-Sprint-56-Four Lions board.

Change 240370 had a related patch set uploaded (by Phuedx):
Break all headings across lines

https://gerrit.wikimedia.org/r/240370

Change 240370 merged by jenkins-bot:
Break all headings across lines

https://gerrit.wikimedia.org/r/240370

Jdlrobson closed this task as Resolved.Sep 23 2015, 10:10 PM
Jdlrobson added a subscriber: Jdlrobson.

240370 caused a styling regression wherein overlay headings have the wrong font-family.

phuedx reopened this task as Open.Sep 24 2015, 11:40 AM

Change 240678 had a related patch set uploaded (by Phuedx):
Fix overlay headings

https://gerrit.wikimedia.org/r/240678

Change 240678 merged by jenkins-bot:
Fix overlay headings

https://gerrit.wikimedia.org/r/240678

Jdlrobson closed this task as Resolved.Sep 25 2015, 4:49 PM

This is done but @phuedx there is another regression - T113759 - which stops me signing off this work.