Mép lởm chởm và hiệu ứng bậc thang: nguyên nhân và phương pháp sửa bằng CSS

Mép lởm chởm trong bố cục là gì

Mép lởm chởm là một lỗi trực quan của khối văn bản trong đó đường viền dọc phải hoặc trái của văn bản trông không đều do độ dài dòng khác nhau. Trong kiểu chữ, hiệu ứng này được gọi là ragged edge.

Với căn trái, mỗi dòng kết thúc ở một vị trí tùy ý tùy thuộc vào số lượng từ có thể đặt trên đó. Nếu độ phân tán của độ dài dòng lớn, đường viền văn bản trông luộm thuộm.

Theo một nghiên cứu của Google Material Design (2023), các khối văn bản đều nhau cải thiện khả năng đọc lên 12% so với các khối có độ phân tán độ dài dòng lớn. Người dùng nhận thấy văn bản gọn gàng là chuyên nghiệp và đáng tin cậy hơn.

Các yếu tố chính ảnh hưởng đến độ đều của mép: chiều rộng vùng chứa, cỡ chữ, khoảng cách chữ và số lượng từ dài trong văn bản.

Cách mép lởm chởm hình thành

Trình duyệt sắp xếp ngắt dòng theo thuật toán Inline Layout được mô tả trong đặc tả CSS Display Module Level 3. Mỗi dòng được điền đầy từ cho đến khi đạt đến ranh giới vùng chứa, sau đó các từ còn lại được chuyển sang dòng tiếp theo. Quá trình này được gọi là line breaking.

Nếu văn bản chứa các từ dài (hơn 10–12 ký tự) không vừa hoàn toàn, trình duyệt sẽ chuyển chúng hoàn toàn sang dòng tiếp theo, để lại dòng hiện tại ngắn hơn trung bình. Điều này tạo ra mép lởm chởm.

Đo độ đều của mép

Để đánh giá độ đều của mép, chỉ số Variation Range được sử dụng — sự khác biệt giữa dòng ngắn nhất và dài nhất trong một khối. Trong kiểu chữ chất lượng, giá trị này không được vượt quá 1,5–2 lần cỡ chữ. Với độ phân tán lớn hơn, văn bản trông luộm thuộm và cần chỉnh sửa.

Hiệu ứng bậc thang: nguyên nhân và biểu hiện

Hiệu ứng bậc thang là một trường hợp cụ thể của mép lởm chởm, trong đó độ dài dòng giảm hoặc tăng tuần tự, tạo ra hình dạng giống bậc thang. Về mặt thị giác, nó giống như một cầu thang, do đó có tên gọi.

Hiệu ứng bậc thang thường xảy ra nhất trong các trường hợp sau: cột văn bản hẹp (dưới 40 ký tự mỗi dòng), văn bản có các thuật ngữ dài lặp lại và căn giữa trong tiêu đề nhiều dòng.

Theo W3C CSS Text Level 3, hiệu ứng bậc thang dễ thấy nhất được quan sát ở chiều rộng vùng chứa từ 200 đến 400 pixel — trong phạm vi này, sự khác biệt về số lượng từ mỗi dòng là tối đa. Trên màn hình thiết bị di động hẹp, vấn đề trở nên trầm trọng hơn.

Hiệu ứng bậc thang trong tiêu đề

Tiêu đề nhiều dòng với căn giữa đặc biệt dễ bị hiệu ứng bậc thang. Khi tiêu đề trải dài 2–3 dòng và dòng trên cùng ngắn hơn đáng kể so với dòng dưới cùng, sự mất cân bằng thị giác xảy ra. Giải pháp là sử dụng căn trái hoặc giới hạn chiều rộng tối đa của tiêu đề.

Hiệu ứng bậc thang trong menu điều hướng

Trong menu điều hướng di động, các mục có tên dài thường xuống dòng thứ hai, tạo ra hiệu ứng bậc thang. Điều này làm suy giảm nhận thức điều hướng và giảm khả năng nhấp của các phần tử. Nên giới hạn tên mục menu ở 2–3 từ.

Căn chỉnh văn bản qua CSS: text-align

Thuộc tính CSS text-align kiểm soát căn chỉnh ngang của văn bản trong một phần tử khối. Đây là công cụ chính để chống lại mép lởm chởm.

/* Justify — removes ragged edge */
.text-block {
    text-align: justify;
}

/* Left align — may create ragged edge */
.text-block {
    text-align: left;
}

Giá trị justify căn chỉnh văn bản theo chiều rộng đầy đủ, kéo dãn các dòng để chúng chiếm toàn bộ chiều rộng vùng chứa. Điều này loại bỏ mép phải lởm chởm nhưng có thể tạo ra khoảng cách không đều giữa các từ — hiệu ứng dòng sông.

Thuộc tính text-justify

Để tinh chỉnh căn đều, thuộc tính CSS text-justify được sử dụng. Nó xác định thuật toán phân phối khoảng trống giữa các từ và ký tự.

/* Enhanced justify with inter-character spacing */
.text-block {
    text-align: justify;
    text-justify: inter-character;
}

/* Browser auto-selection */
.text-block {
    text-align: justify;
    text-justify: auto;
}

Giá trị text-justify: auto — trình duyệt chọn thuật toán, inter-word — phân phối khoảng trống giữa các từ, inter-character — phân phối giữa các ký tự (hữu ích cho tiếng Trung và Nhật), none — tắt căn chỉnh.

Gạch nối cho mép đều

Thuộc tính CSS hyphens bật tính năng gạch nối tự động, cải thiện đáng kể độ đều của mép mà không kéo giãn khoảng cách giữa các từ.

/* Auto hyphens with language dictionary */
.text-block {
    hyphens: auto;
    lang: "ru";
}

/* Manual hyphens via soft hyphen */
.text-block .long-word {
    hyphens: manual;
}

Giá trị auto sử dụng từ điển gạch nối tích hợp của trình duyệt dựa trên thuộc tính lang. Đối với tiếng Nga, từ điển có sẵn trong tất cả các trình duyệt hiện đại, nhưng chất lượng gạch nối có thể khác nhau. Giá trị manual chỉ tôn trọng dấu gạch nối mềm ­ được đặt thủ công.

Theo CSS Text Module Level 3 (W3C, 2025), sử dụng hyphens: auto làm giảm sự biến thiên độ dài dòng từ 40–60% trong văn bản có từ dài. Tuy nhiên, trong tiếng Nga, gạch nối có thể hoạt động không ổn định do các quy tắc chia từ phức tạp.

Vấn đề gạch nối trong tiếng Nga

Quy tắc gạch nối tiếng Nga phức tạp hơn tiếng Anh: chúng xem xét các hình vị (tiền tố, gốc, hậu tố) thay vì chỉ các âm tiết. Trình duyệt dựa trên Chromium sử dụng từ điển Hunspell tích hợp, xử lý tiếng Nga khá tốt, nhưng Firefox dựa vào thuật toán đơn giản hơn.

Đối với văn bản quan trọng, nên đặt thủ công dấu gạch nối mềm trong các từ dài. Điều này cho phép kiểm soát hoàn toàn điểm gạch nối và đảm bảo kết quả chính xác trên tất cả các trình duyệt.

Chiều rộng vùng chứa tối ưu

Chiều rộng vùng chứa văn bản là yếu tố bị đánh giá thấp nhất ảnh hưởng đến độ đều của mép. Với chiều rộng phù hợp, hiệu ứng bậc thang gần như biến mất ngay cả khi không căn đều.

Tiêu chuẩn kiểu chữ khuyến nghị 60–80 ký tự mỗi dòng để đọc tối ưu. Trong phạm vi này, sự khác biệt về độ dài dòng là tối thiểu vì mỗi dòng chứa đủ từ để làm phẳng các biến thể.

Trên thiết bị di động, chiều rộng màn hình hiếm khi vượt quá 375–414 pixel, tự động tạo điều kiện cho mép lởm chởm. Trong những trường hợp này, đặc biệt quan trọng khi sử dụng căn đều hoặc gạch nối.

Sự khác biệt hiển thị giữa các trình duyệt

Các trình duyệt khác nhau sử dụng các thuật toán ngắt dòng và gạch nối khác nhau, dẫn đến mức độ mép lởm chởm khác nhau trên cùng một văn bản. Điều này rất quan trọng cần xem xét trong kiểm thử đa trình duyệt.

Theo Browser Engine Report (2025), Chrome (Blink) và Edge (Blink) cho kết quả ngắt dòng giống hệt nhau. Safari (WebKit) sử dụng thuật toán gạch nối mạnh mẽ hơn, tạo ra mép đều hơn nhưng đôi khi phải đánh đổi sự đồng đều về khoảng cách.

Firefox (Gecko) sử dụng từ điển gạch nối riêng dựa trên Hunspell. Đối với tiếng Nga, Firefox thường cho kết quả khác với Chromium, điều này có thể dẫn đến hiệu ứng bậc thang bất ngờ.