Bug 208845

Summary: Text layout miscalculates the number of lines that can fit in a single column
Product: WebKit Reporter: Brad Andalman <bya>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: Mac   
OS: macOS 10.15   
Attachments:
Description Flags
All (full) columns should have 10 lines
none
Screenshot with guide that shows text in the 2nd column that has been shifted down none

Brad Andalman
Reported 2020-03-09 18:10:20 PDT
Created attachment 393103 [details] All (full) columns should have 10 lines I have a multi-column layout where the column-height is evenly divided by the line-height. In the attached HTML, each column has a height 390px and contains text that has a line-height of 39px. I'd therefore expect exactly 10 lines in each (full) column. That is true for the first column, but subsequent columns only display 9 lines. Somewhat surprisingly, this seems to be dependent upon the font-family and font-size. You can see this in the attached HTML. For Avenir, a font-size of 29px exhibits the bug; for Helvetica, a font size of 35px exhibits it. This shouldn't be the case: since line-height is specified, changing these font attributes shouldn't affect the number of lines that can fit in a single column. In fact, InDesign, Chrome, and Edge all behave as expected.
Attachments
All (full) columns should have 10 lines (8.99 KB, text/html)
2020-03-09 18:10 PDT, Brad Andalman 		no flags
Details
Screenshot with guide that shows text in the 2nd column that has been shifted down (188.43 KB, image/png)
2022-06-16 12:05 PDT, Brad Andalman 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-03-09 18:40:16 PDT
<rdar://problem/60254656>
Brad Andalman
Comment 2 2022-06-16 12:00:08 PDT
I recently looked into this bug again, and the unequal number of lines per column seems to happen because the text in subsequent columns (i.e. all but the first) is shifted down one pixel. When the line height divides the available height evenly, this means that we can't fit the expected number of lines of text. However, you can still see this pixel shift when I increase the body height and the columns all show the same number of lines. I'm attaching a screenshot that illustrates this.
Brad Andalman
Comment 3 2022-06-16 12:05:22 PDT
Created attachment 460274 [details] Screenshot with guide that shows text in the 2nd column that has been shifted down I modified the HTML in the first attachment so that the height of the column is 395px, which means that the line-height no longer divides the height evenly. Though the columns all show the same number of lines, you can see that the text in the second column (and the ones after) are incorrectly shifted down a pixel.
Brad Andalman
Comment 4 2022-06-16 12:05:40 PDT
I forgot to mention that I tested in Ventura, and this bug persists.
Note You need to log in before you can comment on or make changes to this bug.