Rớt chữ rớt dòng: cái lỗi nhỏ xíu làm landing page của bạn trông rẻ tiền

Chiều qua tôi ngồi review một cái landing page sự kiện.

Nội dung viết ngon. Ảnh diễn giả chụp xịn. Màu mè, hiệu ứng, đủ cả.

Mà kéo tới khúc tiêu đề lớn thì tôi khựng lại. Chữ cuối của câu tiêu đề nằm chèo queo một mình một dòng. Kéo xuống chút nữa, đoạn mô tả hai dòng thì dòng thứ hai còn đúng hai chữ. Xuống tới mấy cái card diễn giả, chức danh bị cắt, rớt một chữ xuống dòng dưới nằm trơ trọi như đứa em út bị bỏ quên ở bàn cuối đám giỗ.

Cả trang, chỗ nào cũng có chữ rơi rớt kiểu vậy.

Tôi khoanh đỏ chi chít rồi gửi lại anh em. Xong ngồi tự hỏi: ủa.. cái lỗi này sao quen quá vậy ta?

Rồi nhớ ra. Nó có từ đời nào rồi. Tôi gặp hoài, gặp cả chục năm nay, chỉ là hồi đó chưa ai gọi tên cho tôi nghe thôi.

Ba cái lỗi này có tên đàng hoàng, từ hồi chưa có máy tính

Dân dàn trang báo giấy, dân làm sách, họ đặt tên cho tụi nó từ lâu lắm rồi.

River (sông trắng). Là mấy khoảng trắng giữa các chữ tình cờ xếp thẳng hàng nhau theo chiều dọc, tạo thành một con lạch chảy xuyên qua đoạn văn. Mắt bạn đọc ngang, nhưng cái khe trắng đó cứ kéo mắt bạn đi dọc. Đọc mệt mà không hiểu tại sao mệt.

Nhìn cái vệt xanh trong hình đó. Lúc chưa ai chỉ thì bạn không thấy, mà thấy một lần rồi thì đọc trang nào cũng thấy, gỡ không ra :))

Widow và orphan. Một dòng lẻ bị tách khỏi bà con dòng họ của nó: hoặc là dòng đầu đoạn bị bỏ lại một mình cuối cột, hoặc là dòng cuối đoạn bị đẩy qua đầu cột mới, đứng chèo queo một mình.

Runt. Cái này là đứa tôi gặp nhiều nhất trên web: đoạn văn hay tiêu đề mà dòng cuối chỉ còn đúng MỘT chữ.

(Hai hình minh hoạ trên lấy từ bài của Pagination.com, link cuối bài.)

Nói thiệt là mấy cái tên widow với orphan này gây lú kinh khủng, mỗi tài liệu định nghĩa ngược nhau một kiểu, tôi tra ba nguồn thì ra ba kiểu khác nhau. Nên thôi, đừng học tên làm gì cho mệt (hổng biết đúng hem, nhưng tôi bỏ luôn vụ học tên rồi).

Nhớ giùm tôi đúng một thứ: chữ mà bị bỏ lại một mình, hoặc khoảng trắng mà chảy thành dòng, thì trang đó đang có lỗi.

Chuyện này không phải lỗi của AI

Tôi phải nói rõ chỗ này, kẻo lại thành bài chửi AI.

Hồi 2010, tôi làm web cho khách, cũng rớt chữ tè lè tét lét. Anh em content viết tiêu đề trên Word thấy đẹp lắm, bỏ lên web co lại còn 320px thì tiêu đề vỡ ra thành bốn dòng, dòng cuối một chữ. Anh em thiết kế xuất file Photoshop ra cũng vậy, chỗ nào cũng đẹp, trừ cái nút bấm có chữ rớt xuống.

Đó là thời chưa có ChatGPT, chưa có Claude, chưa có ai vibe code hết.

Nên cái lỗi này không mới. Nó cũ mèm.

Cái mới là.. tốc độ nhân bản.

Hồi xưa muốn ra một cái landing page phải qua ba bốn cửa: content viết, designer dàn, dev cắt, rồi ai đó ngồi soi lại lần cuối. Mỗi cửa là một lần có người NHÌN vào cái trang đó bằng mắt người.

Giờ thì một mình một prompt, hai chục phút ra trang. Đẹp. Chạy được. Deploy luôn.

Cái hố kỹ thuật hồi xưa lọc bớt lỗi, giờ AI lấp nó bằng một phím Enter. Tôi từng viết về chuyện này trong bài VIBE CODING có phải đang tạo ra rác công nghệ?, nhưng hồi đó tôi mới nói tới rác bên trong (code, kiến trúc). Giờ mới thấy còn một loại rác nữa nằm ngay bề mặt, ai cũng thấy mà không ai gọi tên: rác chữ.

Vì sao vibe code lại dính nặng hơn?

Tôi ngồi soi một hồi thì thấy bốn lý do, tôi đoán mò có kiểm soát thôi nha.

Thứ nhất, AI viết chữ và AI dàn trang là hai lượt khác nhau. Bạn bảo nó “viết lại tiêu đề cho mạnh hơn”, nó viết. Nó viết đúng nghĩa, đúng giọng, mà nó KHÔNG ngồi ngắm coi tiêu đề mới đó rớt xuống dòng ở chỗ nào. Nó có nhìn thấy cái trang đâu.

Thứ hai, mình sửa chữ chứ mình không sửa trang. Đổi một chữ trong tiêu đề, cả cái heading nhảy dòng lại từ đầu. Cái này dân làm content web bị hoài, chả liên quan AI.

Thứ ba, mình chỉ ngó ở màn hình của mình. Cái laptop 27 inch của bạn thì tiêu đề gọn gàng lắm. Mở điện thoại của mẹ bạn ra coi thử, nó vỡ ra như tô bún bị đổ.

Thứ tư, cái này là đặc sản tiếng Việt: chữ mình ngắn. Toàn từ một âm tiết, “khai”, “tế”, “AI”, “dự”. Chữ càng ngắn thì khả năng bị rớt lại một mình càng cao, và rớt rồi nhìn càng thảm. Tiếng Anh còn có chữ dài kéo lại, tiếng Việt thì không.

Nên là trang tiếng Việt dính lỗi này nặng hơn trang tiếng Anh, mà đa số tool với template thì làm cho tiếng Anh.

Nội dung của bạn là món ăn. Dàn trang là cách bưng ra bàn. Nấu ngon cỡ nào mà bưng ra bằng cái dĩa mẻ, nước sốt vương vãi thành đường, thì khách vẫn thấy quán này.. sao sao á.

Khách không nói ra được là dĩa mẻ đâu. Khách chỉ thấy “quán này hình như hổng chuyên nghiệp lắm” rồi đi về. Y chang cái landing page.

Chữa thì chữa sao?

Phần này tôi làm thiệt trên site này rồi, không phải chép sách nha.

Một, bỏ căn đều hai bên (justify) đi. Đây là nguồn gốc số một của mấy con sông trắng. Căn đều cho mép phải thẳng tắp nhìn “gọn”, nhưng để thẳng được thì trình duyệt phải kéo giãn khoảng cách giữa các chữ, giãn không đều thì thành sông. Căn trái, mép phải lởm chởm chút, mà đọc êm hơn nhiều.

Hai, hai dòng CSS này gần như miễn phí. Cái này giờ trình duyệt nào cũng chạy được rồi:

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;   /* cân độ dài các dòng tiêu đề, đỡ rớt chữ mồ côi */
}
p, li, blockquote, figcaption {
    text-wrap: pretty;    /* tránh dòng cuối đoạn chỉ còn 1 chữ */
}

Đúng hai khai báo đó. Site này của tôi đang dùng đúng vậy, nằm trong global.css. Nó không chữa được 100%, nhưng nó dọn giùm bạn chắc phải bảy tám phần.

Ba, ép giữ chữ với nhau. Chỗ nào quan trọng mà bạn không muốn nó rớt, ví dụ tên riêng, con số kèm đơn vị, thì nối bằng khoảng trắng cứng  . Ví dụ 50 triệu thì “50” với “triệu” ôm nhau, không đứa nào bị bỏ lại.

Bốn, giới hạn bề ngang dòng chữ. Dòng dài quá đọc mỏi mắt, ngắn quá thì lỗi rớt chữ càng dày. Khoảng 45 đến 75 ký tự một dòng là dễ đọc nhất, cái này dân typography đo lâu rồi. Trên Tailwind thì max-w-prose là ra đúng cỡ đó.

Năm, cái này quan trọng nhất mà chả ai làm. Mở trang ra, kéo cái cửa sổ trình duyệt cho hẹp lại từ từ, rồi NHÌN. Kéo từ máy bàn xuống tablet xuống điện thoại. Chỗ nào chữ rớt lẻ loi thì sửa chỗ đó.

Bốn cái trên là kỹ thuật, AI làm giùm được. Cái thứ năm là mắt người, không ai làm giùm được.

Mà nói vậy thôi..

Ngồi khoanh đỏ trang người ta thì dễ.

Site của chính tôi đây, hai dòng text-wrap ở trên tôi mới thêm vô gần đây thôi, chứ trước đó nó cũng rớt chữ tùm lum, và tôi cũng chả biết là mình đang rớt. Còn mấy chục bài cũ tôi migrate qua thì tới giờ tôi vẫn chưa soi lại hết. Nên tôi cũng chả hơn gì ai ^^

Với lại phải nói cho công bằng: đừng có xong bài này rồi thành thằng cầm cờ đỏ, ngồi soi từng pixel, bắt anh em sửa tới sửa lui một chữ lẻ trong khi cái nút “Đăng ký” bấm vô không ra gì.

Lỗi rớt chữ là lỗi hạng B. Nó không giết ai. Nó chỉ làm người ta cảm thấy sản phẩm của bạn hơi cẩu thả một chút, mà cái cảm giác đó thì khách không nói ra, và họ cũng chả biết là mình đang cảm thấy vậy vì cái gì.

Nhưng lỗi hạng B thì có cái hay: nó rẻ. Hai dòng CSS với mười lăm phút kéo cửa sổ. Rẻ vậy mà không làm thì.. uổng.

DÀI QUÁ, LƯỜI ĐỌC:

Chữ bị bỏ lại một mình cuối dòng, khoảng trắng chảy dọc thành sông, đó là lỗi typography có từ thời báo giấy. AI không đẻ ra nó, AI chỉ giúp bạn nhân bản nó nhanh gấp trăm lần. Bỏ justify, thêm text-wrap: balance cho heading và pretty cho đoạn văn, dùng   giữ mấy cụm không được rớt, giữ dòng trong khoảng 45 đến 75 ký tự. Rồi tự kéo cửa sổ mà nhìn bằng mắt mình. Chỉ vậy thôi.

Còn bạn, thử mở landing page bạn mới làm gần nhất ra, kéo hẹp lại coi thử. Có chữ nào đang đứng chèo queo một mình không? Comment tôi nghe thử coi :))

P/S: viết xong bài này tôi mở lại chính bài này ở khổ điện thoại. Sửa hết ba chỗ. Quê độ :3

#voquoccuong #typography #vibecoding #landingpage

Nguồn tham khảo:

• Pagination.com, “Fix Typography Rivers, Widows, and Orphans Easily” (khoảng 45 đến 75 ký tự mỗi dòng, các cách xử lý river/widow/orphan): https://pagination.com/fix-typography-rivers-widows-orphans/
• MDN Web Docs, thuộc tính CSS text-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap