Open necolas opened 1 month ago
Hello, Can I try to resolve this issue?
@cortinico I can pick this up, but had a few points.
If we are to match web specs, then the way left
and right
currently behave don't work according to the specs. It internally checks whether the direction is RTL or LTR, and applies the opposite.
According to the CSS spec:
left
aligns the text to the left
of the bounding boxright
aligns the text to the right
of the bounding boxstart
aligns the text to the left
if LTR and right
if RTLend
aligns the text to the right
if LTR and left
if RTLBased on this, I can see two ways to do it:
Text
component itselfWhich one would you recommend?
@cortinico I can pick this up, but had a few points.
those are good questions for @necolas
@necolas whenever you can, if you can validate these points then I will make the fix accordingly.
I have already done the same for Android, but awaiting confirmation will do the for iOS.
then the way left and right currently behave don't work according to the specs. It internally checks whether the direction is RTL or LTR, and applies the opposite
Fixing this might be a breaking change if you're saying left
currently becomes right
in an RTL context.
should react to the
direction
style on ancestral Views
I think the fix to the way direction
works on Android is behind a feature flag. cc @NickGerleman
What do you recommend?
I am particularly referring to these lines: https://github.com/facebook/react-native/blob/33262c1717e9ec4f4872011c36dc164296e58234/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java#L282-L292
I suspect something similar will also be there for iOS. If we add start
and end
support, do we just swap it out for left
and right
, or actually follow the spec and implement it as per it?
The above code mentioned is unfortunately only used in the legacy architecture. The new architecture has a different path for setting text direction, though I think it may also do some swapping (though IIRC maybe only when swapLeftAndRightInRTL
is enabled, which I think is default too).
@NickGerleman in that case, can you point me to where this would be?
@necolas Should the fix for this be inline with CSS spec? If so then I will start accordingly.
@necolas Hello, any update on this? I can pick this up accordingly.
Yes, inline with CSS spec
Cool, sorry for the delay was unwell. I'll pick this up over this weekend!
Description
React Native is missing support for
textAlign:start
andtextAlign:end
on Text and TextInput elements - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#syntaxThese values are important for supporting RTL layouts, and should react to the
direction
style on ancestral Views on all platforms.Steps to reproduce
React Native Version
0.75
Affected Platforms
Runtime - Android, Runtime - iOS
Output of
npx react-native info
Stacktrace or Logs
Reproducer
.
Screenshots and Videos
No response