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 Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? ЦСС-переменные: как использовать и для чего могут пригодиться 2 Принцип «не протыкал — не сделал» 4




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

2 2 Хочу научиться сторителлингу 11 2