Arabic Text.jsx Guide

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

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

// components/ArabicText.jsx import React from 'react'; const ArabicText = ( children, className, ...props ) => return ( <span dir="rtl" lang="ar" className= arabic-text $ '' ...props > children </span> ); ; Arabic Text.jsx

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

/* For headings */ .arabic-text.heading font-weight: 700; letter-spacing: -0.01em; return ( &lt;div dir=isRTL

return String(text).replace(/\d/g, (digit) => westernToEastern[digit]); ;

const sizeMap = small: '0.875rem', medium: '1rem', large: '1.25rem', xlarge: '1.5rem' ; return ( &lt

return ( <span dir="rtl" lang="ar" style=styles className= arabic-text $className ...props > children </span> ); ;