Lorem ipsum và văn bản giữ chỗ
Văn bản giữ chỗ lấp đầy bố cục trước khi có chữ thật. Dùng khéo, nó giúp mọi người đánh giá thiết kế mà không bị nội dung làm phân tâm; dùng cẩu thả, nó che đi những vấn đề chỉ văn bản thật mới lộ ra, hoặc nằm lại trên trang đã xuất bản. Hướng dẫn này nói về cả hai mặt.
Lorem ipsum từ đâu mà có
Câu quen thuộc “Lorem ipsum dolor sit amet…” là một đoạn bị xáo trộn từ De finibus bonorum et malorum (“Bàn về giới hạn của thiện và ác”) do Cicero viết năm 45 TCN. Các từ bị cắt và thay đổi: “lorem” là phần cuối của “dolorem”, vốn bị ngắt qua hai dòng trong đoạn gốc. Kết quả trông như tiếng Latin nhưng không đọc được như tiếng Latin.
Thợ in đã dùng kiểu chữ độn này từ lâu. Nó phổ biến rộng rãi vào thập niên 1960 nhờ tờ chữ chuyển dán Letraset, và đến thập niên 1980 thì các phần mềm dàn trang như Aldus PageMaker đã có sẵn. Vào thập niên 1990, học giả tiếng Latin Richard McClintock đã truy ra văn bản bắt nguồn từ Cicero. Vì nguồn gốc đã hơn hai nghìn năm tuổi, văn bản này được dùng tự do.
Vì sao nhà thiết kế dùng văn bản giữ chỗ
Chữ đọc được sẽ thu hút sự chú ý: trong buổi duyệt, mọi người bắt đầu góp ý câu chữ thay vì bố cục. Lorem ipsum có sự pha trộn tự nhiên giữa từ ngắn và từ dài và không mang nghĩa, nên mắt nhìn thấy dòng, đoạn và độ đậm nhạt thay vì câu. Vì vậy nó hữu ích cho:
- các quyết định ban đầu về bố cục và kiểu chữ: độ rộng cột, khoảng cách dòng, cỡ chữ;
- mẫu trang và thành phần sau này sẽ chứa nội dung của nhiều tác giả;
- thử xem trang hiển thị thế nào khi cùng một vị trí có văn bản rất ngắn và rất dài.
Khi nào văn bản giữ chỗ gây hiểu lầm
Lorem ipsum dán ở đâu cũng dài như nhau, còn nội dung thật thì không. Những bất ngờ thường gặp:
- Tiêu đề và nút bấm viết sau dài hơn hoặc ngắn hơn chữ độn và làm vỡ bố cục. Hãy thử với văn bản thực tế ngắn nhất và dài nhất, không phải mức trung bình.
- Tên, địa chỉ và giá có hình dạng riêng: họ kép, tên đường 30 ký tự, giá kèm ký hiệu tiền tệ và dấu phân cách hàng nghìn.
- Bản dịch thường dài hơn tiếng Anh, và nhãn ngắn có thể dài gấp đôi. Từ ghép tiếng Đức không ngắt ở cuối dòng nếu không được ngắt âm tiết.
- Cấu trúc thật có danh sách, liên kết, trích dẫn và tiêu đề con, những thứ mà một khối lorem ipsum không bao giờ thể hiện.
Với kiểm thử khả năng sử dụng, hãy dùng văn bản thực tế. Người tham gia không thể đánh giá trang có hợp lý không, hay tìm thông tin trên đó, khi thông tin là chữ độn tiếng Latin.
Văn bản giữ chỗ bằng ngôn ngữ khác
Bố cục chạy tốt với chữ Latin vẫn có thể hỏng với hệ chữ khác. Tiếng Trung và tiếng Nhật viết không có dấu cách giữa các từ, nên dòng có thể ngắt giữa gần như bất kỳ hai ký tự nào, kèm quy tắc không cho một số dấu câu đứng đầu dòng. Tiếng Hàn đặt dấu cách giữa các cụm từ nhưng có nhiều hình dạng âm tiết hơn hẳn trên mỗi dòng. Mỗi hệ chữ cần phông có các ký tự của nó; nếu phông đã chọn không có, trình duyệt sẽ thay bằng phông khác với độ rộng và chiều cao dòng khác.
Vì thế công cụ của LeedyBox cũng tạo văn bản giữ chỗ bằng tiếng Hàn, tiếng Nhật và tiếng Trung. Với trang web đa ngôn ngữ, hãy thử từng bố cục bằng văn bản ở hệ chữ đích, không phải bằng lorem ipsum.
Lựa chọn giữ chỗ tốt hơn cho từng việc
| Công việc | Lựa chọn tốt hơn lorem ipsum |
|---|---|
| Thẻ sản phẩm, bảng, bảng điều khiển | Dữ liệu mẫu thực tế: tên, ngày, giá và ID có độ dài như thật |
| Biểu mẫu và thông báo lỗi | Nhãn và thông báo thật, kể cả thông báo lỗi dài nhất |
| Trang đích và bài viết | Bản nháp của nội dung thật, dù còn thô |
| Bố cục đa ngôn ngữ | Văn bản mẫu bằng từng ngôn ngữ đích, hoặc bản dịch nháp |
| Phần thân văn bản trong mẫu trang | Ở đây lorem ipsum rất phù hợp |
Các thư viện dữ liệu thử như Faker có thể tạo tên, địa chỉ và ngày tháng đáng tin bằng nhiều ngôn ngữ cho bản mẫu và kiểm thử tự động.
Trước khi xuất bản
Văn bản giữ chỗ còn sót trên trang đã xuất bản trông cẩu thả và không mang lại gì cho người đọc lẫn công cụ tìm kiếm. Trước khi ra mắt:
- tìm trong mã và hệ thống quản lý nội dung các chữ “lorem”, “ipsum” và những đánh dấu khác của nhóm, như “TODO” hoặc “TBD”;
- kiểm tra những chỗ không ai đọc khi duyệt: tiêu đề trang, mô tả meta, văn bản thay thế của hình ảnh, thông báo trạng thái trống và mẫu email;
- nghe trang một lần bằng trình đọc màn hình; chữ độn và nhãn bị thiếu dễ nhận ra hơn nhiều khi nghe.
Câu hỏi thường gặp
Tôi có được dùng lorem ipsum cho dự án thương mại không?
Có. Nó dựa trên một văn bản viết cách đây hơn hai nghìn năm và thuộc phạm vi công cộng, nên không cần xin phép.
Văn bản giữ chỗ có làm hại thứ hạng tìm kiếm không?
Chỉ khi nó được xuất bản. Trang còn chữ độn không có nội dung hữu ích, nên hãy để bản nháp ở trạng thái chưa xuất bản hoặc chặn lập chỉ mục cho đến khi có văn bản thật.
Lorem ipsum có giống placeholder trong ô biểu mẫu không?
Không. Gợi ý màu xám nhạt trong ô trống, đặt bằng thuộc tính HTML placeholder, là ví dụ ngắn cho người dùng. Nó biến mất khi người dùng gõ, nên không được thay cho nhãn hiển thị.
Nên dùng bao nhiêu văn bản giữ chỗ?
Bằng lượng nội dung thật sẽ có, cộng thêm vài trường hợp cực đoan: văn bản ngắn nhất và dài nhất bạn dự kiến cho mỗi vị trí. Bám theo độ dài dự kiến cho biết nhiều hơn so với lấp mọi ô bằng cùng một đoạn văn.