В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});

Разбор кода по частям

1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.

2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.

3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.

4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).

5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.

6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.

Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

Этот простой скрипт значительно улучшает типографику русскоязычных веб-страниц, делая текст более читаемым и профессионально оформленным.

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.

Разработчики, а как вы решаете вопрос переноса «висячих» слов?

Подписывайся на мой телеграм-канал, чтобы узнать ещё больше полезных фишек верстки и веб-дизайна.

В описании указано Flex

«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.

🚀 С чего всё началось?

В начале всё было очень просто.
Мы сделали простенького бота, о котором я уже как-то тут писал, и бэк рендерил картинки с кусочком карты, где ты находишься.

В целом, даже эта идея была вполне рабочей и первые 300 пользователей с разных источников легко собрались. Мы даже провели на 9 мая конкурс "найди звезду победы" и выплатили победителю небольшой приз :)

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

На боте лишь проверили гипотезу, отладили механики, типа уменьшения энергии, подзарядки аккумулятора в течении времени, пока не заходишь в игру.

Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.

Вот как это выглядело:

• Пользователь заходил и видел карту Марса.

• Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:

🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:

📐 Формулы для отображения:

При размере одного тайла T:

• W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

• H = W / 2 — изометрическая высота (высота ромба).

• WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;

🧩 Что это даёт:

• (dx - dy) — смещает тайл по горизонтали.

• (dx + dy) — смещает тайл по вертикали.

• centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.

🎯 В результате:

• Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

• Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

  Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

  Подключили ранее обкатанный в чатботе расход энергии за каждый шаг, и разный расход за диагональные движения, в сравнении с линейным. Плюс небольшой рандом :)

  Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

• Telegram сам отдаёт токен с подписью.

• Мы проверяем подпись на бэке по HMAC SHA256.

• Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

• Кристаллы на клетках — можно собирать.

• Подсветка клеток: белая рамка — твоя, красная — чужая.

• Имена владельцев, чтобы было видно, кто что захватил.

  В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

Мы поняли, что каждая картинка может тормозить игру на слабом устройстве, и:

• Добавили прелоадер, который подгружает PNG-шки перед игрой.

• Сделали показ спиннера на любом действии (движение, загрузка).

• Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

• Заходит в Telegram Mini App.

• Авторизуется за доли секунды.

• Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

• Может двигаться по клеткам, собирать кристаллы (в будущем - бурить и находить ресурсы, торговать ими, покупать землю).

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.

💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄