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

RenderText calls ID2D1RenderTarget::DrawTextLayout without setting a text
antialias mode, so the draw inherits the device context default - ClearType
subpixel antialiasing on a normal machine. The target it draws onto is
transparent: ParagraphComponentView creates the drawing surface with
DirectXAlphaMode::Premultiplied and clears it to ColorF(Black, 0.0f) when the
view has no backgroundColor.

ClearType computes independent R/G/B coverage and needs an opaque, known
background to filter against. With none, that per-channel coverage lands in the
surface colour channels and shows as dark or colour-tinted fringes along thin
glyph stems once composited. D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE is the
documented mode for transparent render targets.

Saves the current mode, sets GRAYSCALE for the draw, and restores it - mirroring
the GetAntialiasMode/SetAntialiasMode and GetDpi/SetDpi save/restore idioms
already used in this function.

Neither SetTextAntialiasMode nor D2D1_TEXT_ANTIALIAS_MODE appeared anywhere in
the tree before this change.

Addresses #16340.

Author: FaithfulAudio

change/react-native-windows-fix-text-cleartype-fringing.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Draw Fabric text with grayscale antialiasing instead of inheriting ClearType, which fringes thin glyphs on transparent composition surfaces",
+  "packageName": "react-native-windows",
+  "email": "collindanielschneide@gmail.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp

@@ -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);
 }