TextAlign and WritingDirection Parity for Fabric TextInput #15340

Nitin-100 · 2025-11-09T14:52:23Z

Description

Type of Change

Bug fix (non-breaking change which fixes missing functionality)
Feature addition (non-breaking change which adds missing property support)

Why

The Fabric Composition architecture had incomplete support for the textAlign property and no support for the writingDirection property in TextInput components. Specifically:

textAlign: Fabric was missing support for the 'justify' alignment option that Paper XAML fully supports
textAlign='auto': The Natural/auto alignment wasn't respecting RTL (right-to-left) writing direction as intended
writingDirection: This property was completely unimplemented in Fabric, even though it's defined in React Native's TextAttributes and Paper supports it via FlowDirection

This created feature gaps where:

Users couldn't justify text in Fabric TextInputs (common for long-form text)
RTL language support was incomplete - auto alignment always defaulted to left
There was no way to explicitly set text direction for internationalized apps
The existing commented RTL code in UpdateParaFormat was never activated

What

Implemented complete textAlign and writingDirection support in Fabric TextInput to achieve full parity with Paper XAML implementation:

1. textAlign Property Enhancements:

Added support for 'justify' alignment using RichEdit's PFA_JUSTIFY flag
Fixed 'auto'/Natural alignment to properly respect writing direction:
- When writingDirection='rtl' and textAlign='auto' → aligns right
- When writingDirection='ltr' and textAlign='auto' → aligns left
- Default behavior remains left-aligned

2. writingDirection Property Implementation:

Reads baseWritingDirection from TextAttributes (inherited from BaseTextProps)
Supports all three values:
- 'ltr' (Left-to-Right): Explicitly sets LTR paragraph direction
- 'rtl' (Right-to-Left): Sets PFM_RTLPARA and PFE_RTLPARA flags in RichEdit
- 'auto'/Natural: Uses default behavior (no explicit RTL flags)
Replaces the previously commented-out RTL code with proper implementation

Technical Implementation:
Modified WindowsTextInputComponentView::UpdateParaFormat() to:

// Read writingDirection from textAttributes
auto &baseWritingDirection = windowsTextInputProps().textAttributes.baseWritingDirection;

// Set RTL flags when writingDirection='rtl'
if (*baseWritingDirection == WritingDirection::RightToLeft) {
    m_pf.dwMask |= PFM_RTLPARA;
    m_pf.wEffects |= PFE_RTLPARA;
}

// Make textAlign='auto' respect writing direction
if (textAlign == TextAlignment::Natural) {
    m_pf.wAlignment = isRTL ? PFA_RIGHT : PFA_LEFT;
}

This implementation leverages RichEdit's native paragraph formatting capabilities through the PARAFORMAT2 structure, ensuring proper rendering of both alignment and text direction.

Screenshots

No screenshots needed. This implements standard text alignment and direction behaviors that match Paper architecture.

Testing

textAlign='justify' Testing:

Created TextInput with long multiline text and textAlign='justify'
Verified text is fully justified across all lines except the last line
Compared with Paper (playground.sln) - identical rendering

textAlign='auto' with RTL Testing:

TextInput with textAlign='auto' and writingDirection='ltr' → text aligns left
TextInput with textAlign='auto' and writingDirection='rtl' → text aligns right
Verified behavior matches Paper's FlowDirection implementation

writingDirection Explicit Testing:

Arabic/Hebrew text with writingDirection='rtl':
- Text flows right-to-left correctly
- Cursor starts on the right
- Selection direction is RTL
English text with writingDirection='ltr':
- Explicit LTR behavior even in RTL context
writingDirection='auto':
- Uses system default based on content

All textAlign Values Verified:

'left' → PFA_LEFT
'right' → PFA_RIGHT
'center' → PFA_CENTER
'justify' → PFA_JUSTIFY (NEW)
'auto' → Respects RTL (FIXED)

Changelog

Should this change be included in the release notes: yes

Implemented complete textAlign and writingDirection support for Fabric TextInput. Users can now justify text alignment and control text direction for internationalized applications. The textAlign='auto' option now properly respects RTL writing direction. This achieves full parity with Paper XAML implementation and improves support for right-to-left languages.

Related Work

Removes previously commented RTL code and replaces it with proper implementation
BaseTextProps already includes writingDirection property through TextAttributes
Paper XAML uses TryUpdateFlowDirection for similar functionality
This complements existing TextInput internationalization features

Breaking Changes

None. These are additive features that don't change existing behavior.

Microsoft Reviewers: Open in CodeFlow

…xtInput - Add support for textAlign='justify' using PFA_JUSTIFY flag - Implement writingDirection (baseWritingDirection) support for 'ltr', 'rtl', and 'auto' - Make textAlign='auto' (Natural) respect RTL writing direction - Set PFM_RTLPARA and PFE_RTLPARA flags for RTL text - Achieves full parity with Paper XAML implementation

acoates-ms · 2025-11-10T16:28:05Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+      // Ensure RTL flag is not set
+      m_pf.wEffects &= ~PFE_RTLPARA;
+    }
+    // WritingDirection::Natural uses default behavior (no specific RTL setting)


I think in this case the direction needs to come from layoutMetrics().layoutDirection, since direction could be overridden at any point in the tree?

acoates-ms · 2025-11-10T16:28:17Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

  m_pf.cTabCount = 1;
  m_pf.rgxTabs[0] = lDefaultTab;
-
-  /*


Lets delete the old code.

acoates-ms · 2025-11-10T16:29:16Z

Can any of these flags affect layout? If so, similar changes will be needed in WindowsTextLayoutManager - which is where layout is performed.

Nitin-100 · 2025-11-11T03:49:00Z

Can any of these flags affect layout? If so, similar changes will be needed in WindowsTextLayoutManager - which is where layout is performed.

Yes, the PFE_RTLPARA and PFA_LEFT/RIGHT/CENTER/JUSTIFY flags DO affect text layout and measurement. However, WindowsTextLayoutManager currently does NOT handle baseWritingDirection/WritingDirection - it only handles TextAlignment.
To fully support this, WindowsTextLayoutManager would need:
1.Call SetReadingDirection(DWRITE_READING_DIRECTION_RIGHT_TO_LEFT) on the IDWriteTextFormat or IDWriteTextLayout
2.Handle WritingDirection::Natural by checking layoutConstraints.layoutDirection (similar to what ParagraphShadowNode does in getContent())

- TextInput now properly handles textAlign (Left, Right, Center, Justified, Natural) - TextInput now properly handles writingDirection/baseWritingDirection (LTR, RTL, Natural) - WritingDirection::Natural uses layoutMetrics.layoutDirection since direction can be overridden at any point in the tree - Added matching support in WindowsTextLayoutManager for text measurement - WindowsTextLayoutManager now sets DWRITE_READING_DIRECTION based on baseWritingDirection - TextAlignment::Natural now respects reading direction (RTL = trailing, LTR = leading) - Fixes layout affecting flags that impact text measurement throughout the system

- Only call SetReadingDirection when baseWritingDirection is explicitly specified - Avoids breaking existing text layouts that don't specify writingDirection - Fixes LegacyControlStyleTest snapshot failure - Natural alignment still respects RTL when baseWritingDirection is set

acoates-ms · 2025-11-11T16:14:40Z

Can any of these flags affect layout? If so, similar changes will be needed in WindowsTextLayoutManager - which is where layout is performed.

Yes, the PFE_RTLPARA and PFA_LEFT/RIGHT/CENTER/JUSTIFY flags DO affect text layout and measurement. However, WindowsTextLayoutManager currently does NOT handle baseWritingDirection/WritingDirection - it only handles TextAlignment. To fully support this, WindowsTextLayoutManager would need: 1.Call SetReadingDirection(DWRITE_READING_DIRECTION_RIGHT_TO_LEFT) on the IDWriteTextFormat or IDWriteTextLayout 2.Handle WritingDirection::Natural by checking layoutConstraints.layoutDirection (similar to what ParagraphShadowNode does in getContent())

Can we fix that? We cannot have TextInput and TextLayoutManager disagree on the size, otherwise we'll get bad sizing behaviors in certain layouts.

Nitin-100 · 2025-11-12T03:42:13Z

Can any of these flags affect layout? If so, similar changes will be needed in WindowsTextLayoutManager - which is where layout is performed.

Yes, the PFE_RTLPARA and PFA_LEFT/RIGHT/CENTER/JUSTIFY flags DO affect text layout and measurement. However, WindowsTextLayoutManager currently does NOT handle baseWritingDirection/WritingDirection - it only handles TextAlignment. To fully support this, WindowsTextLayoutManager would need: 1.Call SetReadingDirection(DWRITE_READING_DIRECTION_RIGHT_TO_LEFT) on the IDWriteTextFormat or IDWriteTextLayout 2.Handle WritingDirection::Natural by checking layoutConstraints.layoutDirection (similar to what ParagraphShadowNode does in getContent())

Can we fix that? We cannot have TextInput and TextLayoutManager disagree on the size, otherwise we'll get bad sizing behaviors in certain layouts.

Done that in the latest commit.

Nitin Chaudhary added 2 commits November 9, 2025 20:17

Change files

3fbe9b8

Nitin-100 requested a review from a team as a code owner November 9, 2025 14:52

Fix beachball change file - add meaningful comment

b0c0e97

acoates-ms reviewed Nov 10, 2025

View reviewed changes

Nitin Chaudhary added 2 commits November 11, 2025 09:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

TextAlign and WritingDirection Parity for Fabric TextInput #15340

TextAlign and WritingDirection Parity for Fabric TextInput #15340

Uh oh!

Nitin-100 commented Nov 9, 2025 •

edited by microsoft-github-policy-service bot

Loading

Uh oh!

acoates-ms Nov 10, 2025

Uh oh!

Nitin-100 Nov 11, 2025

Uh oh!

acoates-ms Nov 10, 2025

Uh oh!

Nitin-100 Nov 11, 2025

Uh oh!

acoates-ms commented Nov 10, 2025

Uh oh!

Nitin-100 commented Nov 11, 2025

Uh oh!

acoates-ms commented Nov 11, 2025

Uh oh!

Nitin-100 commented Nov 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TextAlign and WritingDirection Parity for Fabric TextInput #15340

Are you sure you want to change the base?

TextAlign and WritingDirection Parity for Fabric TextInput #15340

Uh oh!

Conversation

Nitin-100 commented Nov 9, 2025 • edited by microsoft-github-policy-service bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

textAlign='justify' Testing:

textAlign='auto' with RTL Testing:

writingDirection Explicit Testing:

All textAlign Values Verified:

Changelog

Related Work

Breaking Changes

Microsoft Reviewers: Open in CodeFlow

Uh oh!

acoates-ms Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Nitin-100 Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

acoates-ms Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Nitin-100 Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

acoates-ms commented Nov 10, 2025

Uh oh!

Nitin-100 commented Nov 11, 2025

Uh oh!

acoates-ms commented Nov 11, 2025

Uh oh!

Nitin-100 commented Nov 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Nitin-100 commented Nov 9, 2025 •

edited by microsoft-github-policy-service bot

Loading