Skip to content

fix(text): draw Fabric text with grayscale antialiasing on transparent composition surfaces #16343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FaithfulAudio wants to merge 1 commit into
base: 0.83-stable
Choose a base branch
from
+13 −0
Open

fix(text): draw Fabric text with grayscale antialiasing on transparent composition surfaces #16343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions change/react-native-windows-fix-text-cleartype-fringing-083.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"packageName":"react-native-windows","comment":"Fix(text): draw Fabric text with grayscale antialiasing on transparent composition surfaces, preventing ClearType colour fringing on thin glyph stems","type":"patch","dependentChangeType":"patch","email":"collindanielschneide@gmail.com"}
12 changes: 12 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,12 +165,24 @@ void RenderText(
position += length;
}

// The composition drawing surface this text lands on is premultiplied-alpha and is transparent
// wherever the view has no opaque background; the surface is then composited by the visual tree,
// possibly under an opacity or a transform. ClearType subpixel antialiasing has no valid opaque
// background to filter against in that situation, and its per-channel coverage survives into the
// surface's color channels as dark/colored fringes along thin glyph stems. Grayscale antialiasing
// is the correct mode for transparent render targets, so ask for it explicitly rather than
// inheriting whatever the device context defaults to.
auto oldTextAntialiasMode = deviceContext.GetTextAntialiasMode();
deviceContext.SetTextAntialiasMode(D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE);

// Draw the line of text at the specified offset, which corresponds to the top-left
// corner of our drawing surface. Notice we don't call BeginDraw on the D2D device
// context; this has already been done for us by the composition API.
deviceContext.DrawTextLayout(
D2D1::Point2F(offsetX, offsetY), &textLayout, brush.get(), D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT);

deviceContext.SetTextAntialiasMode(oldTextAntialiasMode);

// restore dpi to old state
deviceContext.SetDpi(oldDpiX, oldDpiY);
}
Expand Down