TextAlign and WritingDirection Parity for Fabric TextInput

[Nitin-100]

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:

1. textAlign: Fabric was missing support for the 'justify' alignment option that Paper XAML fully supports
2. textAlign='auto': The Natural/auto alignment wasn't respecting RTL (right-to-left) writing direction as intended
3. 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:

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

textAlign='auto' with RTL Testing:

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

writingDirection Explicit Testing:

1. Arabic/Hebrew text with writingDirection='rtl':
   • Text flows right-to-left correctly
   • Cursor starts on the right
   • Selection direction is RTL
2. English text with writingDirection='ltr':
   • Explicit LTR behavior even in RTL context
3. 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

[acoates-ms]

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

[Nitin-100]

Done.

[acoates-ms]

Lets delete the old code.

[Nitin-100]

Done.

[acoates-ms]

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

[Nitin-100]

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())

[acoates-ms]

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]

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.