Ngắt dòng tự động (Word Wrap)

Quá trình tự động xuống dòng khi văn bản vượt quá chiều rộng vùng hiển thị. Việc ngắt giữa từ hay tại ranh giới từ phụ thuộc vào ngôn ngữ và cài đặt.

Word wrap (ngắt dòng tự động) là quá trình tự động chuyển văn bản sang dòng tiếp theo khi đạt đến mép phải của vùng hiển thị. Tính năng này được tích hợp trong mọi phần mềm hiển thị văn bản: trình soạn thảo, trình duyệt, ứng dụng email, giao diện đăng bài mạng xã hội. Nếu không có word wrap, các câu dài sẽ tràn ra ngoài màn hình và người dùng phải cuộn ngang mới đọc được.

Với tiếng Anh, word wrap tương đối đơn giản vì khoảng trắng giữa các từ tạo ra vị trí ngắt dòng tự nhiên. Tuy nhiên, khi gặp từ rất dài (URL hoặc từ ghép trong tiếng Đức), cần phải ngắt giữa từ. CSS cung cấp thuộc tính overflow-wrap: break-word để xử lý trường hợp này.

Tiếng Việt có đặc điểm riêng trong xử lý ngắt dòng. Mặc dù tiếng Việt sử dụng khoảng trắng giữa các âm tiết (ví dụ: "Việt Nam" gồm hai âm tiết), nhưng một từ có thể gồm nhiều âm tiết. Ngắt dòng giữa các âm tiết của cùng một từ (ví dụ: ngắt "Việt" và "Nam" thành hai dòng) tuy không sai về mặt kỹ thuật nhưng có thể ảnh hưởng đến khả năng đọc. Các dấu thanh (sắc, huyền, hỏi, ngã, nặng) và dấu phụ (ă, â, ê, ô, ơ, ư) không gây vấn đề cho word wrap vì chúng là một phần của ký tự Unicode đơn lẻ.

CSS cung cấp nhiều thuộc tính liên quan đến ngắt dòng. word-break kiểm soát việc ngắt giữa từ, với giá trị break-all cho phép ngắt tại bất kỳ vị trí nào. overflow-wrap (tên cũ là word-wrap) chỉ ngắt từ khi không thể ngắt tại vị trí thông thường. hyphens: auto tự động chèn dấu gạch nối tại vị trí ngắt dòng (cần từ điển ngôn ngữ). Đối với tiếng Việt, word-break: keep-all thường không cần thiết vì khoảng trắng giữa các âm tiết đã cung cấp đủ điểm ngắt.

Dấu gạch nối mềm (soft hyphen, U+00AD) là ký tự vô hình dùng để kiểm soát word wrap. Khi chèn vào giữa từ dài, dấu gạch nối chỉ hiển thị khi cần ngắt dòng tại vị trí đó. Trong đếm ký tự, soft hyphen gây ra sự khác biệt giữa số ký tự hiển thị và số ký tự nội bộ, vì nó tồn tại trong dữ liệu nhưng không hiển thị trên màn hình.

Số ký tự trên mỗi dòng ảnh hưởng trực tiếp đến khả năng đọc. Với văn bản Latin, 45-75 ký tự/dòng (lý tưởng là 66 ký tự) được coi là dễ đọc nhất. Trong thiết kế web, max-width và đơn vị ch được dùng để kiểm soát độ dài dòng, kết hợp với word wrap để tạo trải nghiệm đọc tối ưu. Đối với tiếng Việt, do các âm tiết ngắn và dấu thanh chiếm thêm không gian dọc, việc điều chỉnh line-height cũng quan trọng không kém.

Chia sẻ bài viết này