Problem
The current browser renders like this:
Expected:
Details
HTML
A string has the following characters:
<p>A B</p>((There is an additional space between the characters in the code. This is to prevent the substitution here.))
Font
The font has a substitution (inside the liga feature of
the font):
sub A' B by C;If the characters render next to each other the first character is replaced by the ligature feature of the font. See OpenType Docs (Microsoft) – Registered features.
The renderer therefore shows:
Formatting A · span
If the string gets formated in CSS with
.red { color: red; }<span class="red">A</span><span>B</span>The current browser renders like this:
Expected:
Formatting B · pseudo-class
If the string gets formated in CSS with
.bug-active::first-letter { color: red; }<p class="bug-active">AB</p>The current browser renders like this:
Expected:
Renderings
Screenshots taken on real devices
Incorrect rendering
Safari 12.0 (14606.1.36.1.9) on MacOS 10.14
Apple TextEdit 1.14 (340) on MacOS 10.14
Correct rendering
Google Chrome 78.0.3904.87 on MacOS 10.14
Firefox 61.0.2 on MacOS 10.14
Adobe InDesign CC Version 13.1 on MacOS 10.14
