react-native-advanced-text 0.2.3 → 0.2.6

package/android/src/main/java/com/advancedtext/AdvancedTextView.kt

@@ -26,6 +26,7 @@ import android.text.Selection
 import android.graphics.Typeface
 import androidx.core.text.getSpans
 import com.facebook.react.common.assets.ReactFontManager
+import kotlin.math.ceil
 
 class AdvancedTextView : TextView {
 
@@ -294,7 +295,7 @@ class AdvancedTextView : TextView {
         }
 
 
-        setLineSpacing(0f, lineHeightMultiplier)
+        applyLineHeight(spannableString)
 
         // Android's letterSpacing is in em; the prop is in dp/points. The ratio
         // dp / fontSize is scale-invariant, so no density conversion is needed.
@@ -311,6 +312,41 @@ class AdvancedTextView : TextView {
         }
     }
 
+    /**
+     * Applies `lineHeightMultiplier` as a CSS-style, exact-per-line-height span
+     * instead of `setLineSpacing(0, multiplier)`.
+     *
+     * The Fabric ShadowNode measures `lineHeight` by asking React Native's own
+     * TextLayoutManager to lay out a fragment with that lineHeight -- which RN
+     * implements with its own CSS-style line-height span (every line's box is
+     * forced to exactly `lineHeight`, ascent/descent redistributed evenly).
+     * That is a *different* algorithm from `setLineSpacing`, which scales the
+     * font's natural per-line advance instead; the two do not produce the same
+     * total height, and the gap between them is added on every wrapped line,
+     * so it grows with text length. Using the same CSS-style algorithm here
+     * (see CssLineHeightSpan) keeps this view's rendered height identical to
+     * what was measured, regardless of how many lines the text wraps onto.
+     */
+    private fun applyLineHeight(spannableString: SpannableString) {
+        if (lineHeightMultiplier == 1.0f || spannableString.isEmpty()) {
+            return
+        }
+
+        val metrics = paint.fontMetricsInt
+        val naturalLineHeight = -metrics.ascent + metrics.descent
+        if (naturalLineHeight <= 0) {
+            return
+        }
+
+        val targetLineHeight = ceil(lineHeightMultiplier * naturalLineHeight).toInt()
+        spannableString.setSpan(
+            CssLineHeightSpan(targetLineHeight),
+            0,
+            spannableString.length,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+    }
+
     override fun onDraw(canvas: Canvas) {
         drawHighlightedWordBackgrounds(canvas)
         super.onDraw(canvas)

package/android/src/main/java/com/advancedtext/CssLineHeightSpan.kt

@@ -0,0 +1,47 @@
+package com.advancedtext
+
+import android.graphics.Paint
+import android.text.style.LineHeightSpan
+import kotlin.math.ceil
+import kotlin.math.floor
+
+/**
+ * A [LineHeightSpan] that forces every line's box to exactly [lineHeightPx],
+ * following CSS `line-height` semantics: the difference between the target
+ * height and the font's natural ascent+descent ("leading") is split evenly
+ * above and below, and the very first line's top / very last line's bottom
+ * are pinned back to the font's own ascent/descent so the half-leading at
+ * the block's own edges doesn't inflate its total height.
+ *
+ * This exists because `AdvancedTextView`'s Fabric ShadowNode measures the
+ * `lineHeight` prop through React Native's `TextLayoutManager`, which applies
+ * `lineHeight` using this exact CSS-style algorithm internally -- a different
+ * one from Android's own `TextView.setLineSpacing(0, multiplier)`. Rendering
+ * with `setLineSpacing` instead of this span made the real height diverge
+ * from the measured one by a per-line amount, which is why the discrepancy
+ * grew with the number of wrapped lines.
+ *
+ * See: https://www.w3.org/TR/css-inline-3/#inline-height
+ */
+internal class CssLineHeightSpan(private val lineHeightPx: Int) : LineHeightSpan {
+
+    override fun chooseHeight(
+        text: CharSequence,
+        start: Int,
+        end: Int,
+        spanstartv: Int,
+        v: Int,
+        fm: Paint.FontMetricsInt
+    ) {
+        val leading = lineHeightPx - ((-fm.ascent) + fm.descent)
+        fm.ascent -= ceil(leading / 2.0f).toInt()
+        fm.descent += floor(leading / 2.0f).toInt()
+
+        if (start == 0) {
+            fm.top = fm.ascent
+        }
+        if (end == text.length) {
+            fm.bottom = fm.descent
+        }
+    }
+}

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.cpp

@@ -11,6 +11,7 @@
 
 #include <algorithm>
 #include <cctype>
+#include <limits>
 #include <string>
 
 #include <react/renderer/attributedstring/AttributedStringBox.h>
@@ -32,6 +33,10 @@ std::string toLowerAscii(std::string value) {
   return value;
 }
 
+// Fallback only: an approximate ratio of a single line's natural height to
+// its font size, used if a real measurement (Android) isn't available/valid.
+constexpr Float kLineHeightFudgeFactor = 1.2;
+
 } // namespace
 
 AdvancedTextViewShadowNode::AdvancedTextViewShadowNode(
@@ -42,7 +47,54 @@ AdvancedTextViewShadowNode::AdvancedTextViewShadowNode(
           static_cast<const AdvancedTextViewShadowNode&>(sourceShadowNode)
               .textLayoutManager_) {}
 
-AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
+#if defined(ANDROID)
+Float AdvancedTextViewShadowNode::measureNaturalSingleLineHeight(
+    const LayoutContext& layoutContext,
+    const TextAttributes& baseTextAttributes) const {
+  // Same font/size/weight/style as the real fragment, but with `lineHeight`
+  // cleared so this reports the font's own, unscaled single-line height.
+  auto probeAttributes = baseTextAttributes;
+  probeAttributes.lineHeight = std::numeric_limits<Float>::quiet_NaN();
+
+  auto probe = AttributedString{};
+  probe.appendFragment(AttributedString::Fragment{
+      .string = "M",
+      .textAttributes = probeAttributes,
+      .parentShadowView = ShadowView(*this),
+  });
+
+  auto paragraphAttributes = ParagraphAttributes{};
+  // Measure the tight ascent+descent box (no extra top/bottom accent
+  // padding). This is the same "natural line height" basis
+  // CssLineHeightSpan.kt derives from `Paint.getFontMetricsInt()` on the
+  // view side (which is unaffected by `includeFontPadding`, a Layout-level
+  // setting) -- measuring with padding included here would double count it
+  // once per rendered line once the resulting value is multiplied and
+  // applied to the whole paragraph.
+  paragraphAttributes.includeFontPadding = false;
+
+  auto textLayoutContext = TextLayoutContext{};
+  textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
+  textLayoutContext.surfaceId = getSurfaceId();
+
+  // Unconstrained so a single glyph can never be forced to wrap.
+  auto unconstrainedLayoutConstraints = LayoutConstraints{
+      {0, 0},
+      {std::numeric_limits<Float>::infinity(),
+       std::numeric_limits<Float>::infinity()}};
+
+  auto measurement = textLayoutManager_->measure(
+      AttributedStringBox{probe},
+      paragraphAttributes,
+      textLayoutContext,
+      unconstrainedLayoutConstraints);
+
+  return measurement.size.height;
+}
+#endif
+
+AttributedString AdvancedTextViewShadowNode::getAttributedString(
+    const LayoutContext& layoutContext) const {
   const auto& props = getConcreteProps();
 
   auto textAttributes = TextAttributes::defaultTextAttributes();
@@ -68,13 +120,32 @@ AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
     textAttributes.letterSpacing = props.letterSpacing;
   }
 
-  if (props.lineHeight > 0) {
-    // The component treats `lineHeight` as a multiple of the font size
-    // (see AdvancedTextView.mm / AdvancedTextView.kt). `TextAttributes`
-    // expects an absolute value; approximate the platform default single
-    // line height as 1.2 * fontSize.
+  // The component treats `lineHeight` as a multiple of the font's own
+  // natural line height (see CssLineHeightSpan.kt on Android / the
+  // NSParagraphStyle-based spacing in AdvancedTextView.mm on iOS) -- NOT the
+  // absolute per-line value `TextAttributes.lineHeight` expects. A multiplier
+  // of 1 *is* the natural line height, so there is nothing to override in
+  // that case (overriding it with an approximation, as this used to do
+  // unconditionally, made even the "no lineHeight override" case measure
+  // taller or shorter than the real render).
+  if (props.lineHeight > 0 && props.lineHeight != 1.0) {
+#if defined(ANDROID)
+    // Android's natural single-line height depends on the resolved
+    // font/size/weight and isn't a fixed ratio of fontSize, so a constant
+    // approximation drifts from the real value CssLineHeightSpan.kt derives
+    // from Paint.getFontMetricsInt() -- by an amount that compounds with
+    // every wrapped line, which is why the error scaled with paragraph
+    // length. Measure the real natural height for these exact attributes
+    // instead, the same way the view derives it.
+    auto naturalLineHeight =
+        measureNaturalSingleLineHeight(layoutContext, textAttributes);
+    textAttributes.lineHeight = naturalLineHeight > 0
+        ? props.lineHeight * naturalLineHeight
+        : props.lineHeight * textAttributes.fontSize * kLineHeightFudgeFactor;
+#else
     textAttributes.lineHeight =
-        props.lineHeight * textAttributes.fontSize * 1.2;
+        props.lineHeight * textAttributes.fontSize * kLineHeightFudgeFactor;
+#endif
   }
 
   auto attributedString = AttributedString{};
@@ -109,7 +180,7 @@ Size AdvancedTextViewShadowNode::measureContent(
   textLayoutContext.surfaceId = getSurfaceId();
 
   auto measurement = textLayoutManager_->measure(
-      AttributedStringBox{getAttributedString()},
+      AttributedStringBox{getAttributedString(layoutContext)},
       paragraphAttributes,
       textLayoutContext,
       layoutConstraints);

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h

@@ -86,7 +86,20 @@ class AdvancedTextViewShadowNode final : public ConcreteViewShadowNode<
    * Builds a single-fragment `AttributedString` from the component props
    * (text + font attributes), mirroring how the native views render it.
    */
-  AttributedString getAttributedString() const;
+  AttributedString getAttributedString(const LayoutContext& layoutContext) const;
+
+#if defined(ANDROID)
+  /*
+   * Measures the natural (multiplier == 1) height of a single line set in
+   * `baseTextAttributes`, by measuring a single glyph with `lineHeight`
+   * cleared. Used to turn the component's `lineHeight` multiplier prop into
+   * the absolute value `TextAttributes.lineHeight` expects, using this
+   * font's *real* metrics instead of an approximation.
+   */
+  Float measureNaturalSingleLineHeight(
+      const LayoutContext& layoutContext,
+      const TextAttributes& baseTextAttributes) const;
+#endif
 
   // Lazily created on first measure, then reused / copied across clones.
   mutable std::shared_ptr<const TextLayoutManager> textLayoutManager_;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",