CSS text-wrap: تعادل

یک تکنیک تایپوگرافی کلاسیک که شامل ایجاد خطوط شکسته با دست برای ایجاد بلوک‌های متنی متوازن بود، به CSS می‌آید.

Adam Argyle

مقدار balance برای text-wrap بخشی از CSS Text Level 4 است. به مثال‌های این پست نگاهی بیندازید تا یاد بگیرید که چگونه این یک خط CSS می‌تواند طرح‌بندی متن شما را به طور چشمگیری بهبود بخشد.

بدون text-wrap: balance ؛ طراحان، ویراستاران محتوا و ناشران ابزارهای کمی برای تغییر نحوه‌ی متعادل‌سازی خطوط دارند.. بهترین گزینه‌های موجود استفاده از <wbr> یا ­ برای کمک به هدایت طرح‌بندی‌های متن به سمت تصمیم‌گیری‌های هوشمندانه‌تر در مورد محل شکستن خطوط و کلمات است.

به عنوان یک توسعه‌دهنده، شما اندازه نهایی، اندازه فونت یا حتی زبان یک تیتر یا پاراگراف را نمی‌دانید. تمام متغیرهای مورد نیاز برای یک رفتار مؤثر و زیبا در چیدمان متن، در مرورگر هستند. به همین دلیل است که چیدمان تیتر را مانند تصویر زیر می‌بینیم:

.unbalanced {
  max-inline-size: 50ch;
}

با استفاده از text-wrap: balance از CSS Text 4 ، می‌توانید از مرورگر بخواهید که بهترین راه‌حل متعادل برای چیدمان خطوط متن را پیدا کند. مرورگر تمام عوامل مانند اندازه فونت، زبان و فضای اختصاص داده شده را می‌داند . نتایج چیدمان متن متعادل مرورگر امروزه به این شکل است:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

دیدن آنها در کنار هم، ثابت و بدون همپوشانی اطلاعات اشکال‌زدایی مفید است.

چشم شما باید از بلوک متن متعادل بسیار راضی‌تر باشد. این بلوک توجه را بهتر جلب می‌کند و در کل خواندن آن آسان‌تر است.

پیدا کردن تعادل

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

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

متعادل‌سازی متن در تایپوگرافی به روزهای اولیه چاپ برمی‌گردد، زمانی که چاپگرها حروف را با دست جایگذاری می‌کردند. با تکامل ابزارها و تکنیک‌ها، نتایج نیز تغییر کردند. این روزها، طراحان برای متعادل‌سازی متن در طرح‌های خود، از رنگ، وزن، اندازه و موارد دیگر استفاده می‌کنند.

با این حال، در وب، کنترل کمتری در دسترس است زیرا اندازه و رنگ سند بر اساس کاربران تغییر می‌کند. text-wrap: balance هنر متعادل‌سازی متن را به صورت خودکار به وب می‌آورد و بر اساس کار و سنت‌های طراحان صنعت چاپ بنا شده است.

تیترهای متوازن

این مورد، و باید، مورد استفاده اصلی برای text-wrap: balance باشد. با استفاده از اندازه، چشم را ترسیم کنید و آن را متقارن و خوانا برای چشم بسازید. با استفاده از CSS زیر، تمام تیترها را به صورت متوازن در کنار هم قرار دهید:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

اعمال این استایل به تنهایی ممکن است نتایج مورد انتظار شما را فراهم نکند، زیرا متن نیاز به پیچیدن دارد و بنابراین باید حداکثر طول خط از جایی اعمال شود. در مثال‌های این پست، مجموعه max-inline-size را مشاهده خواهید کرد، این استایل مانند max-width است اما می‌تواند برای هر زبانی یک بار تنظیم شود.

محدودیت‌ها

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

ملاحظات عملکرد

اعمال متعادل‌سازی متن در کل طراحی ایده خوبی نیست. به دلیل محدودیت شش خط، این یک درخواست بیهوده است و ممکن است بر سرعت رندر صفحه تأثیر بگذارد.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

یک مزیت بزرگ این ویژگی این است که دیگر نیازی نیست منتظر بمانید و زمان متعادل‌سازی متن را با بارگذاری فونت تنظیم کنید، کاری که امروزه ممکن است با جاوا اسکریپت انجام دهید. مرورگر این کار را انجام می‌دهد!

تعاملات با ویژگی white-space

متعادل‌سازی متن با ویژگی white-space رقابت می‌کند زیرا یکی عدم پوشش‌دهی و دیگری پوشش‌دهی متعادل را درخواست می‌کند. با غیرفعال کردن ویژگی فضای سفید، بر این مشکل غلبه کنید، سپس پوشش‌دهی متعادل می‌تواند دوباره اعمال شود.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

متعادل‌سازی، اندازه درون‌خطی عنصر را تغییر نمی‌دهد

برخی از راه‌حل‌های جاوااسکریپت برای بسته‌بندی متن متوازن، مزیتی دارند، زیرا max-width عنصر حاوی خود را تغییر می‌دهند. این مزیت اضافی را دارد که به بلوک متوازن "جمع می‌شود". text-wrap: balance این اثر را ندارد و می‌توان آن را در این مثال مشاهده کرد:

می‌بینید که چطور عرض نشان داده شده از DevTools در انتها فضای اضافی زیادی دارد؟ دلیلش این است که فقط یک سبک wrapping است، نه یک سبک تغییر اندازه. به همین دلیل، چند سناریو وجود دارد که text-wrap: balance در آنها خیلی خوب نیست، حداقل به نظر من. به عنوان مثال، عنوان‌های داخل یک کارت (یا هر ظرفی با حاشیه یا سایه).

چیدمان متعادل متن به طرز طعنه‌آمیزی باعث ایجاد عدم تعادل در عنصر موجود می‌شود.

توضیح مختصری از تکنیکی که مرورگر استفاده می‌کند

مرورگر عملاً یک جستجوی دودویی برای کوچکترین عرض انجام می‌دهد که هیچ خط اضافی ایجاد نمی‌کند و در یک پیکسل CSS (نه پیکسل نمایش) متوقف می‌شود. برای به حداقل رساندن مراحل جستجوی دودویی، مرورگر با ۸۰٪ از میانگین عرض خط شروع می‌کند.