Green Data

وقتی محورها کاملاً می‌چرخند: Writing Modes

در درس‌های قبل، چندبار اشاره کردیم که در بعضی از حالت‌های نوشتاری خاص، حتی Block Axis هم می‌تونه از حالت عمودی معمول خارج بشه. حالا وقتشه دقیق ببینیم این اتفاق چطور رخ می‌ده و Property به اسم writing-mode چطور این رفتار رو کنترل می‌کنه.

writing-mode چیست؟

Property به اسم writing-mode مشخص می‌کنه محتوای یک عنصر، در چه جهتی و بر چه محوری، جریان پیدا کنه؛ یعنی دقیقاً همون چیزی که تعیین می‌کنه کدوم محور (افقی یا عمودی) نقش Inline Axis رو بازی کنه و کدوم، نقش Block Axis.

مقدار پیش‌فرض: horizontal-tb

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

horizontal-tb (Horizontal, Top-to-Bottom) مقدار پیش‌فرض تمام عناصره؛ همون رفتاری که در تمام این دوره تا الان باهاش کار کردیم. در این حالت، Inline Axis افقیه (متن به‌صورت افقی پیش می‌ره) و Block Axis عمودیه، از بالا به پایین (خطوط و بلوک‌ها، زیر هم قرار می‌گیرن).

vertical-rl: نوشتار عمودی، از راست به چپ

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

<div class="vertical-text">
  این متن به‌صورت عمودی نمایش داده می‌شود.
</div>

vertical-rl (Vertical, Right-to-Left) کاملاً محورها رو می‌چرخونه: حالا Inline Axis عمودیه (متن از بالا به پایین پیش می‌ره، نه چپ به راست)، و Block Axis افقیه، از راست به چپ (یعنی ستون‌های جدید متن، به‌جای پایین، در سمت چپِ ستون قبلی ظاهر می‌شن). این حالت، دقیقاً همون سبک نوشتاری سنتی‌ست که در فصل ۱۱-۲ بهش اشاره کردیم؛ رایج در نوشتار سنتی ژاپنی و چینی.

vertical-lr: نوشتار عمودی، از چپ به راست

.vertical-text-lr {
  writing-mode: vertical-lr;
}

vertical-lr (Vertical, Left-to-Right) دقیقاً مشابه vertical-rl است، با این تفاوت که Block Axis، به‌جای راست به چپ، از چپ به راست جهت داره؛ یعنی ستون‌های جدید متن، در سمت راستِ ستون قبلی ظاهر می‌شن.

جدول جمع‌بندی سه مقدار اصلی

مقدار	Inline Axis	Block Axis
horizontal-tb (پیش‌فرض)	افقی	عمودی (از بالا به پایین)
vertical-rl	عمودی (از بالا به پایین)	افقی (از راست به چپ)
vertical-lr	عمودی (از بالا به پایین)	افقی (از چپ به راست)

چرا این مفهوم برای Logical Properties اهمیت دارد؟

.box {
  writing-mode: vertical-rl;
  margin-block-start: 20px;
  padding-inline: 10px;
}

اینجا دقیقاً همون نکته‌ای مطرح می‌شه که در درس‌های قبل، به‌طور تئوری بهش اشاره کردیم: چون از Logical Properties (مثل margin-block-start و padding-inline) استفاده کردیم، نه معادل فیزیکی‌شون، این مقادیر به‌طور خودکار با تغییر writing-mode هماهنگ می‌شن. یعنی margin-block-start، در حالت horizontal-tb معادل «فاصله از بالا»ست، ولی در حالت vertical-rl، همون Property، بدون این‌که ما هیچ خط کدی تغییر بدیم، به‌طور خودکار معادل «فاصله از راست» می‌شه؛ چون این‌بار، محور Block، افقی و از راست شروع می‌شه.

اگه به‌جای این، از margin-top فیزیکی استفاده کرده بودیم، با تغییر writing-mode، این Property همچنان «فاصله از بالا» باقی می‌موند؛ که در حالت عمودی، احتمالاً معنای درستی نداشت. این دقیقاً همون قدرت اصلی Logical Properties‌ه که در این فصل دنبالش بودیم.

کاربردهای عملی writing-mode در پروژه‌های امروزی

هرچند writing-mode با مقادیر عمودی، بیشتر برای نوشتار سنتی زبان‌های شرق آسیا کاربرد داره (و در پروژه‌های فارسی‌زبان، معمولاً به‌ندرت مستقیماً استفاده می‌شه)، ولی چند کاربرد جانبی جالب هم داره:

.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

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

یک نکته درباره سازگاری با Logical Properties دیگر

تمام مفاهیمی که در درس‌های قبل این فصل دیدیم (مثل inset-inline که در درس‌های بعدی می‌بینیم، یا text-align: start که در فصل ۸ بهش اشاره کوتاهی داشتیم)، همگی به همین اصل پایه وابسته‌ان: تعریف شدن نسبت به Inline Axis و Block Axis، نه جهت‌های فیزیکی ثابت. به همین دلیل، writing-mode رو می‌شه به‌عنوان «تنظیم اصلی» در نظر گرفت که جهت این دو محور رو مشخص می‌کنه، و بقیه Logical Propertyها، به‌طور خودکار از این تنظیم پیروی می‌کنن.

نکات مهم

writing-mode مشخص می‌کند کدام محور فیزیکی (افقی یا عمودی)، نقش Inline Axis و کدام، نقش Block Axis را بازی می‌کند.
مقدار پیش‌فرض، horizontal-tb است؛ مقادیر vertical-rl و vertical-lr، این محورها را کاملاً می‌چرخانند.
استفاده از Logical Properties (به‌جای فیزیکی)، تضمین می‌کند که طراحی، بدون نیاز به بازنویسی، با تغییر writing-mode هم‌زمان و درست هماهنگ شود.

اشتباهات رایج

تصور اینکه writing-mode فقط برای زبان‌های خاص شرق آسیا کاربرد دارد و هیچ ارتباطی با پروژه‌های فارسی یا انگلیسی ندارد؛ در حالی که درک آن، مبنای فهم عمیق‌تر Logical Properties است.
استفاده از Propertyهای فیزیکی در طراحی‌هایی که ممکن است در آینده از writing-mode عمودی استفاده کنند، که باعث از‌بین‌رفتن هماهنگی خودکار می‌شود.

جمع‌بندی

Property به اسم writing-mode، جهت Inline Axis و Block Axis را کنترل می‌کند؛ مقدار پیش‌فرض (horizontal-tb) همان رفتار افقی معمول است، در حالی که vertical-rl و vertical-lr، این دو محور را کاملاً می‌چرخانند و بیشتر در نوشتار سنتی زبان‌های شرق آسیا کاربرد دارند. اهمیت اصلی این مفهوم برای این فصل این است که نشان می‌دهد چرا Logical Properties، برخلاف معادل فیزیکی‌شان، همیشه به‌طور خودکار با هر تنظیم writing-mode هماهنگ باقی می‌مانند.

Writing Modes