Илья!

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

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

  $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>

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

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