Bug 222548

Summary:

word-wrap/overflow-wrap "overwrite" hyphens

Product:

WebKit

Reporter:

p.eberle

Component:

CSS

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

koivisto, mmaxfield, simon.fraser, smoley, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 10.15

See Also:

https://bugs.webkit.org/show_bug.cgi?id=223402

Attachments:

Description	Flags
Only some words are hyphenated	none
Patch	none
WIP hyphenation	none
Patch	none
Patch	none
Patch	none

p.eberle

Reported 2021-03-01 05:38:47 PST

Created attachment 421813 [details] Only some words are hyphenated If `word-wrap: break-word` and/or `overflow-wrap: break-word` are use on an element, that already was defined with `hyphens: auto`, the first two properties have a higher priority, so that hyphenation is (mostly) not applied. When tested in Firefox, Chrome and Edge the hyphenation is still working. The combination of word-wrap, overflow-wrap and hyphens is sometimes needed if older, non-hyphens aware browsers need to be supported. See the following link for a working example: https://codepen.io/patric-eberle/pen/poNLMyz Expected: First, 'hyphens' are applied, then, if a word is still too wide to fix the container, 'break-word' is applied. iOS Safari has the same issue.

Attachments
Only some words are hyphenated (38.34 KB, image/png) 2021-03-01 05:38 PST, p.eberle	no flags	Details
Patch (13.82 KB, patch) 2021-03-04 21:05 PST, alan	no flags	Details Formatted Diff Diff
WIP hyphenation (196.84 KB, image/png) 2021-03-04 21:07 PST, alan	no flags	Details
Patch (16.76 KB, patch) 2021-03-05 10:14 PST, alan	no flags	Details Formatted Diff Diff
Patch (16.76 KB, patch) 2021-03-05 11:01 PST, alan	no flags	Details Formatted Diff Diff
Patch (16.76 KB, patch) 2021-03-05 14:04 PST, alan	no flags	Details Formatted Diff Diff
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.

Smoley

Comment 1 2021-03-04 15:44:41 PST

Thanks for filing, I can reproduce this on Safari 14.0.3 and STP 121 (14.2). Does not appear to reproduce on Safari 13.1.3.

Radar WebKit Bug Importer

Comment 2 2021-03-04 15:44:52 PST

<rdar://problem/75061741>

alan

Comment 3 2021-03-04 19:53:48 PST

ok, so according to https://drafts.csswg.org/css-text-3/#hyphenation "overflow-wrap/word-wrap property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow, when an otherwise-unbreakable string is too long to fit within the line box." which means that in case of "hyphen: auto", we should only try to break the content at arbitrary position when there's no prior hyphenation opportunity. That's not what we do currently.

alan

Comment 4 2021-03-04 21:05:08 PST

Created attachment 422333 [details] Patch

alan

Comment 5 2021-03-04 21:07:26 PST

WIP patch.

alan

Comment 6 2021-03-04 21:07:46 PST

Created attachment 422334 [details] WIP hyphenation

alan

Comment 7 2021-03-05 10:14:17 PST

Created attachment 422378 [details] Patch