دو محوری که کل Logical Properties بر آنها بنا شده: Block Axis و Inline Axis
در درس قبل، بهطور مقدماتی با Block Axis و Inline Axis آشنا شدیم. چون این دو مفهوم، پایهی تمام Propertyهای Logical هستن که در ادامه این فصل میبینیم، این درس رو کاملاً به بررسی عمیقتر و دقیقتر همین دو محور اختصاص میدیم.
یادآوری تعریف پایه
در فصل ۵، هنگام بحث درباره Normal Flow، به این دو محور اشاره کوتاهی داشتیم؛ حالا با جزئیات کامل میبینیمشون:
- Inline Axis: محوری که متن، درون یک خط، پیش میره.
- Block Axis: محوری که بلوکهای محتوا (مثل پاراگرافها)، یکی بعد از دیگری، قرار میگیرن.
Inline Axis: محور جریان متن
<p>این یک جمله است که کلمات آن پشت سر هم قرار میگیرند.</p>وقتی یک جمله رو میخونیم، کلمات بهترتیب، در طول یک محور خاص، پشت سر هم قرار میگیرن. این محور، Inline Axis است. در یک سند فارسی (که راستبهچپ نوشته میشه)، این محور از راست به چپ جهت داره؛ یعنی اولین کلمه، سمت راستترین کلمه است، و با پیش رفتن جمله، به سمت چپ حرکت میکنیم.
Block Axis: محور چیدمان بلوکها
<p>پاراگراف اول.</p>
<p>پاراگراف دوم.</p>
<p>پاراگراف سوم.</p>حالا بهجای یک جمله، سه پاراگراف جدا از هم داریم. این پاراگرافها، همونطور که در فصل ۵ با Normal Flow دیدیم، بهطور پیشفرض، یکی زیر دیگری قرار میگیرن. این محور عمودی، که بلوکهای محتوا رو از هم جدا میکنه، Block Axis نام داره. برخلاف Inline Axis که جهتش بین زبانهای مختلف عوض میشه، Block Axis در اکثر زبانهای رایج (چه فارسی، چه انگلیسی، چه عربی)، همیشه از بالا به پایین جهت داره.
ترکیب این دو محور: چطور یک متن کامل رو میسازن؟
.text-block {
width: 300px;
}<div class="text-block" dir="rtl">
این یک پاراگراف طولانی است که چندین خط را اشغال میکند و باید بشکند.
</div>در یک پاراگراف طولانی که به چند خط میشکنه، هر دو محور همزمان نقش دارن: کلمات داخل هر خط، در طول Inline Axis (که در این مثال، چون dir="rtl" است، از راست به چپه) پیش میرن؛ و وقتی یک خط تموم میشه، خط بعدی، در طول Block Axis (از بالا به پایین)، زیر خط قبلی قرار میگیره.
Start و End: نقاط ابتدا و انتها روی هر محور
هر کدوم از این دو محور، دو نقطه انتهایی دارن که بهجای «چپ/راست» یا «بالا/پایین»، با اصطلاحات Start (شروع) و End (پایان) نامگذاری میشن.
| محور | نقطه Start | نقطه End |
|---|---|---|
| Inline Axis | Inline Start (جایی که متن شروع میشود) | Inline End (جایی که متن تمام میشود) |
| Block Axis | Block Start (بالاترین بلوک) | Block End (پایینترین بلوک) |
مقایسه دقیق این نقاط در دو جهت مختلف سند
| مفهوم منطقی | معادل فیزیکی در LTR (مثل انگلیسی) | معادل فیزیکی در RTL (مثل فارسی) |
|---|---|---|
| Inline Start | چپ | راست |
| Inline End | راست | چپ |
| Block Start | بالا | بالا |
| Block End | پایین | پایین |
همونطور که در این جدول کاملاً مشخصه، تفاوت اصلی بین دو جهت سند، فقط در محور Inline دیده میشه؛ محور Block، در هر دو حالت، ثابت و یکسان باقی میمونه.
چرا این دو اصطلاح، بهجای «افقی» و «عمودی»، انتخاب شدهاند؟
ممکنه این سؤال پیش بیاد که چرا بهجای «افقی» و «عمودی» (که واضحتر بهنظر میرسن)، از «Inline» و «Block» استفاده میشه. دلیلش اینه که، همونطور که در درس قبل هم اشاره کردیم، در بعضی از زبانها و حالتهای نوشتاری خاص (مثل بعضی از حالتهای سنتی نوشتار عمودی در ژاپنی)، حتی محور Block هم میتونه افقی باشه؛ و در اون حالت، محور Inline، عمودی میشه! این حالتهای خاص، با Property به اسم writing-mode، که در درس بعدی همین فصل بهطور مختصر بهش اشاره میکنیم، قابلکنترله. به همین دلیل، اصطلاحات Inline و Block، مستقل از جهت واقعی نمایش، همیشه معنای یکسانی («جهت متن» و «جهت چیدمان بلوکها») دارن؛ در حالی که «افقی» و «عمودی» ممکنه بسته به حالت نوشتاری، معنای متفاوتی پیدا کنن.
ارتباط این دو محور با Flexbox و Grid
یک نکته جالب: مفاهیم Main Axis و Cross Axis که در فصل Flexbox خواهیم دید، مفهوماً به همین Inline Axis و Block Axis وابستهان (هرچند دقیقاً یکسان نیستن، چون در Flexbox میشه جهت رو دستی هم عوض کرد). درک درست Inline و Block در همینجا، پایه خوبی برای فهم بهتر Flexbox و Grid در فصلهای آینده خواهد بود.
یک مثال جمعبندیکننده
.notification {
padding-block: 12px;
padding-inline: 16px;
border-inline-start: 4px solid crimson;
}در این مثال (که Propertyهای دقیقش رو در درس بعدی همین فصل کامل میبینیم)، padding-block به فاصله در محور Block (بالا و پایین) اشاره داره، و padding-inline به فاصله در محور Inline (شروع و پایان متن) اشاره داره. border-inline-start هم، دقیقاً همون نواریست که در درس قبل دیدیم؛ در سمت شروع متن (که بسته به جهت سند، میتونه چپ یا راست باشه) ظاهر میشه.
نکات مهم
- Inline Axis محور جریان متن است و جهتش بین زبانهای LTR و RTL متفاوت است.
- Block Axis محور چیدمان بلوکهای محتواست و در اکثر زبانهای رایج، همیشه از بالا به پایین است.
- اصطلاحات Start و End، بهجای چپ/راست یا بالا/پایین فیزیکی، برای توصیف نقاط ابتدا و انتهای هر محور استفاده میشوند.
اشتباهات رایج
- تصور اینکه Inline Axis همیشه معادل «افقی» و Block Axis همیشه معادل «عمودی» است؛ در حالی که در حالتهای نوشتاری خاص، این معادلسازی میتواند برعکس شود.
- فراموش کردن اینکه در محور Inline، برخلاف Block، جهت Start و End بین اسناد LTR و RTL کاملاً معکوس میشود.
جمعبندی
Inline Axis محور جریان متن در یک خط است و جهتش وابسته به زبان سند (LTR یا RTL) تغییر میکند؛ Block Axis محور چیدمان بلوکهای محتوا (مثل پاراگرافها) است و در اکثر زبانهای رایج، ثابت و از بالا به پایین باقی میماند. هر دو محور، نقاط Start و End خودشان را دارند که پایهی تمام Propertyهای Logical در درسهای بعدی این فصل خواهند بود.