CSS là một kỹ thuật kiểu chữ kinh điển dùng để 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 thuộc CSS Text Level 4 (Văn bản CSS 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 hàng loạt bố cục văn bản của bạn.
Nếu không có text-wrap: balance; các nhà thiết kế, người chỉnh sửa nội dung và nhà xuất bản sẽ có một số công cụ để thay đổi cách cân bằng giữa các dòng. Các lựa chọn tốt nhất hiện có là 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à 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ữ hay thậm chí là ngôn ngữ của dòng tiêu đề hoặc đoạn. Tất cả các biến cần thiết để xử lý gói văn bản 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 đề bao bọc như trong hình sau:
.unbalanced {
max-inline-size: 50ch;
}
Với text-wrap: balance từ CSS Text 4 (Văn bản CSS 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ố, chẳng hạn như kích thước phông chữ, ngôn ngữ và khu vực được phân bổ.
Kết quả xuống dòng tự động cân bằng trong trình duyệt như sau:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Sẽ rất hữu ích khi xem các thông tin này cạnh nhau, tĩnh mà không che thông tin gỡ lỗi.
Mắt bạn sẽ hài lòng hơn 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.
Tìm ra sự cân bằng
Dòng tiêu đề là thứ đầu tiên mà độc giả nhìn thấy; chúng phải có hình ảnh hấp dẫn và dễ đọc. Điều này sẽ thu hút sự chú ý của người dùng và mang lại cảm giác yên tâm cũng như chất lượng. Kiểu chữ tốt tạo sự tự tin cho người đọc, khuyến khích họ tiếp tục đọc.
Thông thường, tác vụ này được thực hiện thủ công hoặc bằng phương pháp quang học, vì nhà thiết kế cân bằng văn bản vì muốn làm hài lòng mắt người xem, chứ không phải phép toán. Chủ đề này thường được gọi là chỉ số so với căn chỉnh quang học. Đối với các ấn phẩm 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 trong trải nghiệm người dùng.
Cân bằng văn bản trong kiểu chữ bắt nguồn từ những ngày đầu in ấn, khi máy in sẽ trao đổi chữ cái. Khi công cụ và kỹ thuật phát triển, kết quả cũng thay đổi theo. Ngày nay, nhà thiết kế có 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, 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, dựa trên thành quả và truyền thống của các nhà thiết kế trong ngành báo in.
Cân bằng các dòng tiêu đề
Đây sẽ và sẽ là trường hợp sử dụng chính cho text-wrap: balance. Vẽ mắt theo kích thước, tạo đối xứng và dễ đọc để mắt đọc được. Hãy đặt
tất cả các dòng tiêu đề thành dòng chữ 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 mang lại kết quả như mong đợi, vì văn bản cần gói và do đó có độ dài dòng tối đa được áp dụng từ vị trí nào đó. Bạn sẽ thấy 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ể được đặ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 phải là miễn phí. Trình duyệt cần lặp lại các vòng lặp để khám phá giải pháp gói 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ỉ áp dụ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 gói văn bản cho toàn bộ thiết kế. Đây là một yêu cầu bị lãng phí do có giới hạn là 6 dòng và có thể ảnh hưởng đến tốc độ kết xuất trang.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Một ưu điểm lớn của tính năng này là bạn không cần phải chờ đợi và dành thời gian cân bằng gói văn bản khi 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ý việc này!
Số lượt tương tác với thuộc tính white-space
Văn bản cân bằng sẽ cạnh tranh với thuộc tính white-space vì một thuộc tính yêu cầu không gói 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 đó có thể áp dụng lại tính năng gói cân bằng.
.balanced {
white-space: unset;
text-wrap: balance;
}
Sự cân bằng sẽ không làm thay đổi kích thước cùng dòng của phần tử
Một số giải pháp JavaScript có lợi thế đối với việc 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. Điều này có thêm một phần thưởng là "rút gọn được bao bọc" vào khối cân bằng. text-wrap:
balance không có hiệu ứng này và có thể thấy trong ví dụ sau:
Bạn có muốn xem chiều rộng hiển thị trong Công cụ cho nhà phát triển có nhiều không gian thừa ở cuối như thế nào?
Đó chỉ là kiểu gói, không phải là kiểu thay đổi kích thước. Do đó, theo tôi, sẽ có vài trường hợp text-wrap: balance không được như vậy. Ví dụ: tiêu đề bên trong một thẻ (hoặc bất kỳ vùng chứa nào có đường viền hoặc bóng).
Mỉa mai việc bao văn bản cân bằng sẽ tạo ra sự mất cân bằng với thành phần bên trong.
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ả cho chiều rộng nhỏ nhất mà không gây ra bất kỳ dòng bổ sung nào, 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.