انتخاب بهینه سازی بسته بندی متن، برای زیبایی بیش از سرعت.
از Chrome 117 می‌توانید از ویژگی بسته‌بندی متن جدید استفاده کنید- text-wrap: pretty از CSS Text Level 4 .
p {
text-wrap: pretty;
}
بیوه ها و یتیمان تایپوگرافیک کلماتی هستند که به تنهایی در انتهای یک پاراگراف یا بلوک متن قرار دارند. بیوه ها کلماتی به تنهایی در بالای یک بلوک متنی هستند و یتیمان تنها در انتهای یک بلوک متنی هستند. آنها می‌توانند روشی را که چشمان ما به متن نگاه می‌کنند، مختل کنند و خواندن محتوا را سخت‌تر کنند. برخی از طراحان به هر قیمتی از آنها اجتناب می کنند و برای جلوگیری از آنها تلاش زیادی می کنند.
از Chrome 117، می‌توان با یک خط CSS از یتیمان جلوگیری کرد: text-wrap: pretty .
این ویژگی کمی بیشتر از اطمینان از اینکه پاراگراف‌ها با یک کلمه ختم نمی‌شوند، انجام می‌دهد، همچنین اگر خطوط خط تیره متوالی در انتهای پاراگراف ظاهر می‌شوند یا خطوط قبلی را برای ایجاد فضا تنظیم می‌کند، خط فاصله را تنظیم می‌کند. همچنین به طور مناسب برای توجیه متن تنظیم می شود. text-wrap: pretty برای بسته بندی خط و شکستن متن به طور کلی بهتر است، که در حال حاضر روی کودکان بی سرپرست متمرکز شده است. در آینده، text-wrap: pretty ممکن است بهبودهای بیشتری ارائه دهد.
text-wrap: balance نیز وجود دارد که از یتیم شدن جلوگیری نمی‌کند، اما تضمین می‌کند که متن به‌گونه‌ای پیچیده شود که یک بلوک متنی هماهنگ ایجاد کند. من شخصاً از balance برای سرفصل ها و pretty برای پاراگراف ها استفاده می کنم.
اگر به جزئیات الگوریتم مورد استفاده برای تعیین تعداد بهینه خطوط یا ملاحظات عملکرد علاقه دارید، در اینجا پیوندی به سند طراحی ایجاد شده توسط مهندس پشت این ویژگی، کوجی ایشی، وجود دارد.
اگر پیشرفت‌ها یا پیشنهادات دیگری برای شکست خط دارید، مایلیم آنها را بشنویم! مشکلی را در ردیاب اشکال Chromium با جزئیات، نمونه‌هایی از شکستگی‌های خط خوب و بد ثبت کنید، و ما به شما پاسخ خواهیم داد.