Самый простой способ в этом случае — взять готовый типограф на Яваскрипте и оттипографить заголовки «на клиенте», в браузере пользователя. Для этого нужно подключить библиотеку с типографом и пройтись им по заголовкам:

<body>

<!-- ... -->

<!-- Подключаем библиотеку с типографом -->
<script src="https://cdn.jsdelivr.net/npm/typograf@6.7.4/dist/typograf.min.js"></script>
<script>
  (function() {
    var typograf = new Typograf({ locale: ['ru'] })
    
    // Выбираем, что будем типографить
    var nodes = document.querySelectorAll('h1, h2, h3, h4')
    
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i]
      // Типографим каждый найденный заголовок
      node.innerHTML = typograf.execute(node.innerHTML)
    }
  })()
</script>
</body>

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы