Bug 185469 - auto hyphenation breaks Flynn as Fly-nn
Summary: auto hyphenation breaks Flynn as Fly-nn
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-05-09 04:41 PDT by Derk-Jan Hartman
Modified: 2018-05-09 13:15 PDT (History)
2 users (show)

See Also:

screenshot of strange line break with auto hyphenation (232.43 KB, image/png)
2018-05-09 04:41 PDT, Derk-Jan Hartman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Derk-Jan Hartman 2018-05-09 04:41:23 PDT
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., MacOS 10.12.6 (16G1212).

Also reproducible in latests versions of iOS/Safari.
Comment 1 Derk-Jan Hartman 2018-05-09 04:43:23 PDT
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.
Comment 2 Myles C. Maxfield 2018-05-09 12:59:55 PDT
We (the macOS and iOS ports) get our hyphenation rules from the platform (CoreFoundation).
Comment 3 Derk-Jan Hartman 2018-05-09 13:05:01 PDT
So I guess CFStringGetHyphenationLocationBeforeIndex ?
Comment 4 Radar WebKit Bug Importer 2018-05-09 13:15:04 PDT