تعیین جهت‌گیری متن در CSS

مقدمه

زبان‌های انسانی مختلف دارای جهت‌گیری‌های متفاوتی هستند. زبان‌هایی مانند انگلیسی و فرانسوی دارای جهت‌گیری چپ‌به‌راست و زبان‌هایی مانند فارسی و عربی دارای جهت‌گیری راست‌به‌چپ هستند و البته زبان‌هایی مانند ژاپنی هم وجود دارند که از بالا‌به‌پایین نوشته می‌شوند. بسیاری از پراپرتی‌ها و مقادیری که تا این لحظه با آنها آشنا شده‌ایم، به طور پیش‌فرض، با در نظر گرفتن جهت‌گیری چپ‌به‌راست برای متون کار می‌کنند. در حقیقت، وب به طور پیش‌فرض، پشتیبانی بهتری از زبان‌های چپ‌به‌راست دارد اما در سال‌های اخیر این روال دستخوش تغییراتی شده و در CSS نیز پیشرفت‌هایی در زمینه‌ی پشتیبانی از متن‌های دارای جهت‌گیری‌های مختلف حاصل شده است. در این درس، قصد داریم در این مورد صحبت کنیم.

مودهای نوشتاری

منظور از مود نوشتاری (writing mode) در CSS، افقی یا عمودی بودن متن است. در این زمینه، یک پراپرتی با نام writing-mode وجود دارد که امکان تغییر یک مود نوشتاری به یک مود دیگر را به ما می‌دهد. طبیعتاً یک دلیل خوب برای استفاده از این پراپرتی، کار کردن با زبان‌هایی است که دارای مود نوشتاری عمودی هستند اما این کار می‌تواند با انگیزه‌های مربوط به طراحی هم انجام شود. برای مثال، در کد زیر مود نوشتاری عنصر h1 را تغییر داده‌ایم تا به صورت عمودی در صفحه نمایش داده شود.

CSS

h1{
  writing-mode: vertical-lr;
  padding: 10px;
  background-color: cadetblue;
  color: white;
}

در این مثال از مقدار vertical-lr برای پراپرتی writing-mode استفاده شده که به معنای تغییر مود نوشتاری به عمودی و جهت‌گیری چپ‌به‌راست است. به طور کلی، پراپرتی writing-mode می‌تواند یکی از مقادیر زیر را دریافت کند:

• vertical-lr: مود نوشتاری عمودی و جهت‌گیری چپ‌به‌راست.
• vertical-rl: مود نوشتاری عمودی و جهت‌گیری راست‌به‌چپ.
• horizontal-tb: مود نوشتاری افقی و جهت‌گیری بالا‌به‌پایین.

مودهای نوشتاری و طرح‌بندی block و inline

برای درک صحیح و کامل مفهوم مودهای نوشتاری و عملکرد دقیق پراپرتی writing-mode باید با اصطلاحات جهت‌گیری block و جهت‌گیری inline آشنا شویم. تصویر زیر، جهت‌گیری block و inline را برای یک عنصر وب در حالت پیش‌فرض، یعنی حالتی که از مقدار horizontal-tb برای پراپرتی writing-mode استفاده می‌شود، نشان می‌دهد.

بنابراین، مقدار horizontal-tb در واقع به این معناست که جهت‌گیری block به صورت بالا‌به‌پایین (tb) و جهت‌گیری inline به صورت افقی (horizontal) باشد.

تصویر زیر نیز جهت‌گیری inline و block را برای عنصری که از مقدار vertical-rl برای پراپرتی writing-mode استفاده کرده، نشان می‌دهد.

بنابراین، وقتی ما مود نوشتاری عنصری را با استفاده از پراپرتی writing-mode تغییر می‌دهیم، در واقع، در حال تغییر جهت‌گیری‌های inline و block برای آن عنصر هستیم. حالا مثال زیر را ببینید.

CSS

.vertical{
  writing-mode: vertical-rl;
  width: 150px;
  border: 3px solid gray;
}

علاوه بر مود نوشتاری، جهت (direction) متن نیز مهم است. زبان‌هایی مانند فارسی و عربی به صورت افقی نوشته می‌شوند اما از راست به چپ. به هر حال، با توجه به اینکه مود نوشتاری و جهت متن را می‌توان تغییر داد، روش‌های طرح‌بندی جدیدتر در CSS به جای اتکا به چپ و راست و بالا و پایین، از شروع و پایان به همراه ایده‌ی inline و block استفاده می‌کنند. در این مورد در درس‌های آینده صحبت خواهیم کرد.

پراپرتی‌ها و مقادیر منطقی

قبل از هر چیز، نگاهی به مثال زیر بیندازید که در آن دو باکس داریم که یکی دارای مود نوشتاری horizontal-tb و دیگری دارای مود نوشتاری vertical-rl است.

CSS

.horizontal{
  writing-mode: horizontal-tb;
}

.vertical{
  writing-mode: vertical-rl;
}

هر دوی این باکس‌ها دارای عرض 150px هستند و همانطور که می‌بینید، در مورد باکسِ دارای مود نوشتاری عمودی، سرریز محتوا رخ داده است، چون محتوا به بیش از 150px فضا نیاز دارد. پس، در حالت پیش‌فرض، با تغییر مود نوشتاری، جابجایی بین عرض و ارتفاع باکس رخ نمی‌دهد؛ یعنی با افزایش محتوا، گسترش یا بسط باکس در جهت block جدید اتفاق نمی‌افتد، بلکه همچنان در جهت block سابق رخ می‌دهد. گاهی اوقات ممکن است این امر مطلوب ما نباشد و در عوض بخواهیم ترتیبی دهیم که با تغییر مود نوشتاری، عرض و ارتفاع باکس نیز از این تغییر متأثر شده و باکس همانند مود نوشتاری در جهت block گسترش یابد. پراپرتی‌ها و مقادیر منطقی (logical) انجام این کار را ساده‌تر می‌کنند.

پراپرتی‌های منطقی را پراپرتی‌های نگاشت‌شده (mapped) نیز می‌نامند زیرا هر یک از این پراپرتی‌ها متناظر با یک پراپرتی فیزیکی هستند و به عبارت دیگر، به یک پراپرتی فیزیکی نگاشته می‌شوند. برای مثال، پراپرتی منطقی متناظر با پراپرتی فیزیکی width در مود نوشتاری افقی، پراپرتی inline-size است که به سایزِ جهت یا بعد inline اشاره می‌کند. پراپرتی متناظر با height نیز پراپرتی block-size است که به سایز جهت یا بعد block اشاره می‌کند. در مثال زیر، به جای width از پراپرتی منطقی متناظر آن یعنی inline-size استفاده کرده‌ایم.

CSS

.box{
  inline-size: 150px;
  border: 3px solid gray;
  margin: 20px;
  padding: 15px;
  font-size: 1.5em;
}

پراپرتی‌های منطقی margin، border و padding

در مورد پراپرتی‌های margin، border و padding هم نمونه‌های زیادی از پراپرتی‌های فیزیکی وجود دارد. برای مثال، می‌توانیم از پراپرتی‌های margin-top، padding-left و border-bottom نام ببریم. همانند width و height برای این پراپرتی‌ها نیز معادل‌های منطقی وجود دارد:

• پراپرتی منطقی متناظر با margin-top پراپرتی margin-block-start است که همواره به حاشیه‌ی آغازین جهت یا بعد block اشاره می‌کند.
• پراپرتی فیزیکی padding-left به پراپرتی منطقی padding-inline-start نگاشته می‌شود که به padding اعمال‌شده روی ابتدا یا شروع جهت یا بعد inline اشاره می‌کند؛ یعنی همان جایی که جمله‌ها در آن مود نوشتاری شروع می‌شوند.
• پراپرتی فیزیکی border-bottom متناظر با پراپرتی منطقی border-block-end است که به فریم انتهای بعد یا جهت inline اشاره می‌کند.

تفاوت مهم بین پراپرتی‌های فیزیکی و منطقی این است که اگر مود نوشتاری یک باکس را با تغییر مقدار پراپرتی writing-mode تغییر دهیم، پراپرتی‌های فیزیکی همچنان به جهت‌گیری فیزیکی آنها وابسته هستند اما پراپرتی‌های منطقی به همراه مود نوشتاری تغییر می‌کنند.

پراپرتی‌های منطقی نسبتاً جدید محسوب می‌شوند و زمان زیادی از اقدام مرورگرها به پیاده‌سازی آنها نمی‌گذرد و لذا خیلی منطقی نیست که در این مقطع، به جای پراپرتی‌های فیزیکی از معادل‌های منطقی آنها استفاده کنیم. اما از طرف دیگر، انتظار می‌رود که به مرور زمان، پراپرتی‌های منطقی با توجه به مزایایی که هنگام کار با روش‌های مدرن طرح‌بندی مانند grid و flex دارند، کاملاً جایگزین پراپرتی‌های فیزیکی شوند.