Menu

Tạo Lorem Ipsum

Tạo văn bản giữ chỗ kiểu Latin cổ điển, hipster, bacon hoặc doanh nghiệp.

Tác giả Nethanel Bar, Co-founder & CEO

Cập nhật lần cuối

Sẵn sàng học code thật sự?

Coddy dạy bạn bằng cách viết code thật ngay trên trình duyệt: bài học tương tác, phản hồi tức thì và AI hỗ trợ khi bạn bị kẹt.

Công cụ tạo Lorem Ipsum là gì?

*Lorem ipsum* là văn bản giữ chỗ tiêu chuẩn mà nhà thiết kế và lập trình viên dán vào bố cục để xem trông thế nào trước khi có nội dung thật. Các từ đều vô nghĩa, là những mảnh của một đoạn văn Cicero bị xáo trộn, nên người xem chú ý đến *hình dạng* của văn bản thay vì cố đọc nó.

Dùng công cụ tạo tốt hơn gõ asdfasdf vì một lý do lớn: độ dài từ và dấu câu giống thật cho bạn xem trước chính xác hơn nhiều về cách xuống dòng, căn đều và cách tiêu đề nằm cạnh đoạn văn. Nó cũng tránh được tình huống ngượng ngùng khi văn bản giữ chỗ lọt lên bản production.

Công cụ này hỗ trợ bốn biến thể: lorem ipsum Latin cổ điển, cùng các phiên bản vui nhộn *hipster*, *bacon* và *corporate* cho những thiết kế mà tiếng Latin có vẻ quá khô khan. Văn bản được tạo ngay trên máy của bạn và sao chép được dưới dạng văn bản thuần hoặc bọc trong thẻ <p> để dán thẳng vào HTML.

Những điều nên biết về Lorem Ipsum

  • Văn bản chuẩn bắt đầu bằng *Lorem ipsum dolor sit amet, consectetur adipiscing elit.*: hãy giữ câu mở đầu đó khi bạn cần vẻ cổ điển.
  • Độ dài giống thật quan trọng hơn chính xác từng từ. Hãy khớp số đoạn văn và nhịp câu với nội dung thật của bạn.
  • Thay văn bản giữ chỗ *trước khi* phát hành. Chạy grep tìm lorem trong repository ngay trước khi release là một bước kiểm tra cuối rẻ mà hiệu quả.
  • Với chữ viết không phải Latin (tiếng Ả Rập, chữ Trung, Nhật, Hàn), hãy dùng văn bản giữ chỗ mô phỏng độ dài từ và mật độ dấu câu của chữ viết đó: văn bản Latin ước tính thiếu độ rộng ký tự trong những bố cục ấy.

Cách tạo Lorem Ipsum từng bước

  1. Chọn biến thể

    Latin cổ điển là lựa chọn mặc định an toàn. Dùng *hipster*, *bacon* hoặc *corporate* khi bạn muốn giọng điệu hài hước, thường cho bản mockup nội bộ, trò đùa hoặc công cụ thiết kế mang thương hiệu.

  2. Đặt số đoạn văn và số câu

    Khớp với hình thức của nội dung cuối cùng. Ba đoạn văn, mỗi đoạn năm câu là mặc định tốt cho bố cục bài blog. Với dòng phụ đề ở phần hero, một đoạn ngắn là đủ.

  3. Bật câu mở đầu cổ điển

    Với Latin cổ điển, bạn có thể buộc đoạn đầu tiên bắt đầu bằng *Lorem ipsum dolor sit amet…*, hữu ích khi nhà thiết kế mong đợi câu mở đầu chuẩn.

  4. Chọn văn bản thuần hoặc HTML

    Văn bản thuần dễ dùng nhất cho công cụ thiết kế và slide thuyết trình. HTML bọc mỗi đoạn văn trong thẻ <p> để bạn dán thẳng vào CMS hoặc template.

  5. Sao chép và dán

    Nhấn *Tạo lại* cho đến khi nhịp văn bản vừa ý, rồi sao chép kết quả. Đừng quên thay bằng nội dung thật trước khi phát hành.

Tra cứu nhanh Lorem Ipsum

Các lượng văn bản thường dùng và kết quả gần đúng của chúng.

Trường hợp dùngSố đoạnSố câu mỗi đoạn
Tweet / chú thích một dòng11
Phụ đề phần hero12
Nội dung thẻ sản phẩm13
Đoạn xem trước bài blog15
Bố cục bài blog đầy đủ55
Bài viết dài86

Ví dụ Lorem Ipsum để thử

Câu mở đầu cổ điển, hai đoạn văn

Kết quả mẫu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Câu mở đầu Latin chuẩn, tiếp theo là đoạn văn thứ hai được tạo tự nhiên. Dùng kiểu này ở bất cứ đâu nhà thiết kế mong đợi vẻ truyền thống.

Đoạn HTML cho CMS

Kết quả đã bọc thẻ
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Chuyển định dạng đầu ra sang HTML khi dán vào trình soạn thảo văn bản định dạng có hiểu thẻ. Mỗi đoạn văn thành một phần tử <p> riêng.

Biến thể bacon cho bản mockup vui nhộn

Kết quả mẫu

Bacon ipsum dolor amet kielbasa pork belly drumstick. Pastrami short loin tenderloin meatball, jowl spare-ribs glazed prosciutto.

Bacon ipsum khiến buổi duyệt bố cục vui hơn và cho khách hàng thấy ngay nội dung chỉ là giữ chỗ. Đừng đưa nó lên production.

Những lỗi thường gặp với Lorem Ipsum

  • Phát hành một trang mà nội dung thật chưa bao giờ được thay vào. Hãy tìm lorem và ipsum trong repository trước mỗi lần release.
  • Dùng một khối văn bản khổng lồ trong khi nội dung thật có nhiều đoạn ngắn. Hãy khớp cấu trúc, không chỉ số từ.
  • Dán hipster hoặc bacon ipsum vào slide gửi khách hàng mà không giải thích: câu đùa có thể phản tác dụng bên ngoài nhóm thiết kế.
  • Điền lorem ipsum vào biểu mẫu hoặc alt text. Trình đọc màn hình sẽ đọc nó, công cụ tìm kiếm sẽ lập chỉ mục nó, và người dùng sẽ nhìn thấy nó.
  • Coi độ dài văn bản giữ chỗ là yêu cầu nội dung. Nội dung thật hiếm khi dài bằng đoạn lorem bạn đã dùng.

Câu hỏi thường gặp về Lorem Ipsum

Lorem Ipsum có nghĩa là gì?

Đó là tiếng Latin bị xáo trộn từ một đoạn văn của Cicero (*De finibus bonorum et malorum*, năm 45 trước Công nguyên). Các từ bị cắt và sắp xếp lại nên văn bản không có nghĩa: nó chỉ là những hình dạng để nhà thiết kế ước lượng bố cục.

Lorem Ipsum có phải chỉ là văn bản ngẫu nhiên?

Nó được tạo từ một kho từ cố định trông giống tiếng Latin, với độ dài từ và dấu câu giống thật. Nó trông giống văn xuôi thật hơn nhiều so với các ký tự ngẫu nhiên, và đó chính là mục đích.

Vì sao Lorem Ipsum được dùng làm văn bản giữ chỗ?

Vì không đọc được, nhà thiết kế tập trung vào bố cục thay vì nội dung. Độ dài từ và dòng của nó dễ đoán, nên xem trước cách xuống dòng và căn đều rất tốt.

Lorem Ipsum và văn bản giả khác nhau thế nào?

Lorem Ipsum là một loại văn bản giả cụ thể, biến thể tiếng Latin bị xáo trộn. *Văn bản giả* là thuật ngữ chung, bao gồm cả hipster, bacon và các kho từ theo chủ đề khác.

Đưa Lorem Ipsum lên production có an toàn không?

Không. Văn bản giữ chỗ trên production là sự cố ngượng ngùng thường gặp và là rủi ro SEO: công cụ tìm kiếm có thể lập chỉ mục văn bản giữ chỗ, và khách truy cập sẽ nhìn thấy nó. Luôn thay bằng nội dung thật trước khi ra mắt.

Tìm hiểu thêm

Công cụ lập trình khác

Hình minh họa các ngôn ngữ lập trình của Coddy

Học lập trình cùng Coddy

Bắt đầu