Как сделать висячую пунктуацию на сайте HTML + CSS.

Прочтя одноимённый параграф Тёмы Лебедева, мне захотелось сделать висячую пунктуацию и на своём сайте. Довольно интересная идея, да и делать было особо нечего.

Выглядит вполне эффектно.

Сразу выражу благодарность за непосредственную и фактически сделанную уже висячую пунктуацию товарищу VIX. Я лишь доработал и дополнил код.

Вставляем в CSS сайта вот этот коротенький код.

span.slaquo{margin-left:0.6em;}
span.hlaquo{margin-left:-0.6em;}
span.sbrace{margin-left:0.3em;}
span.hbrace{margin-left:-0.3em;}

Именно это код и будет совершать действа по смещению символов. Кавычку на 0,6 em, а скобку на 0,3 em.

Для того, чтобы движок сайта автоматически заменял знаки в тексте на знаки со смещением был накатан небольшой код, который и заменял обычные скобки и кавычки на смещённые.

$text = str_replace("\n<", "<", $text);
$text = str_replace("\n&laquo;", "&laquo;", $text);
$text = str_replace("\n(", "(", $text);
$text = str_replace(" (", "(", $text);
$text = str_replace(" &laquo;", "&laquo;", $text);
$text = str_replace(" <", "<", $text);
$text = str_replace("(", "<span class=\"sbrace\"> </span> <span class=\"hbrace\">(</span>", $text);
$text = str_replace("&laquo;", "<span class=\"slaquo\"> </span> <span class=\"hlaquo\">&laquo;</span>", $text);
$text = str_replace("<", "<span class=\"slaquo\"> </span> <span class=\"hlaquo\"><</span>", $text);
$text = str_replace("<br><span class=\"slaquo\"> </span>", "<br>", $text);
$text = str_replace("<br><span class=\"slaquo\"> </span> ", "<br>", $text);
$text = str_replace("<br /><span class=\"slaquo\"> </span>", "<br>", $text);
$text = str_replace("<br /><span class=\"slaquo\"> </span> ", "<br>", $text);
$text = str_replace("<p><span class=\"slaquo\"> </span> ", "<p>", $text);

В коде, приведённом ниже идет замена кавычек и скобок. Замены идет только скобок и кавычек, расположенных в начале строк. Ибо я не люблю выравнивание текста по центру и по правому краю.

Кроме того, при смещении 1 символа, необходимо и сместить строку, чтобы не ехала целиком строка, для этого и добавлены дополнительные замены.

Пример полностью рабочий, можно вставлять в код и радоваться.

Еще раз спасибо Vix ;)