react-native-advanced-text 0.2.4 → 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

@@ -52,8 +52,7 @@ 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 --
-  // exactly what Android's `setLineSpacing(0, multiplier)` multiplies.
+  // cleared so this reports the font's own, unscaled single-line height.
   auto probeAttributes = baseTextAttributes;
   probeAttributes.lineHeight = std::numeric_limits<Float>::quiet_NaN();
 
@@ -65,6 +64,14 @@ Float AdvancedTextViewShadowNode::measureNaturalSingleLineHeight(
   });
 
   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;
@@ -114,22 +121,22 @@ AttributedString AdvancedTextViewShadowNode::getAttributedString(
   }
 
   // The component treats `lineHeight` as a multiple of the font's own
-  // natural line height (see setLineSpacing(0, multiplier) in
-  // AdvancedTextView.kt / the NSParagraphStyle-based spacing in
-  // AdvancedTextView.mm) -- 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 (and
-  // 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).
+  // 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 AdvancedTextView.kt's real
-    // setLineSpacing()-based layout 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.
+    // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.2.4",
+  "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",