Bug 185056 – Certain glyphs are being cut off when they appear at the beginning or end of a line in a column

• Component: Layout and Rendering
• Status: NEW

[Brad Andalman]

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.

[Brad Andalman]

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).

[Brad Andalman]

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.

[Radar WebKit Bug Importer]

<rdar://problem/39779129>

[alan]

Created attachment 338957 [details]
Test reduction

Looks like an issue with glyph overflow

[Brad Andalman]

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!

[alan]

It works fine when kerning is off.

[Jon Lee]

Is this a recent regression?

[Brad Andalman]

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.

[djazz]

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.

[djazz]

Created attachment 379716 [details]
test case screenshot

Screenshot of previous test case in various browsers.

[djazz]

It also happens in Safari on iOS 12 on my iPad.

[djazz]

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?

[djazz]

Nevermind, I did something wrong when testing it. Workaround works fine in iframes!

[djazz]

Created attachment 379793 [details]
Updated test case with workaround

[Ahmad Saleem]

Created attachment 460242 [details]
All browsers differ

Based on attached test case in Comment 05, I noticed that Safari 15.5 and all other browser differ slightly.

For first letter, Chrome Canary and Firefox Nightly has same behavior as shown in the screenshot but last character overflow is not consistent across browsers.

Is it webcompat issue or spec issue? Thanks!