[Android] textAlignVertical doesn't work on nested text

[jsamr]

This issue has already been reported (#18790), but closed for "stalling". As of React Native 0.63.3, the bug still exists.

Description

textAlignVertical works fine when set on the top-most Text component. However, if you have any nested texts (a common use case), you can not override the alignVertical in the child Text component.

React Native version:

System:
OS: Linux 5.4 Manjaro Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz
Memory: 1.54 GB / 31.29 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.0 - /tmp/xfs-2fbb69bb/node
Yarn: 2.2.2 - /tmp/xfs-2fbb69bb/yarn
npm: 6.14.8 - /usr/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1
System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Languages:
Java: 1.8.0_265 - /usr/bin/javac
Python: 3.8.6 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: ^0.63.3 => 0.63.3
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Create an app which renders the following component:

export default function App() {
  return (
      <Text>
        <Text>This is text</Text>
        <Text style={{textAlignVertical: 'top', fontSize: 10}}>sup!</Text>
      </Text>
  );
}

Expected Results

The "sup!" Text node should be aligned to the top edge of the line. Instead, "sup!" is aligned with the baseline:

Web (expected)

Android

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@jsamr/android-textalignvertical

[dededavida]

hey guys, I created a component that worked for me, I'm sharing
https://github.com/daviddossantos/textinput-multiline-multiplataform

[jsamr]

@daviddossantos thanks for sharing but this is unrelated! The bug I reported was on Android and targeted Textcomponent. Your workaround seems to target iOS and the TextInputcomponent.

[dededavida]

sorry, I didn't pay attention

[fabOnReact]

unluckily @hoda-oz is right

Even if Text components are nested in other Text components, they are merged into a single TextView of Android
So you cannot manipulate text position in nested Text components. In this case, you can manipulate vertical position by lineHeight property.

I have been reading https://github.com/facebook/react-native/pull/23195/files and https://github.com/facebook/react-native/pull/8619/files to understand how nested Text are combined in one TextView

<Text>
  <Text>This is text</Text>
  <Text style={{textAlignVertical: 'top', fontSize: 10, backgroundColor: "red" }}>sup!</Text>
</Text>

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 42 to 47 in 28fb41a

	* <p>This class handles all text attributes associated with {@code <Text>}-ish node. A concrete
	* node can be an anchor {@code <Text>} node, an anchor {@code <TextInput>} node or virtual {@code
	* <Text>} node inside {@code <Text>} or {@code <TextInput>} node. Or even something else.
	*
	* <p>This also node calculates {@link Spannable} object based on subnodes of the same type, which
	* can be used in concrete classes to feed native views and compute layout.

The code below loops the different text and probably is responsible for aggregating them in 1 TextView.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 111 to 112 in 28fb41a

	for (int i = 0, length = textShadowNode.getChildCount(); i < length; i++) {
	ReactShadowNode child = textShadowNode.getChildAt(i);

each one of the below code-snippets adds a different text property to the Text sup! using the Android Spans API. Hopefully I will be able to use AlignmentSpan to add the required functionality...

More code references

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 174 in 28fb41a

new SetSpanOperation(start, end, new ReactForegroundColorSpan(textShadowNode.mColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 178 to 179 in 28fb41a

	new SetSpanOperation(
	start, end, new ReactBackgroundColorSpan(textShadowNode.mBackgroundColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 186 in 28fb41a

new SetSpanOperation(start, end, new CustomLetterSpacingSpan(effectiveLetterSpacing)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 193 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactAbsoluteSizeSpan(effectiveFontSize)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 199 to 207 in 28fb41a

	new SetSpanOperation(
	start,
	end,
	new CustomStyleSpan(
	textShadowNode.mFontStyle,
	textShadowNode.mFontWeight,
	textShadowNode.mFontFeatureSettings,
	textShadowNode.mFontFamily,
	textShadowNode.getThemedContext().getAssets())));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 210 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactUnderlineSpan()));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 213 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactStrikethroughSpan()));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 220 to 227 in 28fb41a

	new SetSpanOperation(
	start,
	end,
	new ShadowStyleSpan(
	textShadowNode.mTextShadowOffsetDx,
	textShadowNode.mTextShadowOffsetDy,
	textShadowNode.mTextShadowRadius,
	textShadowNode.mTextShadowColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 233 in 28fb41a

ops.add(new SetSpanOperation(start, end, new CustomLineHeightSpan(effectiveLineHeight)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 235 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactTagSpan(textShadowNode.getReactTag())));

[fabOnReact]

the line below changes the text sup! to background color red

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 176 to 180 in 28fb41a

	if (textShadowNode.mIsBackgroundColorSet) {
	ops.add(
	new SetSpanOperation(
	start, end, new ReactBackgroundColorSpan(textShadowNode.mBackgroundColor)));
	}

[fabOnReact]

each one of the below code-snippets adds a different text property to the Text sup! using the Android Spans API. Hopefully I will be able to use AlignmentSpan to add the required functionality...

CLICK TO OPEN CODE SNIPPETS

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 174 in 28fb41a

new SetSpanOperation(start, end, new ReactForegroundColorSpan(textShadowNode.mColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 178 to 179 in 28fb41a

	new SetSpanOperation(
	start, end, new ReactBackgroundColorSpan(textShadowNode.mBackgroundColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 186 in 28fb41a

new SetSpanOperation(start, end, new CustomLetterSpacingSpan(effectiveLetterSpacing)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 193 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactAbsoluteSizeSpan(effectiveFontSize)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 199 to 207 in 28fb41a

	new SetSpanOperation(
	start,
	end,
	new CustomStyleSpan(
	textShadowNode.mFontStyle,
	textShadowNode.mFontWeight,
	textShadowNode.mFontFeatureSettings,
	textShadowNode.mFontFamily,
	textShadowNode.getThemedContext().getAssets())));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 210 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactUnderlineSpan()));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 213 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactStrikethroughSpan()));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 220 to 227 in 28fb41a

	new SetSpanOperation(
	start,
	end,
	new ShadowStyleSpan(
	textShadowNode.mTextShadowOffsetDx,
	textShadowNode.mTextShadowOffsetDy,
	textShadowNode.mTextShadowRadius,
	textShadowNode.mTextShadowColor)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 233 in 28fb41a

ops.add(new SetSpanOperation(start, end, new CustomLineHeightSpan(effectiveLineHeight)));

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Line 235 in 28fb41a

ops.add(new SetSpanOperation(start, end, new ReactTagSpan(textShadowNode.getReactTag())));

[fabOnReact]

I further researched and found the AlignmentSpan

as explained in ParagraphSpans they need a new line \n like Spantastic\ntext.

as explained in AlignmentSpan.Standard we can use the following Layout.Alignment

• ALIGN_CENTER
• ALIGN_OPPOSITE
• ALIGN_NORMAL

This are examples of ALIGN_OPPOSITE

The functionality is not available in AOSP so I should create a CustomSpan which inherits from AlignmentSpan and changes the text-alignment to top.

AlignmentSpan uses mAlignment.name() to retrieve the Span with the correct alignment

https://github.com/aosp-mirror/platform_frameworks_base/blob/7096deadf4a32768717e74b11eb8e6289a65976f/core/java/android/text/style/AlignmentSpan.java#L95-L98

public interface AlignmentSpan extends ParagraphStyle {
    class Standard implements AlignmentSpan, ParcelableSpan {
        @Override
        public void writeToParcelInternal(@NonNull Parcel dest, int flags) {
            dest.writeString(mAlignment.name());
        }
   }
}

https://github.com/aosp-mirror/platform_frameworks_base/blob/7096deadf4a32768717e74b11eb8e6289a65976f/core/java/android/text/Layout.java#L529-L581

https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/text/Layout.java;l=440;drc=caabd536e8fea82b888902f359b33e637267966c?q=ALIGN_OPPOSITE&ss=android%2Fplatform%2Fsuperproject

CLICK TO OPEN ANDROID SOURCECODE

public abstract class Layout {
    @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.R, trackingBug = 170729553)
    public void drawText(Canvas canvas, int firstLine, int lastLine) {
            // not relevant logic
            // Determine whether the line aligns to normal, opposite, or center.
            Alignment align = paraAlign;
            if (align == Alignment.ALIGN_LEFT) {
                align = (dir == DIR_LEFT_TO_RIGHT) ?
                    Alignment.ALIGN_NORMAL : Alignment.ALIGN_OPPOSITE;
            } else if (align == Alignment.ALIGN_RIGHT) {
                align = (dir == DIR_LEFT_TO_RIGHT) ?
                    Alignment.ALIGN_OPPOSITE : Alignment.ALIGN_NORMAL;
            }


            int x;
            final int indentWidth;
            if (align == Alignment.ALIGN_NORMAL) {
                if (dir == DIR_LEFT_TO_RIGHT) {
                    indentWidth = getIndentAdjust(lineNum, Alignment.ALIGN_LEFT);
                    x = left + indentWidth;
                } else {
                    indentWidth = -getIndentAdjust(lineNum, Alignment.ALIGN_RIGHT);
                    x = right - indentWidth;
                }
            } else {
                int max = (int)getLineExtent(lineNum, tabStops, false);
                if (align == Alignment.ALIGN_OPPOSITE) {
                    if (dir == DIR_LEFT_TO_RIGHT) {
                        indentWidth = -getIndentAdjust(lineNum, Alignment.ALIGN_RIGHT);
                        x = right - max - indentWidth;
                    } else {
                        indentWidth = getIndentAdjust(lineNum, Alignment.ALIGN_LEFT);
                        x = left - max + indentWidth;
                    }
                } else { // Alignment.ALIGN_CENTER
                    indentWidth = getIndentAdjust(lineNum, Alignment.ALIGN_CENTER);
                    max = max & ~1;
                    x = ((right + left - max) >> 1) + indentWidth;
                }
            }


            Directions directions = getLineDirections(lineNum);
            if (directions == DIRS_ALL_LEFT_TO_RIGHT && !mSpannedText && !hasTab && !justify) {
                // XXX: assumes there's nothing additional to be done
                canvas.drawText(buf, start, end, x, lbaseline, paint);
            } else {
                tl.set(paint, buf, start, end, dir, directions, hasTab, tabStops,
                        getEllipsisStart(lineNum),
                        getEllipsisStart(lineNum) + getEllipsisCount(lineNum));
                if (justify) {
                    tl.justify(right - left - indentWidth);
                }
                tl.draw(canvas, x, ltop, lbaseline, lbottom);
            }
        }


        TextLine.recycle(tl);
}

[jsamr]

@fabriziobertoglio1987 Awesome! Thanks for your research. Looking forwards to your PR 🙂

[fabOnReact]

@jsamr thanks a lot Jules Randolph for the sponsorship. I will give priority to this issue and publish a pull request. 🙏 ☮️ ❤️

[fabOnReact]

thanks a lot @jsamr

Yes, I believe you are right .. We can use SuperscriptSpan and SubscriptSpan

CLICK TO OPEN TESTS RESULTS

TEST SCENARIO

• we use SuperscriptSpan to top align the text

RESULT

• the text is top aligned

 <Text>
  Parent
  <Text style={{textAlignVertical: 'superscript'}}>
    Solid underline
  </Text>
</Text>

in ReactBaseTextShadowNode

if (textShadowNode.mTextAlignVertical == "super") {
  ops.add(new SetSpanOperation(start, end, new ReactSuperscriptSpan()));
}

Superscript

Subscript

[jsamr]

@fabriziobertoglio1987 That is promising! Although it would be more like super / sub support rather than a fix for this peculiar issue. But a very exciting new feature! Below just a recap on the distinction between super and top.

In CSS, top, bottom are quite different than sub and sup:

The baseline-relative values %, sub, super shift the box relative to its baseline-aligned position, whereas the line-relative values top, center, and bottom shift the inline box and its contents relative to the bounds of its line box.

What that basically mean is that, if you have a sibling which expands the line box such as a big image, top would put the content aligned with the top of the image (which coincide with the line box) while super would only shift the content a little bit up from the baseline.

See this JSFiddle

But honestly, I have no idea what are the specs of React Native inline layout! There certainly are models for native platforms.