[Fabric] Implement minimumFontScale in Text (#14617)

Author: anupriya13

change/react-native-windows-16b2c3a5-029f-4454-a2bc-d6a1861a5aab.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implement minimumFontScale in Text",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/text.tsx

@@ -21,7 +21,10 @@ export default class Bootstrap extends React.Component {
           Click here : This is a text with a tooltip.
         </Text>
         <View style={styles.container2}>
-          <Text adjustsFontSizeToFit style={{maxHeight: 80, fontSize: 72}}>
+          <Text
+            adjustsFontSizeToFit
+            style={{maxHeight: 80, fontSize: 72}}
+            minimumFontScale={0.5}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -231,8 +231,14 @@ void TextLayoutManager::GetTextLayout(
 
   TextMeasurement::Attachments attachments;
   if (paragraphAttributes.adjustsFontSizeToFit) {
+    auto minimumFontScale = 0.01f;
+    // Uncomment below part when minimumFontScale is available in ParagraphAttributes
+    // if (paragraphAttributes.minimumFontScale && paragraphAttributes.minimumFontScale >= 0.01f &&
+    //    paragraphAttributes.minimumFontScale <= 1.0f) {
+    //  minimumFontScale = paragraphAttributes.minimumFontScale;
+    //}
     GetTextLayoutByAdjustingFontSizeToFit(
-        attributedStringBox, paragraphAttributes, layoutConstraints, spTextLayout, attachments);
+        attributedStringBox, paragraphAttributes, layoutConstraints, spTextLayout, attachments, minimumFontScale);
   } else {
     GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
   }
@@ -243,52 +249,63 @@ void TextLayoutManager::GetTextLayoutByAdjustingFontSizeToFit(
     const ParagraphAttributes &paragraphAttributes,
     LayoutConstraints layoutConstraints,
     winrt::com_ptr<IDWriteTextLayout> &spTextLayout,
-    TextMeasurement::Attachments &attachments) noexcept {
+    TextMeasurement::Attachments &attachments,
+    float minimumFontScale) noexcept {
   /* This function constructs a text layout from the given parameters.
   If the generated text layout doesn't fit within the given layout constraints,
   it will reduce the font size and construct a new text layout. This process will
   be repeated until the text layout meets the constraints.*/
 
   DWRITE_TEXT_METRICS metrics;
 
-  // Better Approach should be implemented , this uses O(n)
-  do {
-    if (spTextLayout) // Font Size reduction
-    {
-      constexpr auto fontReduceFactor = 1.0f;
-
-      auto attributedStringToResize = attributedStringBox.getValue();
+  // Better Approach should be implemented, this uses O(n)
+  constexpr auto fontReduceFactor = 1.0f;
+  auto attributedStringToResize = attributedStringBox.getValue();
+  auto fragmentsCopyToResize = attributedStringToResize.getFragments();
+  if (fragmentsCopyToResize.empty()) {
+    return; // No fragments to process
+  }
 
-      auto fragmentsCopyToResize = attributedStringToResize.getFragments();
+  float initialFontSize = fragmentsCopyToResize[0].textAttributes.fontSize;
+  float currentFontSize = initialFontSize;
 
-      attributedStringToResize.getFragments().clear();
+  // Calculate the minimum font size as per Android/IOS
+  float minimumFontSize = std::max(minimumFontScale * initialFontSize, 4.0f);
 
-      for (auto fragment : fragmentsCopyToResize) {
-        fragment.textAttributes.fontSize -= fontReduceFactor;
+  // Initial measurement
+  GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
+  if (spTextLayout) {
+    winrt::check_hresult(spTextLayout->GetMetrics(&metrics));
+  } else {
+    return;
+  }
 
-        attributedStringToResize.appendFragment(std::move(fragment));
-      }
-      attributedStringBox = facebook::react::AttributedStringBox(attributedStringToResize);
+  // Loop until the font size is reduced to the minimum or the layout fits
+  while ((currentFontSize > minimumFontSize) &&
+         ((paragraphAttributes.maximumNumberOfLines != 0 &&
+           paragraphAttributes.maximumNumberOfLines < static_cast<int>(metrics.lineCount)) ||
+          metrics.height > metrics.layoutHeight || metrics.width > metrics.layoutWidth)) {
+    // Reduce the font size by 1 point (or a configurable factor)
+    currentFontSize = std::max(currentFontSize - fontReduceFactor, minimumFontSize);
+
+    // Adjust font size for all fragments proportionally
+    attributedStringToResize.getFragments().clear();
+    for (auto fragment : fragmentsCopyToResize) {
+      fragment.textAttributes.fontSize =
+          std::max(fragment.textAttributes.fontSize * (currentFontSize / initialFontSize), minimumFontSize);
+      attributedStringToResize.appendFragment(std::move(fragment));
     }
 
-    GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
+    attributedStringBox = facebook::react::AttributedStringBox(attributedStringToResize);
 
+    // Re-measure the text layout
+    GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
     if (spTextLayout) {
-      const auto defaultMinFontSize = 2.0f;
-
-      // TODO : changes for minimumFontScale prop can be added.
-
-      if (spTextLayout->GetFontSize() <= defaultMinFontSize) {
-        break; // reached minimum font size , so no more size reducing
-      }
       winrt::check_hresult(spTextLayout->GetMetrics(&metrics));
     } else {
       return;
     }
-
-  } while ((paragraphAttributes.maximumNumberOfLines != 0 &&
-            paragraphAttributes.maximumNumberOfLines < static_cast<int>(metrics.lineCount)) ||
-           metrics.height > metrics.layoutHeight || metrics.width > metrics.layoutWidth);
+  }
 }
 
 // measure entire text (inluding attachments)

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.h

@@ -93,7 +93,8 @@ class TextLayoutManager {
       const ParagraphAttributes &paragraphAttributes,
       LayoutConstraints layoutConstraints,
       winrt::com_ptr<IDWriteTextLayout> &spTextLayout,
-      TextMeasurement::Attachments &attachments) noexcept;
+      TextMeasurement::Attachments &attachments,
+      float minimumFontScale) noexcept;
 
 #pragma endregion