Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right-to-left Text example incorrectly displayed on Fabric app #12716

Open
Tracked by #384
Yajur-Grover opened this issue Feb 8, 2024 · 3 comments
Open
Tracked by #384

Right-to-left Text example incorrectly displayed on Fabric app #12716

Yajur-Grover opened this issue Feb 8, 2024 · 3 comments
Labels
Area: Fabric Support Facebook Fabric Area: RTL Area: Text enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Milestone

Comments

@Yajur-Grover
Copy link
Contributor

Yajur-Grover commented Feb 8, 2024

On the Text example page in the testFabric Gallery app, the right-to-left text example is displaying as left-to-right as shown below:

Current Paper Gallery:
image

Fabric Gallery app:
image

Labeled as enhancement as it looks like a feature that we will likely add in the future.

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Feb 8, 2024
@Yajur-Grover Yajur-Grover transferred this issue from microsoft/react-native-gallery Feb 12, 2024
@chrisglein
Copy link
Member

@Yajur-Grover can you add a note of which specific prop is being set? This is happening due to prop on the control and not region setting. We need both to work.

@chrisglein chrisglein added Area: Text Area: RTL and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Feb 12, 2024
@chrisglein chrisglein added this to the Backlog milestone Feb 12, 2024
@chrisglein chrisglein added the Area: Fabric Support Facebook Fabric label Feb 12, 2024
@Yajur-Grover
Copy link
Contributor Author

Looks like the writingDirection prop is being set to: writingDirection: 'rtl' in the Right-to-left example. Code sample from example page is this:

        <Text
          style={{
            textTransform: 'uppercase',
            backgroundColor: colors.border,
            writingDirection: 'rtl',
          }}>
          Here is a line of capitalized text with Right-to-Left writing
          direction and background color.
        </Text>

@jonthysell jonthysell added the New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric label Mar 7, 2024
@Yajur-Grover Yajur-Grover added the Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper label Mar 19, 2024
@danielayala94
Copy link
Contributor

@Yajur-Grover is this a dupe of #13114?

@chiaramooney chiaramooney added the Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. label Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Fabric Support Facebook Fabric Area: RTL Area: Text enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Projects
Status: No status
Development

No branches or pull requests

6 participants