Наверняка вы видели на многих сайтах свешивающиеся в начале строк кавычки и скобки. И хотя на бумаге такое полное свешивание в простых текстах (не заголовках) как минимум спорно, на вебе это выглядит отлично. Такое поведение текста называется «висячая пунктация», и на текущий момент есть ровно один способ её реализации в (X)HTML/CSS — добавление парных стилей. Этот способ, скажем, применён на сайте Артемия Лебедева.

Главный минус классической «лебедевской» реализации висячей пунктуации на вебе — её статичность. Поясню, как у них это сделано.

В CSS прописаны парные стили: .h[symbol] и .s[symbol], например, .slaquo и .hlaquo. Для каждого из них прописан отвес через margin. При использовании свешивающихся символов в тексте к пробелу перед символом добавляется стиль s[symbol], а к самому символу — h[symbol]. Соответственно, когда и пробел, и символ, находятся в одной строке, отвесы взаимно компенсируются, и текст выглядит как обычно. А когда свешивающийся символ по каким-то причинам сносится на следующую строку — первый стиль (балансирующий второй блок) остаётся на предыдущей строке, поэтому нужный символ свешивается влево на заданный отвес.

Реализация по сути хорошая, с одним «но» — шрифты. Для каждого шрифта отвес, скажем, открывающей кавычки-ёлочки или открывающей скобки разный. Да, конечно, мы можем его вычислить вручную и прибить в таблице стилей гвоздями (так и сделано у Лебедева на сайте), но для этого придётся быть уверенным, что как минимум у 90% посетителей сайта будет именно этот шрифт. В случае, если браузер покажет это каким-то иным шрифтом, начнутся проблемы с разъезжающимися строками.

Что было сделано?

В начало документа помещаются три заведомо невидимых блока: блок с открывающей ёлочкой, блок с открывающей скобкой, и блок размером 1em (если есть необходимость свешивать ещё какие-либо символы — добавляем нужные блоки, там могут быть любые символы). Далее вызывается несложная функция на JavaScript, вычисляющая размеры этих невидимых блоков, конвертирующая их из пикселей в «эмы» (не зря же мы сделали блок размером 1em), и динамически вписывающая их в основной CSS документа. Использование самих отвесов при этом совершенно не отличается от оригинального способа, отличается только задание стилей.

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

Напоследок приведу пример конечной реализации (за текстовый материал спасибо «Яндекс.Рефератам»). Не стесняйтесь использовать данную функцию в своих сайтах, но, пожалуйста, уважайте копирайты. Пример гарантированно работает в «Фаерфоксе», «Опере», «Интернет эксплорере», и «Сафари». Естественно, после внедрения динамической висячей пунктуации статические стили из CSS необходимо удалить.