x
 
Андрей Пулин
10 января 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Хочу, чтобы на моих сайтах в заголовках типа H1 и в прочих местах, куда ручным типографом не добраться, предлоги не свешивались. Как это сделать?

Я не программист, так что мне, пожалуйста, для тупых.


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

<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих Руст, можно ли сделать такую кнопку без фоновой картинки? 3 Как в бюро верстают электронные письма и рассылки




Недавно всплыло

На днях студент спросил меня: «Почему мы работаем в Иллюстраторе, а не в Кореле?» 8 Как можно измерить уровень владения навыком? 2 Насколько жизнеспособна схема, когда тебе платят и ты сам платишь комиссионные с каждого заказа клиента? 1 2