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.
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).
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.
Created attachment 338957 [details]
Looks like an issue with glyph overflow
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!
It works fine when kerning is off.
Is this a recent regression?
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.
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.
Created attachment 379716 [details]
test case screenshot
Screenshot of previous test case in various browsers.
It also happens in Safari on iOS 12 on my iPad.
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?
Nevermind, I did something wrong when testing it. Workaround works fine in iframes!
Created attachment 379793 [details]
Updated test case with workaround