Bug 185469 – auto hyphenation breaks Flynn as Fly-nn

• Component: Text
• Status: RESOLVED CONFIGURATION CHANGED

[Derk-Jan Hartman]

Created attachment 339953 [details]
screenshot of strange line break with auto hyphenation

The attached screenshot shows a portion of html with -webkit-hyphens:auto; enabled.
The entire page is marked with lang="en"

The auto hyphenation decides to break on Flynn and renders Fly-nn. This seems like a strange result. This is a single syllable word as far as I can determine, IPA /flɪn/. It's also not as if it really has to make a HARD line break and ignore the dictionary rules, there are plenty of other opportunities for breaking the line in that area.

This therefor seems like an error in the dictionary or the Syllabification algorithm.

Safari Version 11.1 (12605.1.33.1.4), MacOS 10.12.6 (16G1212).

Also reproducible in latests versions of iOS/Safari.

[Derk-Jan Hartman]

Computed CSS:
-webkit-hyphens: auto;
-webkit-locale: en-US;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(34, 34, 34);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(34, 34, 34);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(34, 34, 34);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(34, 34, 34);
border-top-style: none;
border-top-width: 0px;
color: rgb(34, 34, 34);
display: block;
font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
font-size: 16px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-weight: normal;
height: 416px;
line-height: 26px;
margin-bottom: 16px;
margin-left: 0px;
margin-right: 0px;
margin-top: 8px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: baseline;
width: 457px;
word-wrap: break-word;


And not ­ or something similar. Disabling word-wrap: break-word; also didn't make a difference.

[Myles C. Maxfield]

We (the macOS and iOS ports) get our hyphenation rules from the platform (CoreFoundation).

[Derk-Jan Hartman]

So I guess CFStringGetHyphenationLocationBeforeIndex ?

[Radar WebKit Bug Importer]

<rdar://problem/40103508>

[Ahmad Saleem]

Added URL to test.

[fantasai]

This seems to work fine now:
  https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22width%3A%200%3B%20hyphens%3A%20auto%22%3EFlynn%20hyphenation%3C%2Fdiv%3E%0A

Closing, re-open if there remains an issue.