Як згенерувати lorem ipsum онлайн (з опціями)

Найшвидший спосіб згенерувати текст-заповнювач — узагалі пропустити кнопку «згенерувати». Відкрий наш Lorem Ipsum — він працює цілком у твоєму браузері з нульовими мережевими викликами, тож працює офлайн і нічого не виробляється на сервері — обери корпус, вибери слова/речення/абзаци, введи, скільки треба, і вивід оновлюється під час набору. Копіюй або завантажуй .txt. Готово.

Оце і вся робота. Але інструмент має три смаки наповнювача, режим точної кількості й перемикач HTML-виводу, якого більшість дизайнерів і девів навіть не помічає, що хотіли. Ось як користуватися кожним — плюс одна річ, яку майже кожен інший генератор lorem тихцем робить неправильно під капотом.

Обери свій смак: Lorem, Hipster чи Bacon

Усі три дають те саме — граматично оформлену нісенітницю, що заповнює простір, не вимагаючи, щоб її читали. Різняться вони лише списком слів, що їх рухає.

Випадок із Bacon — недооцінений. Класичний Lorem настільки знайомий, що поспішливий клієнт може ковзнути по ньому очима, але ніхто не затвердить головну сторінку з написом «pork belly tenderloin». Це текст-заповнювач із вбудованим розтяжком. Обери корпус із першого дропдауну; вивід перегенеровується тієї ж миті, коли ти переключаєш.

Слова, речення чи абзаци — влуч у точну кількість

Селектор одиниць — ось де живе точність. Кожна одиниця відповідає на інше питання макета.

Тож абзац тягне приблизно від 25 до 100 слів і в середньому десь 50. Три абзаци дають тобі ~150 слів — досить, щоб пресувати картку чи компонент прев'ю блогу, не переповнивши його.

Використовуй режим «Слова», коли маєш реальну ціль для відповідності. Будуєш макет, що має вмістити есе на 500 слів? Згенеруй рівно 500 слів, кинь їх усередину — і одразу побачиш, чи виживе твій line-height і ширина колонки за такого обсягу. Щоб переконатися, що згенерований блок реально влучає в кількість — і заразом перевірити символи й час читання — встав його в Лічильник слів. Обидва інструменти згодні, бо обидва рахують однаково. Якщо ти розмірюєш сторінку, а не поле, наш гайд про кількість слів на сторінку зіставляє кількість слів із фізичними сторінками за різних інтервалів і шрифтів, тож ти знатимеш, як 500 слів наповнювача виглядатимуть, коли їх зверстають.

Є ще й перемикач класичного вступу. Лиши його ввімкненим — і вивід почнеться з канонічного рядка, якого чекає твоє око: «Lorem ipsum dolor sit amet, consectetur adipiscing elit.» — а далі заповниться рандомізованим текстом. Вимкни його, коли хочеш повністю випадковий зразок, наприклад коли генеруєш кілька блоків і не хочеш, щоб усі вони починалися однаково.

Чому «Lorem Ipsum» — це не просто абракадабра

Ось шматок, що годиться для гарного факту на дизайн-рев'ю. Класичний текст — не вигадана нісенітниця, а покалічений Цицерон.

Джерело — «De finibus bonorum et malorum» («Про межі добра і зла»), трактат з етики, який Цицерон написав у 45 році до н. е. Упізнаваний фрагмент походить з уривка, що починається «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet...» — приблизно «немає нікого, хто любив би сам біль за те, що він біль». Складач у 1500-х переплутав той уривок у нечитабельний наповнювач, щоб продемонструвати гарнітуру, і він прижився на п'ять століть.

Ця історія пояснює, чому воно працює. Слова несуть справжню латинську форму — правдоподібні довжини слів, ритм голосних і приголосних, каданс речень — але нуль сенсу. Твоє око читає це як «текст», а мозок не намагається це розпарсити. У цьому весь фокус.

У дизайнерів є назва для навмисного використання нісенітниці: грікінг. Сенс у тому, щоб стейкхолдери не рецензували текст, коли тобі треба, щоб вони рецензували дизайн. Заповни макет справжньою англійською — і фідбек перетвориться на «я б переформулював той заголовок». Заповни його lorem ipsum — і розмова лишиться про інтервали, ієрархію й баланс, заради чого макет і існує. Текст-заповнювач — це інструмент фокусування, замаскований під наповнювач.

Частина, яку більшість генераторів робить неправильно: random ≠ Math.random()

Тепер інженерія. Вибрати випадкове слово зі списку звучить тривіально — береш список зі 160 слів, обираєш індекс, готово. Наївна версія виглядає так:

const word = words[Math.floor(Math.random() * words.length)]

Воно працює — і водночас тонко зламане. Math.random() нормальний для вибору слова, але сама техніка — відображення випадкового числа на діапазон через modulo чи множення float — вносить modulo-зсув, коли діапазон не ділиться рівно на випадкове джерело. Деякі слова випадають трішки частіше за інші. Для іграшкового генератора це нікого не обходить. Але «достатньо добре, з невеликим зсувом» — це рівно той джуніорський шорткат, який наші ґардрейли забороняють по всьому цьому сайту.

Lorem Ipsum натомість використовує crypto.getRandomValues() із rejection sampling (вибіркою з відхиленням), щоб знищити зсув цілком:

function secureRandomInt(maxExclusive) {
  const range = 2 ** 32
  const limit = range - (range % maxExclusive)
  const buf = new Uint32Array(1)
  while (true) {
    crypto.getRandomValues(buf)
    if (buf[0] < limit) return buf[0] % maxExclusive   // discard the biased tail
  }
}

Картинка — це весь аргумент. Зліва відображення випадкового числа на список зі 160 слів через modulo лишає залишковий «хвіст», що не ділиться рівно — слова, які покриває цей хвіст, випадають трішки частіше, тож стовпці нерівні. Справа rejection sampling викидає будь-яке значення, що влучило в той хвіст, і кидає ще раз, тож кожен стовпець однакової висоти. Рядок limit — це те, що зрізає нерівну верхню скибку 32-бітного діапазону, щоб кожне слово в списку мало по-справжньому рівний шанс. Це той самий стандарт, що ти застосував би до будь-чого, що має бути без зсуву, — і та сама причина, чому наші інші інструменти генерують ID через crypto.randomUUID() замість Math.random().toString(36). Якщо хочеш повний тур того, чому наївне поводження з рядками ламається, гайд про підрахунок слів у JavaScript проходить той самий клас багу на боці підрахунку, де text.split(' ') тихо повертає сміття на всьому неанглійському.

Чи видно той зсув у твоєму тексті-заповнювачі? Ні. Чи коштує бодай чогось зробити це правильно? Теж ні. Тож ми зробили правильно.

HTML-вивід, копіювання й завантаження

Два фінальні штрихи, націлені на розробників.

Переключи одиницю на Абзаци — і розблокується другий перемикач: HTML-вивід. Увімкни його — і кожен абзац прийде загорнутим у теги <p>...</p>, готовий вставитися просто в шаблон чи поле CMS — без ручного загортання тегами. Він вимкнений для режимів слів і речень, бо загортати вільний список слів у теги абзаців не має сенсу.

Звідти Копіювати кидає текст у твій буфер обміну, а Завантажити зберігає файл lorem-ipsum.txt для сідингу фікстур, тестових даних чи контент-аудиту. Якщо ти згенерував текст для поля з обмеженою довжиною — мета-опис, соціальний підпис, SEO-заголовок — прожени його через Ліміт символів, щоб переконатися, що він влазить у ліміт платформи, перш ніж відправляти макет. Він рахує за графемами, тож багатобайтові символи не збивають число.

Ось і весь набір інструментів: три корпуси, три одиниці, точна кількість до 500, класичний вступ, HTML-загортання, копіювання й завантаження — усе генерується локально, миттєво, щоразу, коли ти торкаєшся контрола.

FAQ

Як згенерувати текст lorem ipsum онлайн? Відкрий генератор, обери корпус (Lorem, Hipster чи Bacon), вибери одиницю й введи кількість. Вивід оновлюється миттєво — кроку відправки немає. Скопіюй його в буфер обміну чи завантаж файл .txt. Без акаунта, без завантаження, і він перегенеровується тієї миті, коли ти міняєш будь-яку опцію.

Чим відрізняються Lorem, Hipster і Bacon ipsum? Та сама структурована нісенітниця, різні списки слів. Lorem — невидима класика для серйозних макетів. Hipster («kombucha», «fixie») додає характеру для lifestyle- й стартап-роботи. Bacon («pork belly», «ribeye») навмисно безглуздий, аби клієнт ніколи не сплутав заповнювач зі справжнім текстом.

Чи можна згенерувати конкретну кількість слів? Так — постав одиницю «Слова» й введи ціль до 500. Щоб переконатися, що блок влучає у твоє число разом із кількістю символів і часом читання, встав його в Лічильник слів, який токенізує так само, як генератор, тож двоє завжди згодні.

Чи lorem ipsum — це справжня латина? Це переплутана латина. Текст походить від твору Цицерона «De finibus bonorum et malorum» (45 рік до н. е.), переставленого у безглуздий наповнювач складачем у 1500-х. Справжні латинські корені, жодного реального сенсу — і саме тому твоє око читає це як текст, не намагаючись зрозуміти.

Навіщо використовувати lorem ipsum замість набирати справжній текст? Справжній текст затягує рецензентів у критику тексту замість дизайну. Нейтральний заповнювач — грікінг — тримає фідбек на макеті, інтервалах та ієрархії. Він також дає реалістичний обсяг тексту ще до появи фінального контенту, тож твій макет рано перевіряється на реальній довжині.

Чи надсилає генератор мої налаштування на сервер? Ні. Кожне слово виробляється локально через crypto API твого браузера — жодного виклику API, жодного логування, нічого не покидає сторінки. Він працює офлайн після завантаження сторінки й відчувається миттєвим, бо немає мережевого раунд-трипу.