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

[FaithfulAudio]

Draw Fabric text with grayscale antialiasing instead of inheriting ClearType

Problem

Text drawn by the new-architecture (Fabric / Composition) text stack shows dark or colour-tinted
fringes along thin glyph stems — most visible on light backgrounds, on hairline strokes, on icon
fonts, and at fractional DPI. The text looks slightly "dirty" or double-struck rather than cleanly
antialiased.

Root cause

RenderText in vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp never sets a text
antialias mode before ID2D1RenderTarget::DrawTextLayout, so the draw runs with whatever mode the
device context happens to carry — in practice the system default, which is ClearType when the user
has ClearType enabled (the normal Windows setting).

ClearType is subpixel filtering: it computes separate R, G and B coverage and needs an opaque,
known background to filter against. This draw has no such background:

• ParagraphComponentView::updateVisualBrush creates the target surface as
  CreateDrawingSurfaceBrush(surfaceSize, DirectXPixelFormat::B8G8R8A8UIntNormalized, DirectXAlphaMode::Premultiplied)
  (ParagraphComponentView.cpp, ~L367-370) — premultiplied alpha.
• ParagraphComponentView::DrawText clears that surface to D2D1::ColorF(D2D1::ColorF::Black, 0.0f)
  — fully transparent black — whenever the view has no backgroundColor (ParagraphComponentView.cpp, ~L521-523).
• The surface is then composited by the visual tree, potentially under an opacity or a transform,
  over content this device context cannot sample.

Per-channel coverage computed against "nothing" survives into the surface's colour channels and
reads as coloured/dark fringing once composited. D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE is the mode
intended for transparent render targets.

Scope note from a repo-wide search at c69cf55f67f9b03f467502dac1007ac2d9ebe209: neither
SetTextAntialiasMode nor D2D1_TEXT_ANTIALIAS_MODE occurs anywhere in the tree, so no part of
RNW currently makes this choice explicitly.

Fix

Save the current text antialias mode, force D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE for the
DrawTextLayout call, and restore it afterwards. GetTextAntialiasMode / SetTextAntialiasMode
are ID2D1RenderTarget members (D2D 1.0), and the save/force/restore shape deliberately mirrors
the two idioms already used a few lines above in the same function: GetAntialiasMode /
SetAntialiasMode / restore around the selection-highlight rectangles (L142-160) and
GetDpi / SetDpi / restore around the whole body (L31-32, L175). Twelve added lines, one file,
no signature or header changes.

Validation

Honest limits — nothing here was compiled or run:

• Not compiled. Not run. No screenshots, no before/after captures.
• yarn lint, yarn format:verify, clang-format and typecheck were not run.
• The patch was authored against the exact raw.githubusercontent.com bytes of
  TextDrawing.cpp at c69cf55f67f9b03f467502dac1007ac2d9ebe209 and verified only mechanically:
  • git apply --check against a pristine scratch copy (core.autocrlf false): exit 0.
  • Real git apply: exit 0, producing a file with 0 CRLF sequences (source is LF-only:
    178 LF before, 190 after).
  • Repeated against a CRLF-converted working copy with core.autocrlf true (what a normal
    checkout produces, since .gitattributes declares *.cpp text eol=crlf):
    git apply --check exit 0 there too.
  • Longest added line is 100 columns, inside the repo's 120-column clang-format limit — but this
    is a hand count, not a clang-format run.

Reviewer-facing caveats, stated plainly because they are judgement calls rather than measurements:

1. The change is unconditional, and that is a trade-off. A <Text> with an opaque
   backgroundColor currently gets ClearType and will now get grayscale — very slightly softer.
   I chose unconditional because the surface is premultiplied and composited by the visual tree
   regardless of the clear colour, so ClearType is not reliably valid even in that case, and
   because making it conditional would mean threading the view's background/opacity into
   RenderText, which is called from four places (ParagraphComponentView, DebuggerUIIsland,
   TooltipService, ReactNativeIsland). If maintainers prefer the conditional version, say so
   and I will rework it.
2. I have not measured how much of this the D2D default already does. D2D may coerce toward
   grayscale on some premultiplied targets; if it does on the surfaces RNW uses, this change is a
   no-op for pixels and its value is only determinism (no dependence on the user's font-smoothing
   setting). I could not confirm either way without running the app, so I am not claiming a
   measured pixel improvement.
3. Two sibling call sites are deliberately left alone, and they have the identical gap:
   ScrollViewComponentView.cpp (~L529, scrollbar arrow glyphs) and
   TextInput/WindowsTextInputComponentView.cpp (~L1870, the placeholder text — the editable text
   itself goes through RichEdit, not DrawTextLayout). Kept out to keep this diff to one
   reviewable file; happy to extend it in this PR or a follow-up, whichever maintainers prefer.

Change file

change/react-native-windows-fix-text-cleartype-fringing.json, "type": "prerelease" (correct for
main, whose vnext/package.json version is 0.0.0-canary.1057; the repo's beachball transform
downgrades prerelease to patch automatically on released branches).

Microsoft Reviewers: Open in CodeFlow

[azure-pipelines]

Azure Pipelines:
There may be pipelines that require an authorized user to comment /azp run to run.