adapt Superscript to top/bottom

#35704 (comment)
facebook · Dec 27, 2022 · 5565bc1 · 5565bc1
1 parent fdeb37c
commit 5565bc1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 25 deletions.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBottomAlignSpan.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBottomAlignSpan.java
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text;
+
+import android.text.TextPaint;
+import android.text.style.SubscriptSpan;
+
+/** ratio 0 for center ratio 0.4 for top ratio */
+public class ReactBottomAlignSpan extends SubscriptSpan implements ReactSpan {
+  private static final String TAG = "ReactBottomAlignSpan";
+
+  @Override
+  public void updateDrawState(TextPaint ds) {
+    ds.baselineShift += ds.getFontMetrics().descent / 2;
+  }
+
+  @Override
+  public void updateMeasureState(TextPaint tp) {
+    updateDrawState(tp);
+  }
+}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTopAlignSpan.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTopAlignSpan.java
@@ -7,29 +7,21 @@
 
 package com.facebook.react.views.text;
 
+import android.graphics.Rect;
 import android.text.TextPaint;
-import android.text.style.MetricAffectingSpan;
-
-/**
- * Instances of this class are used to place reactTag information of nested text react nodes into
- * spannable text rendered by single {@link TextView}
- */
-public class ReactTopAlignSpan extends MetricAffectingSpan implements ReactSpan {
-  double ratio = 0.4;
-
-  public ReactTopAlignSpan() {}
-
-  public ReactTopAlignSpan(double ratio) {
-    this.ratio = ratio;
-  }
+import android.text.style.SuperscriptSpan;
 
+/** ratio 0 for center ratio 0.4 for top ratio */
+public class ReactTopAlignSpan extends SuperscriptSpan implements ReactSpan {
   @Override
-  public void updateDrawState(TextPaint paint) {
-    paint.baselineShift += (int) (paint.ascent() * ratio);
+  public void updateDrawState(TextPaint ds) {
+    Rect bounds = new Rect();
+    ds.getTextBounds("1A", 0, 2, bounds);
+    ds.baselineShift -= bounds.top - ds.getFontMetrics().ascent;
   }
 
   @Override
-  public void updateMeasureState(TextPaint paint) {
-    paint.baselineShift += (int) (paint.ascent() * ratio);
+  public void updateMeasureState(TextPaint tp) {
+    updateDrawState(tp);
   }
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManagerMapBuffer.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManagerMapBuffer.java
@@ -140,9 +140,14 @@ private static void buildSpannableFromFragment(
                 sb.length(),
                 new TextInlineViewPlaceholderSpan(reactTag, (int) width, (int) height)));
       } else if (end >= start) {
-        if (textAttributes.mVerticalAlign != null && textAttributes.mVerticalAlign.equals("top")) {
+        if (textAttributes.mVerticalAlign != null
+            && textAttributes.mVerticalAlign.equals("top-child")) {
           ops.add(new SetSpanOperation(start, end, new ReactTopAlignSpan()));
         }
+        if (textAttributes.mVerticalAlign != null
+            && textAttributes.mVerticalAlign.equals("bottom-child")) {
+          ops.add(new SetSpanOperation(start, end, new ReactBottomAlignSpan()));
+        }
         if (textAttributes.mIsAccessibilityLink) {
           ops.add(new SetSpanOperation(start, end, new ReactClickableSpan(reactTag)));
         }

diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js
@@ -18,7 +18,13 @@ const React = require('react');
 const TextInlineView = require('../../components/TextInlineView');
 import TextLegend from '../../components/TextLegend';
 
-const {LayoutAnimation, StyleSheet, Text, View} = require('react-native');
+const {
+  Image,
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  View,
+} = require('react-native');
 
 class Entity extends React.Component<{|children: React.Node|}> {
   render(): React.Node {
@@ -205,16 +211,35 @@ class TextExample extends React.Component<{...}> {
     return (
       <RNTesterPage title="<Text>">
         <RNTesterBlock title="Dynamic Font Size Adjustment">
-          <Text>
-            This text a{' '}
-            <Text style={{textAlignVertical: 'top', backgroundColor: 'red'}}>
-              SuperScript
+          <Text
+            onLayout={event => {
+              console.log('height', event.nativeEvent.layout.height);
+              const layout = event.nativeEvent.layout;
+              console.log('layout:', layout);
+            }}
+            style={{
+              textAlignVertical: 'bottom',
+              backgroundColor: 'yellow',
+            }}>
+            A parent text with{' '}
+            <Text
+              style={{
+                textAlignVertical: 'bottom-child',
+                backgroundColor: 'red',
+              }}>
+              Top
+            </Text>
+            <Text
+              style={{
+                textAlignVertical: 'top-child',
+                backgroundColor: 'green',
+              }}>
+              Bottom
             </Text>
           </Text>
           <Text
             style={{
               verticalAlign: 'bottom',
-              height: 100,
               backgroundColor: 'red',
             }}>
             Bottom