Arabic Text.jsx Apr 2026

// components/ArabicText.jsx import React from 'react'; import './ArabicText.css'; const ArabicText = ( children, size = 'medium', weight = 'normal', lineHeight = 'normal', className = '', ...props ) =>

const styles = weight, lineHeight: lineHeight === 'normal' ? '1.5' : lineHeight ;

1. Auto-detect and Format Numbers // Advanced ArabicText with number conversion const ArabicText = ( children, useArabicNumerals = true, ...props ) => const convertToArabicNumerals = (text) => const westernToEastern = '0': '٠', '1': '١', '2': '٢', '3': '٣', '4': '٤', '5': '٥', '6': '٦', '7': '٧', '8': '٨', '9': '٩' ; Arabic Text.jsx

const ArabicText = ( children, ...props ) => const fontLoaded = useArabicFont();

/* Improved readability for longer passages */ .arabic-text.long-form line-height: 1.8; font-size: 1.1rem; // components/ArabicText

/* For headings */ .arabic-text.heading font-weight: 700; letter-spacing: -0.01em;

const sizeMap = small: '0.875rem', medium: '1rem', large: '1.25rem', xlarge: '1.5rem' ; convertToArabicNumerals(children) : children

const formattedContent = useArabicNumerals ? convertToArabicNumerals(children) : children;

return ( <div dir=isRTL ? 'rtl' : 'ltr'> <ArabicText> t('welcome_message') </ArabicText> </div> );