Paragraph white river effect

The river effect in paragraph justified alignment of web typography 

Nhiều năm qua, công tác xuất bản sách báo và đặc biệt là các ấn phẩm báo in vẫn thường xuyên sử dụng hình thức trình bày các đoạn văn bản, các bài báo theo công thức dàn trang căn lề đều 2 bên, hay còn gọi là justified alignment. Lợi điểm của cách trình bày này là tạo ra các khối thông tin được căn lề vuông vức, các cột tin tức (trong báo chí người ta gọi là column) hiển thị đẹp mắt, phân tách các nội dung cần truyền tải, và đặc biệt hơn (theo tôi), là sắp xếp được nhiều cột thông tin với chủng loại khác nhau trong 1 trang báo.

(Ảnh: hình chụp tờ báo New York Times. Nguồn: internet)

Có thể dễ dàng nhận thấy, việc căn lề 2 bên dạng justified sẽ rất phù hợp với các tạp chí, báo in bởi phong cách thể hiện dưới định dạng lưới của họ (grid). Lâu dần, đây được coi như một chuẩn mực chung trong ngành xuất bản, cả ở Việt Nam và nước ngoài, đến bây giờ vẫn vậy.

Internet và báo điện tử ra đời khiến cho thói quen đọc báo của người dùng được thay đổi. Internet mang lại sự bình đẳng, do vậy, thông tin nhiều hơn, xuất bản dễ dàng hơn, và đặc biệt là tốc độ xuất bản nhanh hơn, cường độ dày hơn (24/7). Có nhiều nghiên cứu cho rằng, nếu bạn đọc báo điện tử, hay các trang tin trên internet về 1 chủ đề liên tục trong 3 năm, bạn có thể chở thành chuyên gia về chủ đề đó? (cái này tôi chưa kiểm chứng). Cũng có nghiên cứu chứng minh rằng, nếu một ngày bạn ngồi đọc hết tất cả các loại tin tức, tạp chí online, blog.v.v… thì bạn chẳng còn thời gian mà làm việc gì khác. Và như 1 lẽ tự nhiên của thuyết tiến hóa, người dùng (ở đây là internet user) cần đọc nhanh hơn, nắm bắt thông tin nhanh hơn. Vì vậy, khái niệm visual perception (nhận thức thị giác) trong web/digital design một lần nữa được đào sâu, nghiên cứu.

Vấn đề xuất hiện với các trang tin điện tử (báo điện tử), blog, articles online khi các website này sử dụng justified alignment trong việc hiển thị tin bài của mình. Các web browser khác nhau sẽ có cách xử lý font chữ khác nhau, và phần lớn phụ thuộc vào thuật toán (bao gồm cả CSS) trong việc căn chỉnh justified cho văn bản text. Chính vì vậy, 1 đoạn văn bản thường được kéo giãn tự động đều về 2 phía nhằm đáp ứng mục đích của justified.

 Một điều dễ thấy rằng, khi 1 đoạn văn bản được giãn đều 2 bên, thì khoảng cách giữa các từ (word space) sẽ tự động giãn ra và không cách đều nhau nữa. Đều này cũng có nghĩa là, mắt của người đọc phải điều tiết nhiều hơn trong quá trình đọc tin (xem những khoảng màu xám hình bên). Vì thế, nhanh mỏi mắt hơn, nhanh chán và bỏ qua thông tin cho dù bài viết có dài hay ngắn, hay hay dở. Điều này đúng với cả trường hợp người dùng chỉ skimming (đọc lướt).

(Ảnh: minh họa text justified alignment. Nguồn: inernet)

Không chỉ có vậy, với các cột thông (column news) đơn giản và có độ rộng vừa phải (ví dụ: 300px) thì việc các word space bị giãn ra là không đáng kể, thậm chí còn có thể chấp nhận được vì mắt người dùng lướt từ đầu dòng đến cuối dòng chữ trong một không gian hẹp. Tuy nhiên, nếu bạn thiết kế 1 website (blog/news) với độ rộng của phần nội dung chiếm từ 500px tới 600px thì khoảng cách giữa các từ sẽ rộng hơn, dài hơn. Tại sao? bởi vì cho dù là tiếng Anh hay tiếng Việt hay bất cứ ngôn ngữ nào khác, các từ có độ dài không bằng nhau. Ví dụ: experiences sẽ dài hơn từ river. Và nếu 1 từ có độ dài lớn (nghĩa là số lượng chữ cái tạo ra từ đó nhiều) nằm ở cuối dòng, khi căn lề justified, khả năng lớn là từ đó phải xuống dòng kế tiếp và các từ còn lại giãn nhau ra cho kín dòng hiện tại. (confuse? bạn có thể mở phần mềm Microsoft Word, copy 1 đoạn text vào đó, rồi tự mình thí nghiệm).

Khoảng cách của 1 dòng càng rộng, đoạn văn càng dài, thì khoảng cách giữa các từ khi căn lề justified là càng lớn. Khi đoạn văn dài ra, xuất hiện 1 hiệu ứng gọi là hiệu ứng dòng chảy vô hình, hay còn gọi là white river effect.

(Ảnh: river effect sample. Nguồn: internet)

Hiệu ứng river effect tạo ra nhiều khoảng trắng trong đoạn văn, thậm chí còn có thể tạo ra 1 hệ thống kênh rạch chằng chịt trong bài viết/bản tin của bạn trên web. Ngoài việc gây khó chịu cho mắt người đọc, thì một điểm dễ thấy là river effect gây mất tập trung.

Hiện nay, cũng có nhiều giải pháp để điều chỉnh khoảng cách giữa các từ trong 1 đoạn văn bản được căn lề 2 bên dạng justified. Tuy nhiên, việc áp dụng hình tứng text alignment nào cho website thì lại tùy thuộc vào nhiều yếu tố. Một vài ví dụ như:

• Đối tượng người dùng/khách hàng mà website hướng tới. Tạp chí online dành cho người trưởng thành khác với học sinh, cũng như báo điện tử phổ cập khác với tạp chí chuyên đề.v.v..
• Những hệ điều hành khác nhau, web browser khác nhau, thiết bị khác nhau..sẽ có kiểu hiển thị khác nhau. (ví dụ như firefox và safari  hiện nay đã có hỗ trợ kỹ thuật kerning cũng như hyphenation để hỗ trợ việc căn lề justified tốt hơn).
• Định hướng của website tới người dùng. Người dùng có thể thay đổi kích thước browser, có thể thay đổi kích thước font chữ, thu nhỏ hay mở rộng column news?

Ở góc nhìn xu thế hiện nay, phần lớn các báo điện tử, blog đều chuyển sang định dạng left alignment (căn lề trái) với mục đích hướng cho người đọc có thể đọc nhanh hơn, đọc nhiều hơn và thời gian họ truy cập trang web lâu hơn. Có thể thấy những ví dụ kinh điển hiện nay về việc phân chia cột thông tin và căn lề trái như thời báo New Yorks Times online, The New Yorkers.v.v… Lựa chọn như thế nào, là do định hướng của bạn với website cũng như với các user tiềm năng. Một lưu ý nhỏ nữa là việc căn lề text như thế nào cũng nên được xem xét, áp dụng với cả ebook, email marketing hay các ấn phẩm khác mà bạn định gửi tới khách hàng.

Sau cùng, cái blog này của tôi, cái template tôi đang chọn, đáng buồn lại mặc định là justified alignment @.@. Nhưng dù sao thì tôi vẫn thích tính tập trung của template này, luôn focus người đọc vào 1 bài mới nhất, không có các thiết kế rườm rà gây mất tập trung và phiên bản mobile vẫn căn lề trái cho phần nội dung.