CSS text-wrap: زیبا

انتخاب بهینه سازی بسته بندی متن، برای زیبایی بیش از سرعت.

Adam Argyle

از Chrome 117 می‌توانید از ویژگی بسته‌بندی متن جدید استفاده کنید- text-wrap: pretty از CSS Text Level 4 .

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

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

منبع تصویر از فونت های Google—Widows & Orphans

از Chrome 117، می‌توان با یک خط CSS از یتیمان جلوگیری کرد: text-wrap: pretty .

توجه: text-wrap: pretty با ویژگی orphans CSS که هنگام استفاده از طرح بندی چند ستونی CSS مرتبط است متفاوت است. همچنین، pretty فقط یتیمان را اداره می کند، نه بیوه ها.

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

منبع تصویر چرا باید یتیمان را از متن بدن خود حذف کنید.

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

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

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