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.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




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

1 Как вы верифицируете оценку сроков от сотрудника? 1 Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 45 Как избежать «эффекта Тильды»? 2