Bug 185056 - Certain glyphs are being cut off when they appear at the beginning or end of a line in a column
Summary: Certain glyphs are being cut off when they appear at the beginning or end of ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Myles C. Maxfield
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-04-26 15:28 PDT by Brad Andalman
Modified: 2019-09-28 13:13 PDT (History)
8 users (show)

See Also:


Attachments
Column with cut-off f and j (806 bytes, text/plain)
2018-04-26 15:28 PDT, Brad Andalman
no flags Details
Rendering of cut-off f (in "sfouf") and j (in "jujubes") (56.57 KB, image/png)
2018-04-26 15:30 PDT, Brad Andalman
no flags Details
Screenshot of correct glyph rendering (56.53 KB, image/png)
2018-04-26 15:34 PDT, Brad Andalman
no flags Details
Test reduction (221 bytes, text/html)
2018-04-26 20:00 PDT, zalan
no flags Details
Test reduction with first and last letter cut off (246 bytes, text/html)
2018-04-26 20:20 PDT, Brad Andalman
no flags Details
test case and workaround (2.75 KB, text/html)
2019-09-27 03:02 PDT, djazz
no flags Details
test case screenshot (87.19 KB, image/png)
2019-09-27 03:03 PDT, djazz
no flags Details
Updated test case with workaround (3.91 KB, text/html)
2019-09-28 13:13 PDT, djazz
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Brad Andalman 2018-04-26 15:28:00 PDT
Created attachment 338926 [details]
Column with cut-off f and j

When using a multi-column layout, a glyph may be cut off if it is the first or last letter in a line. This is especially noticeable in a font like Baskerville, which has letters with instrokes and outstrokes that extend beyond the core of the glyph.

For instance, the terminal of the f will be cut off when it appears at the end of a line and the tail of a j will be cut off when it appears at the beginning. I've attached some very simple code that illustrates this.
Comment 1 Brad Andalman 2018-04-26 15:30:44 PDT
Created attachment 338927 [details]
Rendering of cut-off f (in "sfouf") and j (in "jujubes")

Here's a screenshot that shows the cut-off f (in "sfouf" in the penultimate line) and j (in "jujubes" in the fifth line).
Comment 2 Brad Andalman 2018-04-26 15:34:03 PDT
Created attachment 338929 [details]
Screenshot of correct glyph rendering

By adding a padding-left and padding-right of 4px, and then increasing the column width by 8px, the glyphs will not be cut off. This is not a real fix, but I've included it to illustrate the correct rendering.
Comment 3 Radar WebKit Bug Importer 2018-04-26 18:38:46 PDT
<rdar://problem/39779129>
Comment 4 zalan 2018-04-26 20:00:55 PDT
Created attachment 338957 [details]
Test reduction

Looks like an issue with glyph overflow
Comment 5 Brad Andalman 2018-04-26 20:20:04 PDT
Created attachment 338958 [details]
Test reduction with first and last letter cut off

Just wanted to follow up because I noticed that you mentioned "overflow" in your previous attachment. I made a slight change to your test reduction which illustrates both the _j_ and the _f_ being cut off. Not sure if the _j_ counts as "overflow," so I thought it was worth updating.

Thanks for looking at this!
Comment 6 zalan 2018-04-26 20:42:26 PDT
It works fine when kerning is off.
Comment 7 Jon Lee 2018-05-08 16:22:31 PDT
Is this a recent regression?
Comment 8 Brad Andalman 2018-05-09 11:59:43 PDT
This does not appear to be a recent regression. I've tested this in Coda on El Capitan (10.11.6), and the bug appears there as well.
Comment 9 djazz 2019-09-27 03:02:38 PDT
Created attachment 379715 [details]
test case and workaround

This is still an issue, tested in GNOME Epiphany on Ubuntu 19.04. See attachment for a test page.
Comment 10 djazz 2019-09-27 03:03:57 PDT
Created attachment 379716 [details]
test case screenshot

Screenshot of previous test case in various browsers.
Comment 11 djazz 2019-09-27 04:56:14 PDT
It also happens in Safari on iOS 12 on my iPad.
Comment 12 djazz 2019-09-28 11:47:42 PDT
I noticed it does not happen in Apple Books and I found that they set `-webkit-line-box-contain: block glyphs replaced;`. Overriding this and the clipping issue comes back.
I tried to do the same fix in epub.js, but it does not work in iframes. How does Apple Books do paginated layout? I can't find any CSS using the built-in inspector telling how. Is it a Webkit setting somewhere?
Comment 13 djazz 2019-09-28 13:11:19 PDT
Nevermind, I did something wrong when testing it. Workaround works fine in iframes!
Comment 14 djazz 2019-09-28 13:13:13 PDT
Created attachment 379793 [details]
Updated test case with workaround