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

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

ClearType needs an opaque, known background to filter against; with none, its
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, sets GRAYSCALE, and restores - mirroring the GetAntialiasMode/
SetAntialiasMode and GetDpi/SetDpi save/restore idioms already in this function.

0.83-stable twin of #16341. Addresses #16340. Verified this branch has the same
omission at the same line: SetTextAntialiasMode and D2D1_TEXT_ANTIALIAS_MODE
have zero occurrences here too.

Author: FaithfulAudio

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

@@ -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"}

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