| Summary: | text-emphasis only uses the first character in the grapheme cluster | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | yisibl <50167214> | ||||||
| Component: | Text | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | ap, fantasai.bugs, karlcow, koivisto, ntim, vitor.roriz, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||
| Version: | Safari Technology Preview | ||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
This is not just emoji with variation selectors. Same issue with e.g. decomposed é, or regional indicators like 🇷🇺. Created attachment 472406 [details]
test case
Same test as attachment.
Looks like drawEmphasisMarks is broken. using drawBidiText instead makes the bug go away (note that this is not a fix proposal)
diff --git a/Source/WebCore/rendering/TextPainter.cpp b/Source/WebCore/rendering/TextPainter.cpp
index 8a84ad92b70b..4be4f964b5b9 100644
--- a/Source/WebCore/rendering/TextPainter.cpp
+++ b/Source/WebCore/rendering/TextPainter.cpp
@@ -117,7 +117,7 @@ void TextPainter::paintTextOrEmphasisMarks(const FontCascade& font, const TextRu
}
if (!emphasisMark.isEmpty())
- m_context.drawEmphasisMarks(font, textRun, emphasisMark, textOrigin + FloatSize(0, emphasisMarkOffset), startOffset, endOffset);
+ m_context.drawBidiText(font, TextRun { emphasisMark.string() }, textOrigin + FloatSize(0, emphasisMarkOffset));
else if (startOffset || endOffset < textRun.length() || !m_glyphDisplayList)
m_context.drawText(font, textRun, textOrigin, startOffset, endOffset);
else {
Maybe we use the wrong font? Seeing this FIXME comment in getEmphasisMarkGlyphData does not give me too much confidence. // FIXME: This function may not work if the emphasis mark uses a complex script, but none of the // standard emphasis marks do so. std::optional<GlyphData> FontCascade::getEmphasisMarkGlyphData(const AtomString& mark) const |
Created attachment 472401 [details] text-emphasis-emoji Open the following code in Safari and you'll see that the text-emphasis is only rendered to `U+2764` data:text/html;charset=UTF-8,<!doctype html> <style> .foo { font-size: 52px; border: solid 1px blue; text-emphasis-style: "❤️"; display: inline; } </style> <div class="foo">test emoji❤️</div> ❤️ This emoji actually contains two characters: `U+2764` `U+FE0F`