1/n Nested Text textAlignVertical (Android) - Adding CustomStyleSpan API to align nested text vertically

[fabOnReact]

Summary

1/n of a series of pull requests (Nested Text textAlignVertical).

The CSS property vertically aligns the text relative to the lineHeight (comment).

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

The vertical-align CSS property sets the vertical alignment of an inline, inline-block, or table-cell box.

This PR adds the option textAlignVertical in the CustomStyleSpan constructor to change the text baseline (vertical alignment). The updateDrawState method is responsible for aligning the span (text) to the top or bottom.

• If the text has multiple spans with different line heights, it applies the highest line height (the default behavior without inline images).
• The text is aligned based on the font metrics top, bottom, ascent, and descent and the line height
• Text FontMetrics are updated when fontSize changes and the text remains aligned to the top/bottom or center
• Multiple spans with different font sizes correctly align to the top/bottom

Update 2nd of February

• Moved the vertical text-align logic from ReactAbsoluteSizeSpan to CustomStyleSpan.
• Investigate the cpp implementation of Paint.cpp
• Use TextPaint API to calculate FontMetrics with different font-sizes
• Mock the TextPaint constructor with PowerMock to fix JUnit tests.

Next PR: 2/n Nested Text textAlignVertical (Android) - adding textAlignVertical prop to NestedText #35704

Related:

• The FontMetrics top, ascent, bottom, and descent do not update when changing the fontSize. The issue was solved by moving the logic to the ReactAbsoluteSizeSpan (more info in this video)
• fabOnReact@a2285b1
• https://www.facebook.com/groups/reactnativeoss/permalink/1532669803696315/
• 🚧 branch to support textAlignVertical with inline images 🚧
• 🚧 nested text leading margin 🚧
• Logic to calculate average lineHeight (comment, 9a7ad5b)
• Fixing CI buck tests failing in views folder ea5ff53 83aabf1

fixes #30375 #30375 (comment)

Changelog

[ANDROID] [ADDED] - Adding CustomStyleSpan API to align nested text vertically

Test Plan

Video tests of the functionality: #35949 (comment) and #35949 (comment)
Previous Video tests of the functionality in PR #35704
#35949 (comment)
#35704 (comment)
#35704 (comment)
#35704 (comment)

Previous Tests

#35704 (comment)
#35704 (comment) #35704 (comment)

[fabOnReact]

94c5da5

P	type	task
1	feature	Run CustomLineHeight test on circleci
1.1	task	Run test on circleci for CustomLineHeight without failure
1.2	task	Trigger CustomLineHeight failure in CircleCi (log)

P type task
1 feature Run CustomLineHeight test on circleci
1.1 task Run test on circleci for CustomLineHeight without failure
1.2 task Trigger CustomLineHeight failure in CircleCi (log)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,453,797	-4,837
android	hermes	armeabi-v7a	7,777,311	-4,584
android	hermes	x86	8,930,030	-4,505
android	hermes	x86_64	8,787,255	-4,369
android	jsc	arm64-v8a	6,668,475	-2,424,297
android	jsc	armeabi-v7a	7,462,453	-828,416
android	jsc	x86	9,192,588	+48,998
android	jsc	x86_64	6,893,602	-2,508,853

Base commit: 26b2bb5
Branch: main

[fabOnReact]

P	type	task
1	review	Test functionality with different types of font styles
2	bug	Text does not align correctly to the top when moving logic to CustomStyleSpan
2.1	task	Debug the value of fontSize in CustomStyleSpan with fontSize 32. Record video (video).
2.2	task	Debug the value of getSize in ReactAbsSizeSpan with fontSize 32. Record video (video).

P type task
1 review Test functionality with different types of font styles
2 bug Text does not align correctly to the top when moving logic to CustomStyleSpan
2.1 task Debug the value of fontSize in CustomStyleSpan with fontSize 32. Record video (video).
2.2 task Debug the value of getSize in ReactAbsSizeSpan with fontSize 32. Record video (video).

[fabOnReact]

fabOnReact@112eeee fabOnReact@d8556a7

P	type	task
3	bug	The parent Text does not align correctly with CustomStyleSpan with Gravity.TOP (correct-behaviour, not-correct-behaviour, commit)
3.1	task	Change parent text alignment (Gravity.TOP to BOTTOM)
4	bug	The logic for the highestFontSize correctly aligns the text. The issue is the remaining logic from CustomStyleSpan applied to other Spans.
4.1	task	Comment the remaining logic and understand the root cause of the problem.

P type task
3 bug The parent Text does not align correctly with CustomStyleSpan with Gravity.TOP (correct-behaviour, not-correct-behaviour, commit)
3.1 task Change parent text alignment (Gravity.TOP to BOTTOM)
4 bug The logic for the highestFontSize correctly aligns the text. The issue is the remaining logic from CustomStyleSpan applied to other Spans.
4.1 task Comment the remaining logic and understand the root cause of the problem.

[fabOnReact]

Fixed with fabOnReact@112eeee fabOnReact@d8556a7

CustomStyleSpan does not correctly align to the top

https://www.icloud.com/iclouddrive/058qC6TUCdM2i0tH3Oj2infTQ#custom_style_span_parent_causes_child_to_not_align_correctly

https://www.icloud.com/iclouddrive/0c5XGBRUS_L8LQiOUY0K4lq4Q#abs_size_span_align_correctly

CustomStyleSpan correctly aligns to the top

https://www.icloud.com/iclouddrive/0ce2Z2PvcjrXWy5kQ2iCjDMug#custom_style_span_correctly_aligns

[fabOnReact]

Correctly aligning top/bottom with a different font family/style

https://www.icloud.com/iclouddrive/08ekjoNTUTIhPIY3nCF1C83mQ#using_different_font_style

[github-actions]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This PR was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

Should not have been closed.