| • KHammerstein | |
| Mar 24 2015, 11:18 PM |
| F1564052: Screen Shot 2015-08-17 at 12.07.10 PM.png | |
| Aug 17 2015, 10:08 AM |
| F161622: IMG_8153.jpg | |
| May 7 2015, 6:48 PM |
| F103797: IMG_7986.PNG | |
| Mar 24 2015, 11:18 PM |
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]
@KHammerstein, how should we handle cases where a word doesn't fit in a line by itself either?
According to @KHammerstein, the word "National" in the screenshot should not be hyphenated.
More comments from @KHammerstein:
Visit http://dictionary.reference.com/browse/Supercalifragilisticexpialidocious?s=t on a small screen device. Their implementation is unique and can't be easily replicated.
@KHammerstein, I haven't been able to work on it. @Jhernandez, should we pull it in the next sprint? @phuedx?
The following resources might be helpful here:
It's worth noting that at the moment we [apply hyphens: auto to the title](https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/resources/skins.minerva.content.styles/headings.less#L44) 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 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.
Change 240370 had a related patch set uploaded (by Phuedx):
Break all headings across lines
240370 caused a styling regression wherein overlay headings have the wrong font-family.