Bug 222734 - No kerning between inline elements
Summary: No kerning between inline elements
Status: RESOLVED DUPLICATE of bug 6148
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-03-04 06:08 PST by Bence Meszaros
Modified: 2021-03-12 18:21 PST (History)
4 users (show)

See Also:

Attachments
Kerning issue is visible in Safari 14.0.3 (dev tools open to show source) (53.61 KB, image/png)
2021-03-04 06:08 PST, Bence Meszaros 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Bence Meszaros 2021-03-04 06:08:59 PST 
Created attachment 422219 [details]
Kerning issue is visible in Safari 14.0.3 (dev tools open to show source)

Hi,

WebKit does not apply kerning between inline elements. To reproduce the issue, add two inline elements (e.g. span) inside a block (p, h1, h2, ...) that contain a continuous text and the kerning issue is clearly visible when the text is rendered on screen.

This is an example (with no CSS, no JS, everything is default in the document):

<html>
    <head>
    </head>
    <body>
        <p><span>HA</span><span>W</span><span>AII</span></p>
        <p>HAWAII</p>
    </body>
</html>

This is a slightly different example with only one inline element, but the issue is the same:

<html>
    <head>
    </head>
    <body>
        <p>HA<span>W</span>AII</p>
        <p>HAWAII</p>
    </body>
</html>

The second p element with the same text is for reference. Blink seems to be unaffected (Chrome 88.0.4324.192).
Comment 1 Radar WebKit Bug Importer 2021-03-11 06:09:13 PST 
<rdar://problem/75313222>
Comment 2 Myles C. Maxfield 2021-03-12 18:21:06 PST 

*** This bug has been marked as a duplicate of bug 6148 ***