Arabic Text.jsx --39-link--39- -

To ensure Arabic Text.jsx never outputs --39-LINK--39- again, write unit tests:

// ArabicText.test.jsx
import  render, screen  from '@testing-library/react';
import ArabicText from './ArabicText';
test('filters out corrupted link placeholders', () => 
const corruptedText = "نص تجريبي --39-LINK--39- تجريبي";
render(<ArabicText text=corruptedText />);
expect(screen.queryByText(/--39-LINK--39-/)).not.toBeInTheDocument();
expect(screen.getByText(/نص تجريبي تجريبي/)).toBeInTheDocument();
); Arabic Text.jsx --39-LINK--39-
test('renders proper Arabic link without numeric artifacts', () => 
render(<ArabicText text="اتصل بنا" linkUrl="/contact" />);
const link = screen.getByRole('link');
expect(link).toHaveAttribute('href', '/contact');
expect(link.textContent).toBe('اتصل بنا');
);

ArabicText.jsx is a specialized React component designed to properly render Arabic text in web applications. Arabic presents unique challenges: right-to-left (RTL) direction, cursive shaping, contextual letterforms, and diacritics (harakat). This component abstracts those complexities into a reusable, accessible, and stylable wrapper.

.arabic-text 
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade New', serif;
  font-size: 1.2rem;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  font-feature-settings: 'calt' 1, 'liga' 1, 'rlig' 1; /* contextual alternates */

<a href="/about" dir="rtl">
  حول الشركة
</a>

For numbers, English words, or punctuation inside Arabic: To ensure Arabic Text

<ArabicText>مرحباً، السعر هو 100 USD فقط.</ArabicText>

Use <bdi> (Bidirectional Isolate) for dynamic inserts:

<span dir="rtl">قال <bdi>userName</bdi>: مرحباً</span>

| Issue | Solution | |-------|----------| | Broken ligatures | Use font-feature-settings: 'calt', 'liga' | | Diacritics overlapping | Increase line-height | | Wrong cursor movement | Ensure dir="rtl" is on the nearest block | | Search indexing | Keep plain text inside – avoid splitting with spans | ArabicText

Arabic text in JSX is completely doable – just remember direction matters. Whether you’re building a multilingual site or an Arabic-first app, handle RTL layout, encode URLs properly, and test your links across browsers.

Have you faced any weird Arabic rendering issues in React? Drop a comment below!

<div
  dir="rtl"
  style=
    unicodeBidi: 'plaintext',
    whiteSpace: 'pre-wrap'
>