x
 
Илья Страйков
24 января 2013

Как реализована висячая пунктуация на сайте бюро, в частности — в «Советах»?



Илья!

В проектах бюро висячая пунктуация делается в два подхода: на сервере и в браузере.

Сперва находим все свешивающиеся символы: открыващие скобки и кавычки, — и оборачиваем их в специальные классы. Так как принцип завязан на ширину символа, то рассмотрим пример с кавычками:



  $tiny = array('ни', 'не', 'и', 'но', 'а', 'или', 'да', 'как', 
                'из-за', 'про', 'по', 'за', 'для', 'на', 
                'до', 'при', 'меж', 'о', 'у', 'в', 'во',
                'с', 'со', 'от', 'ото', 'из', 'без', 'безо', 
                'к', 'ко', 'об', 'обо', 'под', 'подо', 
                'над', 'перед', 'передо');
  
  $text = preg_replace('~(\s)«~', 
    '<span class="hpspace"> </span><span class="hpquote">«</span>', $text);
  $text = preg_replace('~[^>]«~', '<span class="hpquote">«</span>', $text);
  $text = preg_replace('~^«~', '<span class="hpquote">«</span>', $text);
  $text = preg_replace('~(' . 
    implode('|', $tiny) .
    ')\s<span class="hpspace"> </span><span class="hpquote">«</span>~', 
    '\1 «', $text);

Хитрость именно в этих классах:

<style>

.hpspace {
  margin-right: 0.7em;
}

.hpquote {
  margin-left: -0.7em;
}

</style>

Смысл в том, что мы сдвигаем кавычку на её ширину влево с помощью марджина. При этом если перед кавычкой есть пробел (она внутри строки, а не сначала), то у пробела появляется равный по ширине правый марджин. Таким образом мы сохраняем пробел, если кавычка оказывается с предыдущим словом на одной строке.

Если перед кавычкой стоит предлог или союз, то мы не свешиваем кавычку, а делаем связку неразрывной. Это делается последним регулярным выражением в серверном коде.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

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

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

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

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

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

Игорь, добрый день! Как вы учились кодить? Можете посоветовать книги или курсы? Часть 2 1 Как улучшить процесс модерации 1 Игорь, добрый день! Как вы учились кодить? Можете посоветовать книги или курсы? Что нового в ЦСС? Селекторы :is и :where




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

Критика демотивирует 2 Ваша почта подтверждена! 4 Насколько правильным будет делать цвет ошибок почти таким же, как цвет кнопок? 4 8