Tạo Lorem Ipsum

Nguồn gốc của Lorem Ipsum

Đoạn text "Lorem ipsum dolor sit amet..." không phải là ký tự vô nghĩa — đây là tiếng Latin bị biến dạng. Nguồn gốc là tác phẩm De finibus bonorum et malorum ("Về mục đích của điều tốt và điều xấu"), một luận văn triết học do Cicero viết năm 45 trước Công nguyên.

Vào thế kỷ 16, một thợ sắp chữ vô danh lấy đoạn văn này, đảo lộn các từ, và dùng nó để trình bày mẫu typeface. Đoạn text tồn tại như tiêu chuẩn ngành vì nó trông giống ngôn ngữ tự nhiên khi nhìn từ xa — có sự pha trộn tự nhiên giữa từ ngắn và dài — mà không thực sự đọc được trong bất kỳ ngôn ngữ nào, nên không làm người xem mất tập trung.

Richard McClintock, nhà nghiên cứu Latin tại Hampden-Sydney College, đã xác định nguồn gốc này vào những năm 1990.

Tại sao placeholder text quan trọng trong design

Mục đích của placeholder text là giúp designer và stakeholder đánh giá layout, typography và hierarchy mà không bị phân tâm bởi nội dung thực. Khi đọc được text thực, người xem bắt đầu đánh giá nội dung thay vì design trực quan.

Placeholder text tốt cần:

• Có độ biến thiên độ dài từ tự nhiên (pha trộn từ ngắn và dài, phù hợp ngôn ngữ đích).
• Lấp đầy không gian giống như copy thực — xuống dòng, nhịp đoạn văn, nối chữ.
• Trung tính về mặt thị giác — không có cụm từ quen thuộc, không hài hước, không tạo điểm nhấn.

Đây là lý do "Nội dung ở đây" lặp đi lặp lại trong ô là placeholder tệ hơn Lorem Ipsum: nó tạo ra các điểm xuống dòng không tự nhiên và không cho cảm giác về hình dạng đoạn văn.

Các chế độ output

Từ (Words) — hữu ích khi test độ rộng trường nhập và container nhãn.

Câu (Sentences) — hữu ích cho input một đoạn văn, meta description, nội dung card.

Đoạn văn (Paragraphs) — hữu ích cho layout bài viết, email template, trang nhiều section.

HTML — bọc output trong thẻ <p> để paste trực tiếp vào HTML template, tránh phải bọc thủ công.

Các biến thể và khi nào dùng

Lorem Ipsum cổ điển là mặc định phổ quát. Dùng khi khán giả là những người quen với design và ngay lập tức hiểu đây là placeholder.

Tiếng Việt — Lorem Ipsum tiếng Việt đặc biệt quan trọng khi sản phẩm của bạn có ngôn ngữ chính là tiếng Việt. Tiếng Việt dài hơn tiếng Anh đáng kể cho cùng một ý nghĩa: dấu thanh và từ ghép có nghĩa là một câu vừa gọn trong tiếng Anh có thể xuống thêm một dòng trong tiếng Việt. Thiết kế UI tiếng Việt với placeholder tiếng Anh là cách đáng tin cậy để gặp bất ngờ về layout trong QA.

Tiếng Tây Ban Nha — Vấn đề tương tự: câu tiếng Tây Ban Nha trung bình dài hơn tiếng Anh 15–25% với ý nghĩa tương đương.

Hipster Ipsum — dùng tiếng lóng Anh hiện đại ("artisan," "craft beer," "normcore"). Hữu ích trong các buổi wireframe review với stakeholder có thể hỏi "trang này thực sự nói gì?" — nội dung vừa quen thuộc vừa vô lý báo hiệu rõ đây là placeholder.

Khớp độ dài: best practice quan trọng nhất

Sai lầm thực tế lớn nhất với placeholder text là generate sai ngôn ngữ so với locale đích:

| Khái niệm | Tiếng Anh | Tiếng Việt | |-----------|-----------|-----------| | "Settings" | 8 ký tự | "Cài đặt" — 7 ký tự nhưng cao hơn do dấu | | Nhãn nav thông thường | ~6–10 ký tự | ~8–16 ký tự | | Meta description 160 ký tự | ~28–32 từ | ~20–25 từ (từ dài hơn) |

Nếu bạn thiết kế sản phẩm đa ngôn ngữ, generate placeholder cho từng locale và kiểm tra layout có vẫn đúng không. Làm điều này ở giai đoạn wireframe, không phải sau khi UI đã được handoff.

Khi KHÔNG nên dùng Lorem Ipsum

A/B test cho conversion. Placeholder text trong một variant test sẽ cho dữ liệu click-through vô nghĩa.

Review accessibility. Kiểm tra screen reader và keyboard navigation cần content giống production để reviewer phát hiện lỗi labeling và heading hierarchy.

Review content strategy. Khi stakeholder đánh giá kiến trúc thông tin, placeholder không cho họ gì để phản hồi.

Deploy production. Lorem Ipsum đã lên production nhiều lần hơn bất kỳ ai muốn thừa nhận — trong website, app mobile, và tài liệu in.

SEO. Lorem Ipsum trên trang được crawl báo hiệu với search engine rằng trang không có nội dung có nghĩa.

Sử dụng thư viện lorem-ipsum

import { LoremIpsum } from 'lorem-ipsum';

const lorem = new LoremIpsum({
  sentencesPerParagraph: { max: 8, min: 4 },
  wordsPerSentence: { max: 16, min: 4 },
});

console.log(lorem.generateWords(5));
console.log(lorem.generateSentences(3));
console.log(lorem.generateParagraphs(2));

Để dùng word pool tùy chỉnh (ví dụ placeholder chuyên ngành):

const lorem = new LoremIpsum({}, 'word', '\n', mangWordArray, mangWordArray);

Quyền riêng tư

Toàn bộ quá trình generate chạy phía client. Không có dữ liệu nào được gửi đi.

Lorem Ipsum có phải tiếng Latin thật không?

Có — một phần. Nó được lấy từ tác phẩm De finibus bonorum et malorum của Cicero (45 trước CN), cụ thể là phần 1.10.32. Các từ đã bị một thợ sắp chữ đảo lộn vào thế kỷ 16 để tạo ra text mẫu trông giống ngôn ngữ tự nhiên nhưng không có nghĩa. Một số từ là tiếng Latin xác thực; một số là mảnh ghép bị cắt ngắn. Nó không có nghĩa ngữ pháp — giá trị của nó thuần túy về mặt thị giác.

Tại sao không dùng "Nội dung ở đây" lặp lại làm placeholder?

Cụm từ ngắn lặp đi lặp lại tạo ra điểm xuống dòng đồng nhất, không tự nhiên và không phản ánh cách copy thực sẽ reflow. Lorem Ipsum có độ biến thiên độ dài từ tự nhiên bắt chước nhịp văn xuôi thực. Điều này quan trọng khi bạn đánh giá xuống dòng, kiểm soát widow/orphan, hành vi text overflow, và khoảng cách đoạn văn.

Có nên generate placeholder bằng ngôn ngữ thực của app không?

Có, khi ngôn ngữ đích khác tiếng Anh. Tiếng Việt, Tây Ban Nha, Đức và Phần Lan có từ và câu dài hơn tiếng Anh đáng kể. Thiết kế với placeholder tiếng Anh cho UI tiếng Việt là nguyên nhân phổ biến gây lỗi truncation và overflow layout chỉ xuất hiện muộn trong QA. Generate placeholder cho từng locale và kiểm tra layout.

Hipster Ipsum là gì?

Một biến thể hiện đại dùng tiếng lóng Anh đương đại — "artisan," "selvage," "normcore," "craft beer." Nó cố tình nhận ra được là placeholder trong khi vô lý. Hữu ích trong wireframe presentation với stakeholder hay hỏi "trang này thực sự nói gì?" — nội dung vừa quen vừa vô nghĩa báo hiệu rõ ràng rằng copy vẫn đang chờ xử lý.

Có thể dùng Lorem Ipsum trong production không?

Không. Lorem Ipsum đã vô tình lên production nhiều lần — trong website, ứng dụng mobile và tài liệu in. Không bao giờ dùng placeholder làm giá trị mặc định trong trường CMS, form hay email template có thể đến tay người dùng thực. Cũng tránh dùng trên trang được crawl vì nó báo hiệu nội dung kém chất lượng với search engine.

Chế độ HTML output là gì?

Chế độ HTML bọc output trong thẻ <p> để bạn có thể paste trực tiếp vào HTML template hoặc rich-text editor mà không cần thêm markup thủ công. Tránh được lỗi phổ biến là paste plain paragraph text vào HTML context và nhận được một khối text không định dạng. Mỗi đoạn văn trở thành một element <p> riêng.

Cần generate bao nhiêu từ cho card thông thường hay meta description?

Card body chuẩn (~3 dòng ở 16px trên container 320px) cần khoảng 20–30 từ. Meta description (giới hạn ~160 ký tự của Google) cần 25–35 từ tiếng Anh, ít hơn với tiếng Việt hoặc tiếng Tây Ban Nha vì từ thường dài hơn. Trang bài viết đầy đủ cần 300–800 từ trải qua 4–8 đoạn văn.