Как сделать висячую пунктуацию на сайте 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«", "«", $text);
$text = str_replace("\n(", "(", $text);
$text = str_replace(" (", "(", $text);
$text = str_replace(" «", "«", $text);
$text = str_replace(" <", "<", $text);
$text = str_replace("(", "<span class=\"sbrace\"> </span> <span class=\"hbrace\">(</span>", $text);
$text = str_replace("«", "<span class=\"slaquo\"> </span> <span class=\"hlaquo\">«</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 ;)