Gói văn bản CSS: số dư

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.

Adam Argyle

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 đáng kể bố cục văn bản của bạn.

Hỗ trợ trình duyệt

• 114
• 114
• 121
• 17,5

Nguồn

Thử bản minh họa

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 một số công cụ để thay đổi cách các đường được cân bằng. Các lựa chọn tốt nhất hiện có để sử dụng <wbr> hoặc ­ để trợ giúp hướng dẫn bố cục văn bản vào các quyết định thông minh hơn về vị trí ngắt dòng và từ.

Là một nhà phát triển, bạn không biết kích thước cuối cùng, cỡ chữ hay thậm chí là ngôn ngữ của dòng tiêu đề hoặc đoạn. Tất cả biến cần thiết để mang lại hiệu quả và tính thẩm mỹ xử lý xuống dòng tự động, nằm trong trình duyệt. Đây là lý do tại sao chúng ta thấy dòng tiêu đề xuống dòng tự động như trong hình sau:

Thử bản minh họa

.unbalanced {
  max-inline-size: 50ch;
}

Với text-wrap: balance trong 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 nắm rõ tất cả các yếu tố, chẳng hạn như cỡ 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:

Thử bản minh họa

.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. Chiến dịch này thu hút chú ý tốt hơn và dễ đọc hơn.

Tìm ra sự cân bằng

Dòng tiêu đề là nội dung đầu tiên mà độc giả nhìn thấy; hình ảnh nên bắt mắt và dễ đọc. Điều này sẽ thu hút sự chú ý của người dùng và mang lại cho họ cảm giác chất lượng và đảm bảo. Kiểu chữ tốt tạo sự tự tin cho người đọc, khuyến khích họ hãy đọc tiếp.

Thông thường, công việc này được thực hiện thủ công hoặc bằng phương pháp quang học với tư cách là nhà thiết kế cân bằng văn bản muốn làm hài lòng mắt người xem chứ không phải bài toán. Chủ đề này thường được gọi là căn chỉnh chỉ số và căn chỉnh quang học. Đối với các ấn bản lớn như New York Times, 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.

Thử bản minh họa

Lưu ý: Cân bằng văn bản bài viết chính không phổ biến vì nó không phù hợp cần trở nên nổi bật hoặc thu hút sự chú ý của độc giả.

Sự cân bằng giữa văn bản trong kiểu chữ bắt nguồn từ những ngày đầu của ngành in, khi máy in sẽ đặt 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ó thể 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ế của họ.

Tuy nhiên, trên web, bạn 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 dựa trên người dùng. text-wrap: balance mang đến nghệ thuật cân bằng văn bản trên web một cách tự độ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 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 có kích thước lớn và làm cho mắt đối xứng và dễ đọc để mắt đọc. Đặt tất cả các dòng tiêu đề để văn bản cân bằng gói 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ì nên văn bản cần được xuống dòng nên có độ dài dòng tối đa là ở đâu đó. Bạn sẽ thấy max-inline-size đặ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 phải là miễn phí. Trình duyệt cần phải lặp lại lặp đi lặp lại để tìm ra giải pháp gói cân bằng tốt nhất. Hiệu suất này chi phí được giảm thiểu bằng một quy tắc, phương thức này chỉ hoạt động với 6 dòng được gói trở xuống.

Thử bản minh họa

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ế. Đó là lãng phí yêu cầu, do giới hạn 6 dòng và có thể ảnh hưởng đến tốc độ hiển thị trang.

Không nên

* {
  text-wrap: balance;
}

CÂN NHẮC

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 đợi và căn thời gian xuống dòng để cân bằng với việc tải phông chữ, như bạn đang làm với JavaScript hiện nay. Chiến lược phát hành đĩa đơn trình duyệt sẽ xử lý vấn đề này!

Số lượt tương tác với thuộc tính white-space

Cân bằng văn bản sẽ cạnh tranh với white-space vì một thuộc tính yêu cầu không gói và thành phần còn lại yêu cầu xuống dòng 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.

.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 văn bản cân bằng bao bọc, vì chúng thay đổi max-width của chính phần tử chứa. Chiến dịch này có thêm phần thưởng là "thu nhỏ gói" 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. Vì nhưng có một vài trường hợp mà text-wrap: balance không thực sự tuyệt vời, ở mức theo ý kiến của tôi. 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ả đối với 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 hiển thị pixel). Để giảm thiểu các bước trong tìm kiếm nhị phân, trình duyệt bắt đầu bằng 80% chiều rộng đường trung bình.