بهبود چیدمان و خوانایی نوشتار

چیدمان نوشتار، به‌ویژه در انتهای خطوط و انتهای پاراگراف‌ها، می‌تواند بر خوانایی و جذابیت زیبایی‌شناختی صفحه تأثیر بگذارد. ‫CSS چندین گزینه شکست نوشتار ارائه می‌دهد که می‌تواند موارد استفاده خاص را بهبود بخشد.

برای بلوک‌های نوشتاری کوتاه مثل عنوان‌ها، از text-wrap: balance استفاده کنید. این ویژگی به مرورگر دستور می‌دهد تا نوشتار را تا حد امکان به‌طور یکنواخت در خطوط توزیع کند و ظاهری متقارن‌تر ایجاد کند.

ویژگی CSS‏ text-wrap: pretty به شما امکان می‌دهد با فعال کردن الگوریتم پیچیده‌تر پیچیدن، کیفیت تایپوگرافی متن اصلی را بهبود بخشید. این ویژگی به‌طور خاص برای جلوگیری از «یتیم‌ها» (تک کلمه‌ها در آخرین خط پاراگراف) و ایجاد «حاشیه نامنظم» بصری دلپذیرتر برای بلوک‌های طولانی نوشتار طراحی شده است.

پیاده‌سازی

۱. شناسایی عناصر نوشتاری:

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

برای text-wrap: pretty، عناصری را انتخاب کنید که احتمالاً حاوی متن‌های طولانی هستند و کلمات تک‌افتاده (کلمات کوتاه) یا شکستگی‌های نامناسب خط در آن‌ها بیشتر به چشم می‌آید. این شامل عناصر زیر است:

• <p>
• <blockquote>
• <li>
• هر عنصر دیگری که احتمالاً حاوی نوشتارهای طولانی باشد.

انتخاب روش بسته‌بندی مناسب

۲. اعمال کردن پیچش انتخاب‌شده:

text-wrap: balance را به‌طور خاص برای عناصر کوتاه و چندخطی مانند عنوان‌ها (h1-h6)، عنوان‌های فرعی، یا نقل‌قول‌های برجسته اعمال کنید.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

از text-wrap: pretty برای فعال کردن الگوریتم بهینه‌شده‌ای استفاده کنید که چند خط آخر پاراگراف را ارزیابی می‌کند تا بهترین نقاط شکست را پیدا کند.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

محدودیت‌ها و عملکرد بحرانی

text-wrap: balance

• محدودیت خط: مرورگرها برای حفظ عملکرد، محدودیتی بر تعداد خطوطی که تلاش می‌کنند تراز کنند اعمال می‌کنند (معمولاً ۶ خط در Chromium و ۱۰ خط در Firefox). اگر نوشتار از این حد فراتر رود، مرورگر به رفتار استاندارد wrap برمی‌گردد. از به‌کار بردن text-wrap: balance در بلوک‌های نوشتاری که احتمالاً از این محدودیت‌ها فراتر می‌روند خودداری کنید.
• برنامه هدف: text-wrap: balance را به‌طور سراسری اعمال نکنید (مثلاً * { text-wrap: balance; }). الگوریتم تکراری «جستجوی دودویی» که مرورگرها استفاده می‌کنند ازنظر محاسباتی پرهزینه است. استفاده از آن را به عناصر نوشتاری کوتاه و خاص محدود کنید.
• تعامل با عرض: text-wrap: balance عرض ظرف (inline-size) را تغییر نمی‌دهد. فقط بر نحوه پیچیدن نوشتار درون آن عرض تأثیر می‌گذارد. این کار می‌تواند فضای خالی در انتهای محفظه ایجاد کند که ممکن است بر چیدمان‌هایی که به بلوک‌های نوشتاری تمام‌عرض متکی هستند تأثیر بگذارد.

text-wrap: pretty

• عملکرد درمقابل کیفیت: اجباری: text-wrap: pretty از الگوریتم پیش‌فرض wrap (حریصانه) ازنظر محاسباتی گران‌تر است زیرا چندین خط (معمولاً چهار خط آخر) را برای بهینه‌سازی نقاط شکست ارزیابی می‌کند. اگر صفحه‌تان مقدار بسیار زیادی محتوای نوشتاری دارد، از اعمال آن به‌صورت سراسری روی همه عناصر خودداری کنید.
• بهترین گزینه برای نوشتار چندخطی: مزایای pretty بیشتر در بندهای سه خطی یا بیشتر نمایان می‌شود. این ویژگی بر نوشتار کوتاه تک‌خطی تأثیر کمی دارد یا اصلاً تأثیری ندارد.
• رفتار مختص مرورگر: توجه داشته باشید که جزئیات پیاده‌سازی متفاوت است. مرورگرهای مبتنی بر Chromium معمولاً روی چهار خط آخر تمرکز می‌کنند، درحالی‌که موتورهای دیگر ممکن است کل پاراگراف را ارزیابی کنند.

راهبردهای جایگزین

در مرورگرهایی که از text-wrap: balance یا text-wrap: pretty پشتیبانی نمی‌کنند، این ویژگی نادیده گرفته می‌شود و نوشتار بااستفاده از رفتار پیش‌فرض wrap پیچانده می‌شود. این یک ارتقای پیش‌رو است که به‌طور متین به طرح حروف استاندارد تنزل می‌کند. این کار تضمین می‌کند که محتوای شما در همه مرورگرها کاملاً خوانا باقی بماند و درعین‌حال تجربه برتری را برای کسانی که از آن پشتیبانی می‌کنند فراهم می‌کند.

برای چیدمان‌های مهم که چیدمان نوشتار اصلاح‌شده در آن‌ها الزامی است، از کتابخانه جاوا اسکریپت استفاده کنید، اما توجه داشته باشید که این کار ممکن است کند باشد و باعث مشکلات عملکرد شود.