Разработка интерфейсов

Как сделать разрядку прописных на статическом сайте

Типографика говорит, что идущие подряд прописные следует разрежать:

PROTECTION → PROTECTION

Капс периодически встречается в контенте любого сайта, но без обработки на этапе сборки остаётся неразреженным. Сегодня напишем авторазрядку. С точки зрения разработчика это значит, что, когда прописные в тексте идут подряд, их нужно обнаружить, обернуть в <span> и стилизовать.

Воспользуемся регулярным выражением:

/\p{Uppercase_Letter}[\p{Uppercase_Letter}\d]+/gu

Это выражение ищет все последовательности символов, которые начинаются с заглавной буквы и заканчиваются тоже заглавной буквой либо цифрой. Флаг /u включает поиск по свойствам Юникода.

Как применить в проекте

Напишем трансформацию — Яваскрипт-код, который изменяет статическую ХТМЛ-страницу при постпроцессинге. Трансформация обернёт капитель в <span> с классом .caps:

/**
 * @param {Window} window
 */
module.exports = (window) => {
	const capitals = /\p{Lu}[\p{Lu}\d]+/gu

	const { document, NodeFilter } = window

	// Находим в дереве текстовые узлы
	const walker = document.createTreeWalker(
		document.body,
		NodeFilter.SHOW_TEXT
	)

	let node

	while ((node = walker.nextNode())) {
		const text = node.nodeValue

		if (!text.match(capitals)) continue

		const parent = node.parentNode

		// Помещаем в обёртку все символы, кроме последнего, так как
		// `letter-spacing` добавляет отступ справа от каждой буквы
		const updatedHtml = text.replace(capitals, (match) => {
			const head = match.slice(0, -1)
			const tail = match.slice(-1)

			return `<span class="caps">${head}</span>${tail}`
		})

		const tempDiv = document.createElement('div')
		tempDiv.innerHTML = updatedHtml

		while (tempDiv.firstChild) {
			parent.insertBefore(tempDiv.firstChild, node)
		}

		parent.removeChild(node)
	}
}

Пример вывода:

<p>ХТМЛ-страница</p>
↓
<p><span class="caps">ХТМ</span>Л-страница</p>

Теперь напишем класс .caps.

Два способа выполнить разрядку в ЦСС

Первый. Если шрифт поддерживает капитель — уменьшенные прописные буквы, — удобно использовать встроенную Опентайп-функцию.

Капитель — красивая и не отвлекает внимание в наборе:

.small-caps {
	font-synthesis: none;
	font-feature-settings: 'smcp';
	font-variant-caps: unicase;
	letter-spacing: 0.05em;
}

Второй. Помогает визуально приблизиться к капители, если в шрифте такой функции нет:

.caps {
	letter-spacing: 0.07em;
}
Класс слегка разрежает прописные, не меняя их размер. Не уменьшайте прописные вручную. Получится псевдокапитель — уменьшенные буквы, штрихи которых заметно тоньше других букв

См. также

Советы бюро Горбунова: