RTL محض آئینہ نہیں: عربی اور اردو نے ہمیں لے آؤٹ کے بارے میں کیا سکھایا
کسی بھی سائٹ پر دائیں سے بائیں سپورٹ کی پہلی کوشش ایک جیسی نظر آتی ہے: left اور right کو margin-inline-start اور margin-inline-end سے بدلنا، <html> ٹیگ میں dir="rtl" شامل کرنا، اور دیکھنا کہ زیادہ تر لے آؤٹ خودبخود ٹھیک ہو جاتا ہے۔ CSS logical properties واقعی زیادہ تر کام خود بخود سنبھال لیتی ہیں۔ باقی مسائل ہی دلچسپ ہوتے ہیں۔
اعداد نہیں پلٹتے، مگر پڑوسی ایسا سمجھتے ہیں
عربی جملے کے اندر "١٥٠+" کا ایک مخصوص مسئلہ ہے: یونیکوڈ bidi الگورتھم + کو ایک غیرجانبدار کریکٹر سمجھتا ہے اور اسے ارد گرد کے سیاق کے مطابق دوبارہ ترتیب دیتا ہے، تو یہ "+١٥٠" کی صورت میں نظر آ سکتا ہے — بصری طور پر درست لگتا ہے، مگر معنوی طور پر الٹا۔ حل کوئی CSS قاعدہ نہیں؛ بلکہ نمبر کو ارد گرد کے پیراگراف کی سمت سے <bdi> ایلیمنٹ کے ذریعے الگ کرنا، تاکہ ہندسے اور ان کی رموزِ اوقاف جس بھی سمت میں لپٹے ہوں، ایک خودمختار LTR اکائی رہیں۔ اس سائٹ پر رینڈر ہونے والا ہر اعداد و شمار، قیمت اور فیصد ہم اسی طرح لپیٹتے ہیں۔
transform کو dir کا علم نہیں
سمت کے مطابق آئیکنز — ایک "آگے" اشارہ کرنے والا تیر — کو RTL میں بصری طور پر پلٹنا ہوتا ہے۔ فطری خیال ہے [dir="rtl"] کے تحت transform: scaleX(-1) استعمال کرنا، جو آئیکن کے لیے کام کرتا ہے مگر اسی ایلیمنٹ پر hover اینیمیشن چاہنے پر ٹوٹ جاتا ہے: transform صرف ایک قدر رکھ سکتا ہے، اس لیے پلٹنا اور hover حرکت ایک ہی CSS پراپرٹی پر جھگڑتے ہیں، اور نتیجتاً یا تو حرکت پلٹنے کو منسوخ کر دیتی ہے یا الٹا ہوتا ہے۔ حل تھا دونوں کاموں کو مکمل طور پر دو الگ CSS پراپرٹیز پر تقسیم کرنا — آئینہ transform پر رہتا ہے، اور hover حرکت translate پر منتقل ہو جاتی ہے، جسے ایک --dir: 1 | -1 کسٹم پراپرٹی سے اسکیل کیا جاتا ہے جو [dir="rtl"] کے تحت اپنی علامت پلٹ دیتی ہے۔ دو پراپرٹیز جو ٹکراتی نہیں، بجائے ایک پراپرٹی کے جو دو کام کرے۔
ایک سلائیڈنگ carousel کا حساب ایک کوآرڈینیٹ نظام فرض کرتا ہے
dir="rtl" کے تحت flex-direction: row صرف یہ نہیں پلٹتا کہ ایک قطار بصری طور پر کیسے پڑھی جاتی ہے — یہ اس DOM ترتیب کو بھی پلٹ دیتا ہے جس میں بچے مرکزی محور پر رکھے جاتے ہیں۔ یہ عام طور پر وہی رویہ ہے جو آپ چاہتے ہیں۔ مگر یہ وہ رویہ نہیں جو ایک carousel کا translateX(-page * 100%) حساب چاہتا ہے، کیونکہ یہ فارمولا فرض کرتا ہے کہ صفحہ ٠ زبان سے قطع نظر فزیکل پوزیشن صفر پر بیٹھتا ہے۔ carousel کے اپنے سلائیڈنگ ٹریک کو — صرف اسی ایک ایلیمنٹ کو — dir="ltr" پر مقفل رکھنے سے حساب سمت سے آزاد رہتا ہے، جبکہ ایک سطح نیچے اصل دستاویزی سمت بحال کر دی جاتی ہے تاکہ ہر سلائیڈ کے اندر موجود متن اب بھی درست طور پر رینڈر ہو۔ میکانیکی تہہ کو مواد کی تہہ سے الگ کرنا ایک بار کا حل نہیں بلکہ ایک عمومی پیٹرن نکلا۔
نتیجہ
ان میں سے کوئی بھی چیز RTL کے لیے مخصوص چالاکی نہیں بلکہ ایک ہی خیال کی مثالیں ہیں: ایک UI میں مواد کی سمت اور میکانیکی/کوآرڈینیٹ رویہ دونوں موجود ہوتے ہیں، اور جو کوڈ ان دونوں کو گڈمڈ کر دے وہ اسی زبان میں کام کرے گا جس میں بنایا گیا تھا، اور دوسری زبان میں خاموشی سے غلط برتاؤ کرے گا۔ صرف انگریزی پر سیٹ براؤزر میں ٹیسٹ کرنا اس میں سے کچھ بھی کبھی سامنے نہیں لائے گا — اسے ڈھونڈنے کا واحد قابلِ بھروسہ طریقہ عربی اور اردو صفحات کو حقیقتاً رینڈر کر کے دیکھنا ہے۔