جهت صفحه همه‌ی کار را نمی‌کند
در همین سایت dir روی html فقط شروع سطر را عوض می‌کند، نه فونت و نه رقم و نه بوم را. گرادیان، مبدأ تبدیل، و جزیره‌های چپ‌به‌راست هنوز قانون جدا دارند.
نوشتهی محمد هنرور· ۵ دقیقه مطالعه
dir="rtl" سطر را از راست شروع می‌کند. همین. فونت را انتخاب نمی‌کند، رقم را فارسی نمی‌کند، متن داخل بوم را برنمی‌گرداند، و دوربین صحنه‌ی سه‌بعدی را جابه‌جا نمی‌کند. این سایت جهت را روی html می‌گذارد، کنار زبان، و بعد برای چیزهایی که جهت به آن‌ها نمی‌رسد جدا تصمیم می‌گیرد.
یادداشت کوتاه راست‌به‌چپ را از روز اول بگذار خوشه‌ی همین موضوع است. دو مسیر، نه یک صفحه‌ی وارونه می‌گوید چرا فارسی و انگلیسی دو آدرس‌اند. این یکی روی خود ویژگی dir می‌ماند و نشان می‌دهد کجا کافی است و کجا نیست.
زبان و جهت با هم می‌آیند
Base.astro روی عنصر html هم lang می‌گذارد و هم dir. زبان fa-IR است یا en-US. جهت از ui[lang].dir می‌آید: برای فارسی rtl و برای انگلیسی ltr. صفحه‌ای که فقط یکی از این دو را داشته باشد ناقص است. زبان، فونت و صدای تاریخ را انتخاب می‌کند. جهت، شروع سطر و لبه‌ی «ابتدا» را.
دکمه‌ی زبان در سرصفحه dir را روی همان سند عوض نمی‌کند. پیشوند /fa/ یا /en/ را عوض می‌کند و صفحه‌ی دیگر را باز می‌کند. هر صفحه جهت خودش را از اول دارد.
ریشه‌ی سایت، /، استثناست. lang="fa" دارد، dir ندارد، noindex است، و نشانی متعارفش /fa/ است. اسکریپت با navigator.language.startsWith('fa') به /fa/ یا /en/ می‌فرستد. این صفحه خانه‌ی راست‌به‌چپ نیست. بدون اسکریپت هم noscript به /fa/ برمی‌گردد. جهت از صفحه‌ی زبان می‌آید، نه از این ایستگاه کوتاه.
ویژگی منطقی دنبال جهت می‌رود
حاشیه و فاصله‌ای که معنی‌اش «ابتدای سطر» است با margin-inline و padding-inline و inset-inline-start نوشته شده. نقل‌قول border-inline-start دارد. نوار سرصفحه، خرده‌نان، و دکمه‌ی بازگشت به بالا از لبه‌ی inline استفاده می‌کنند. وقتی dir عوض شود، این‌ها لبه را عوض می‌کنند و به قانون جدا برای فارسی نیاز ندارند.
text-align: start هم همین‌طور است. شروع، در صفحه‌ی فارسی راست است و در انگلیسی چپ. لازم نیست برای هر بلوک متن یک override نوشته شود. لینک پرش به محتوا هم inset-inline-start دارد. لبه‌اش با صفحه می‌آید.
این بخش از طرح واقعاً با یک ویژگی تمام می‌شود. بقیه‌ی صفحه این‌طور نیست. جایی که ویژگی فیزیکی مانده، جهت سند به آن نمی‌رسد و یا باید قانون [dir='rtl'] نوشت، یا باید همان قطعه را عمداً چپ‌به‌راست گذاشت.
مبدأ تبدیل و گرادیان فیزیکی‌اند
نوار پیشرفت خواندن transform-origin: left دارد. در صفحه‌ی راست‌به‌چپ یک قانون جدا مبدأ را right می‌کند، هم برای نوشته و هم برای نوار خانه‌ی سایت. میله‌ی مهارت در درباره‌ی من، و خط پرشونده‌ی مسیر زمانی، همین الگو را دارند. scaleX از لبه‌ی فیزیکی شروع می‌شود. dir آن لبه را عوض نمی‌کند. اگر آن قانون دوم نباشد، میله از چپ رشد می‌کند در حالی که سطر از راست خوانده می‌شود.
راهنمای کم‌وزیاد روی شهر کامیت‌ها یک linear-gradient(90deg) است. گرادیان به جهت صفحه گوش نمی‌دهد. زیر [dir='rtl'] همان نوار با scaleX(-1) آینه می‌شود تا روشن‌تر بودن هنوز به سمت «بیشتر» بخواند. خود inset-inline-end جای جعبه را درست می‌گذارد. داخل جعبه، رنگ، جهت دیگری دارد.
جست‌وجوی فهرست وبلاگ یک استثنای کوچک‌تر است. ورودی Pagefind padding-left دارد، نه padding-inline-start. جهت صفحه آن فاصله را به لبه‌ی راست نمی‌برد. آیکون جست‌وجو همان لبه‌ی چپ می‌ماند، حتی وقتی بقیه‌ی صفحه راست‌به‌چپ است.
جزیره‌هایی که نباید برگردند
بلوک کد direction: ltr و text-align: left است. برچسب زبانش با left چسبیده، نه با inset-inline-start. نام ریپازیتوری، تراشهٔ زبان، موضوع‌ها، ستاره، انشعاب، و خانه‌های نوار فعالیت dir="ltr" دارند. نوار مهارت‌های متحرک خانه هم direction: ltr است تا با صفحه برنگردد.
پالت فرمان یک dialog با dir="ltr" است، حتی وقتی خود صفحه فارسی است. دکمه‌ی ⌘K همین‌طور. این‌ها متن فارسیِ آینه نیستند. دستور، نام لاتین، و میانبر صفحه‌کلیدند. لینک داخل نتیجه‌ی جست‌وجو dir="auto" دارد تا اگر عنوان فارسی باشد، همان عنوان جهت خودش را بگیرد و جعبه‌ی گفت‌وگو لاتین بماند.
رقم هم جزیره‌ی خودش را دارد، ولی از راه قالب، نه از راه جهت. رقم فارسی یک ویژگی فونت نیست همان تفاوت را باز می‌کند: fa-IR نویسه را می‌سازد و dir فقط جای سطر را.
بوم و صحنه از CSS جهت نمی‌گیرند
معرفی اول صفحه یک canvas است. زمینه را با document.dir تنظیم می‌کند: اگر سند راست‌به‌چپ باشد rtl، وگرنه ltr. ویژگی CSS به پیکسل‌های بوم نمی‌رسد. اگر آن خط نباشد، نام روی بوم خلاف جهت صفحه نشسته است، هرچند html درست باشد. خانوادهٔ فونت روی همان بوم، برای هر دو زبان، اول وزیرمتن است. جهت بوم و انتخاب فونت دو خط جدا هستند.
صحنه‌ی سه‌بعدی هم document.dir را می‌خواند. جهت متن روی بوم صحنه از همین می‌آید، و جای دوربین نسبت به صفحه با علامت جهت عوض می‌شود. یک dir روی سند، شبکه‌ی WebGL را آینه نمی‌کند. کد صحنه باید خودش تصمیم بگیرد کدام لبه «ابتدا» است.
فونت هم به جهت وصل نیست. صفحه‌ی فارسی وزیرمتن را با :lang(fa) جلو می‌اندازد. صفحه‌ای که فقط dir="rtl" داشته باشد و زبانش انگلیسی بماند، Inter را نگه می‌دارد. انتخابگر به زبان سند نگاه می‌کند، نه به جهت.
تصویر اشتراک جهت صفحه را ارث نمی‌برد
ogImage جای متن را با پرچم rtl حساب می‌کند. برای فارسی، x برابر ۱۱۲۰ است و text-anchor برابر end. برای انگلیسی، x برابر ۸۰ است و text-anchor برابر start. ویژگی direction روی خود عنصر text در SVG نوشته می‌شود. دایره‌ی گوشه هم جابه‌جا می‌شود: در فارسی نزدیک لبه‌ی چپ تصویر، در انگلیسی نزدیک لبه‌ی راست. فونت فقط Vazirmatn-Bold.ttf است و فونت سیستم بار نمی‌شود.
dir روی html این PNG را نمی‌سازد. تصویر موقع ساخت صفحه ساخته می‌شود، جدا برای هر زبان، و بعد در og:image به همان زبان اشاره می‌کند. اگر سند را در مرورگر آینه کنید و فایل تصویر را عوض نکنید، کارت اشتراک همان تصویر قبلی را نشان می‌دهد. لینک پرش، که بالاتر آمد، از این خانواده نیست. آن یکی CSS زنده است. این یکی فایل ساخته‌شده است.
جهت، ترجمه نیست
دو صفحه می‌توانند هر دو dir="rtl" باشند و هنوز ترجمه‌ی هم نباشند. hreflang وقتی روشن می‌شود که فایل زبان دیگر با همان نام وجود داشته باشد. جهت در آن تصمیم نیست. ترجمه یک فایل دوم است همان قرارداد را می‌گوید.
صفحه‌ی همکاری جدا از این مکانیک است: چه کاری خوشامد است، و تنها تماس عمومی تلگرام @MH759.
اگر یک چیز بماند این است: dir شروع سطر را درست می‌کند و ویژگی منطقی را هم با خودش می‌برد. مبدأ تبدیل، گرادیان، بوم، صحنه، فونت، و رقم هر کدام جای دیگری تصمیم گرفته می‌شوند.