| Summary: | Certain glyphs are being cut off when they appear at the beginning or end of a line in a column | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Brad Andalman <bya> | ||||||||||||||||||||
| Component: | Layout and Rendering | Assignee: | Myles C. Maxfield <mmaxfield> | ||||||||||||||||||||
| Status: | NEW --- | ||||||||||||||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, bw, djazz, jonlee, mmaxfield, simon.fraser, webkit-bug-importer, zalan | ||||||||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||||||||
| Version: | Safari 11 | ||||||||||||||||||||||
| Hardware: | Unspecified | ||||||||||||||||||||||
| OS: | Unspecified | ||||||||||||||||||||||
| Attachments: |
|
||||||||||||||||||||||
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]
Test reduction
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
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! |
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.