RTL মানে শুধু আয়না নয়: আরবি ও উর্দু আমাদের যা শিখিয়েছে
যেকোনো সাইটে right-to-left সাপোর্টের প্রথম ধাপ একই রকম দেখতে: left/right-এর বদলে margin-inline-start/margin-inline-end ব্যবহার করা, <html> ট্যাগে dir="rtl" যোগ করা, আর দেখা যায় বেশিরভাগ লেআউট এমনিতেই ঠিক হয়ে যায়। CSS logical properties সত্যিই বেশিরভাগ কাজ নিজে থেকে সামলে নেয়। বাকি সমস্যাগুলোই আসলে ইন্টারেস্টিং।
সংখ্যা উল্টায় না, কিন্তু পাশের অক্ষর উল্টে দেয়
আরবি বাক্যের মধ্যে "১৫০+"-এর একটা নির্দিষ্ট সমস্যা আছে: Unicode bidi অ্যালগরিদম +-কে একটা নিরপেক্ষ ক্যারেক্টার হিসেবে ধরে আশপাশের প্রসঙ্গ অনুযায়ী সাজায়, ফলে এটা "+১৫০" হয়ে দেখাতে পারে — দেখতে ঠিকই লাগে, কিন্তু অর্থ উল্টো। সমাধানটা কোনো CSS নিয়ম নয়; সংখ্যাটাকে আশেপাশের প্যারাগ্রাফের direction থেকে <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 শুধু একটা row কীভাবে ভিজ্যুয়ালি পড়া হয় তা মিরর করে না — এটা মূল অক্ষ বরাবর children যে DOM ক্রমে সাজানো হয় সেটাও উল্টে দেয়। এটা সাধারণত যা চাই তাই। কিন্তু এটা একটা carousel-এর translateX(-page * 100%) গণিত যা চায় তা নয়, কারণ এই সূত্রটা ধরে নেয় পেজ ০ যেকোনো ভাষাতেই ফিজিক্যাল পজিশন শূন্যে বসে। carousel-এর নিজের স্লাইডিং ট্র্যাককে — শুধু ওই একটা এলিমেন্টকেই — dir="ltr"-এ আটকে রাখলে গণিতটা দিক-নিরপেক্ষ থাকে, আর এক লেভেল নিচে আসল ডকুমেন্ট direction ফিরিয়ে দিলে প্রতিটা স্লাইডের ভেতরের টেক্সট ঠিকভাবেই রেন্ডার হয়। মেকানিক্যাল লেয়ারকে কনটেন্ট লেয়ার থেকে আলাদা করাটাই দেখা গেল একটা এককালীন হ্যাক নয়, বরং একটা সাধারণ প্যাটার্ন।
শেষ কথা
এগুলোর কোনোটাই RTL-নির্দিষ্ট কৌশল নয় — বরং একই ধারণার বিভিন্ন রূপ: একটা UI-তে কনটেন্ট direction আর মেকানিক্যাল/কোঅর্ডিনেট বিহেভিয়ার দুটোই থাকে, আর যে কোড এই দুটোকে গুলিয়ে ফেলে, সেটা যে ভাষায় বানানো হয়েছে সেখানে কাজ করবে, আর অন্য ভাষায় চুপচাপ ভুল আচরণ করবে। শুধু ইংরেজিতে সেট করা ব্রাউজারে টেস্ট করলে এসব কখনোই ধরা পড়বে না — এগুলো খুঁজে পাওয়ার একমাত্র নির্ভরযোগ্য উপায় হলো সত্যিই আরবি ও উর্দু পেজ রেন্ডার করে নিজের চোখে দেখা।