CSS có kỹ thuật kiểu chữ cổ điển giúp sắp xếp các dấu ngắt dòng bằng tay cho các khối văn bản cân bằng.
Giá trị balance cho text-wrap là một phần của Văn bản CSS cấp 4. Hãy xem các ví dụ trong bài đăng này để tìm hiểu cách
một dòng CSS này có thể cải thiện đáng kể bố cục văn bản của bạn.
Nếu không có text-wrap: balance; nhà thiết kế, người chỉnh sửa nội dung và nhà xuất bản có một số công cụ để thay đổi cách cân bằng các đường kẻ. Tốt nhất là bạn nên sử dụng <wbr> hoặc ­ để giúp hướng dẫn bố cục văn bản đưa ra các quyết định thông minh hơn về vị trí ngắt dòng và các từ.
Là nhà phát triển, bạn không biết kích thước cuối cùng, kích thước phông chữ hoặc thậm chí không biết ngôn ngữ của dòng tiêu đề hay đoạn văn. Tất cả biến cần thiết để xử lý tính năng xuống dòng tự động một cách hiệu quả và thẩm mỹ đều nằm trong trình duyệt. Đây là lý do tại sao chúng ta thấy dòng tiêu đề được gói như trong hình sau:
.unbalanced {
max-inline-size: 50ch;
}
Với text-wrap: balance trong CSS Text 4, bạn có thể yêu cầu trình duyệt tìm ra giải pháp xuống dòng cân bằng tốt nhất cho văn bản. Trình duyệt biết tất cả các yếu tố, như kích thước phông chữ, ngôn ngữ và khu vực phân bổ.
Kết quả xuống dòng tự động của trình duyệt sẽ có dạng như sau:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Bạn nên đặt các thẻ này cạnh nhau, tĩnh và không phủ thông tin gỡ lỗi.
Mắt bạn sẽ hài lòng hơn rất nhiều với khối văn bản cân bằng. Quảng cáo này thu hút sự chú ý tốt hơn và dễ đọc hơn về tổng thể.
Tìm sự cân bằng
Tiêu đề là nội dung đầu tiên mà độc giả nhìn thấy; chúng nên bắt mắt và dễ đọc. Điều này thu hút sự chú ý của người dùng, đồng thời mang lại cảm giác yên tâm và chất lượng cao. Kiểu chữ tốt mang lại sự tự tin cho người đọc, khuyến khích họ tiếp tục đọc.
Thông thường, nhiệm vụ này được thực hiện bằng tay hoặc theo phương pháp quang học, vì nhà thiết kế cân bằng văn bản chứ không phải toán học. Chủ đề này thường được gọi là căn chỉnh chỉ số so với căn chỉnh quang học. Đối với các ấn bản lớn như New York Times, việc cân bằng dòng tiêu đề là một chi tiết rất quan trọng đối với trải nghiệm người dùng.
Việc cân bằng văn bản trong kiểu chữ có từ thời kỳ đầu khi in ấn, khi máy in in trao tay chữ cái. Khi các công cụ và kỹ thuật phát triển, kết quả cũng thay đổi theo. Ngày nay, các nhà thiết kế sử dụng màu sắc, trọng lượng, kích thước và nhiều yếu tố khác để cân bằng văn bản trong thiết kế.
Tuy nhiên, trên web, mọi người có ít quyền kiểm soát hơn vì tài liệu thay đổi kích thước và màu sắc tuỳ theo người dùng. text-wrap: balance đưa nghệ thuật cân bằng văn bản lên web theo cách tự động, được xây dựng dựa trên công việc và truyền thống của các nhà thiết kế trong ngành in.
Cân bằng dòng tiêu đề
Đây sẽ và phải là trường hợp sử dụng chính của text-wrap: balance. Vẽ mắt theo kích thước và làm cho mắt đối xứng và dễ đọc. Đặt tất cả các dòng tiêu đề thành xuống dòng tự động cân bằng bằng CSS sau:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Việc chỉ áp dụng kiểu này có thể không cung cấp cho bạn kết quả như mong đợi, vì văn bản cần phải bao bọc và do đó áp dụng độ dài dòng tối đa ở nơi nào đó. Bạn sẽ thấy một max-inline-size được đặt trên các ví dụ trong bài đăng này. Kiểu này giống như max-width nhưng có thể đặt một lần cho bất kỳ ngôn ngữ nào.
Các điểm hạn chế
Nhiệm vụ cân bằng văn bản không miễn phí. Trình duyệt cần phải lặp lại nhiều lần để tìm ra giải pháp bao bọc cân bằng tốt nhất. Chi phí hiệu suất này được giảm thiểu bằng một quy tắc, chỉ hoạt động cho 6 dòng được gói trở xuống.
Xem xét hiệu suất
Bạn không nên áp dụng cách cân bằng xuống dòng tự động cho toàn bộ thiết kế của mình. Đây là một yêu cầu bị lãng phí do giới hạn 6 dòng và có thể ảnh hưởng đến tốc độ hiển thị trang.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Lợi ích lớn của tính năng này là bạn không cần phải đợi và cân bằng thời gian bao bọc văn bản với tính năng tải phông chữ, như bạn có thể đang làm với JavaScript hiện nay. Trình duyệt sẽ xử lý vấn đề này!
Các hoạt động tương tác với thuộc tính white-space
Văn bản cân bằng cạnh tranh với thuộc tính white-space vì một thuộc tính yêu cầu không xuống dòng và thuộc tính còn lại yêu cầu gói cân bằng. Hãy khắc phục vấn đề này bằng cách huỷ đặt thuộc tính khoảng trắng, sau đó tính năng xuống dòng cân bằng có thể áp dụng lại.
.balanced {
white-space: unset;
text-wrap: balance;
}
Việc cân bằng sẽ không thay đổi kích thước cùng dòng của phần tử
Có một lợi thế trong một số giải pháp JavaScript để gói văn bản cân bằng, vì các giải pháp này thay đổi max-width của chính phần tử chứa. Tính năng này có thêm tính năng "rút gọn gói" thành khối cân bằng. text-wrap:
balance không có hiệu ứng này và bạn có thể thấy trong ví dụ sau:
Xem chiều rộng hiển thị từ Công cụ cho nhà phát triển có thêm không gian ở cuối như thế nào?
Đó là vì đó chỉ là kiểu gói, chứ không phải là kiểu thay đổi kích thước. Do đó, có một vài trường hợp mà text-wrap: balance không tốt lắm, ít nhất là trong một số trường hợp. Ví dụ: tiêu đề bên trong thẻ (hoặc bất kỳ vùng chứa nào có đường viền hoặc bóng).
Việc xuống dòng tự cân bằng sẽ khiến thành phần bên trong bị mất cân bằng.
Giải thích ngắn gọn về kỹ thuật mà trình duyệt đang sử dụng
Trình duyệt thực hiện việc tìm kiếm nhị phân một cách hiệu quả đối với chiều rộng nhỏ nhất mà không gây ra thêm dòng nào, chỉ dừng ở một pixel CSS (không phải pixel hiển thị). Để giảm thiểu các bước trong tìm kiếm nhị phân, trình duyệt sẽ bắt đầu với 80% chiều rộng trung bình của dòng.