Text at margin edge gets cut off

[daniel-j]

Some font glyphs can appear outside the margin, such as the letter f, and it's more visible with italic text. It happens on both side of a page, although it's most visible on the right side.

The issue can be seen on the Foliate screenshots (the word 'of').

Here is a screenshot of mine. Increased the font to make it more visible.

I found Foliate the other day and started testing my ebooks with it. I think it's the best ereader currently on the Linux desktop. Keep up the good work!

[daniel-j]

Looks like this is an issue with WebKit-based webviews. I did a small sample webpage to demonstrate the issue. It can be worked around though, by adding a wrapper to the body (view source. textbox2 should be the body element in a real case scenario).
Demonstration page: https://djazz.se/files/testcss.html
EPUB: https://djazz.se/files/testcase.epub

Made an issue over at epub.js: futurepress/epub.js#983
WebKit bug report: https://bugs.webkit.org/show_bug.cgi?id=185056 (from over a year ago)

[daniel-j]

Inspected an ebook with Apple Books and found out about -webkit-line-box-contain: block glyphs replaced; that they set on the html element. This fixes the rendering issue if I set that on the CSS of my test page.
EDIT: I tried to set this on the body style of an epub and it renders correctly. Does not fix glyph overflow in vertical mode though.