Лучшее решение для разнесенных букв и знаков препинания?
В соответствии с правилами типографики не должно быть пробелов после разнесенного текста, если следует пунктуация, а должно быть больше пробелов, если следует неперерезанный текст. Аналогично для пространства слева от разнесенного текста.
Мое текущее решение:`
<!DOCTYPE html>
<html>
<head>
<style>
h1 { font-size: 1.5em; }
.spaced { letter-spacing:0.5em; }
.spaced:before { content:''; margin-left:0.5em; }
/* .spaced:after { content:''; margin-right:0.5em; } */
h1 span { border: 1px solid red;}
.dot_before:before { content:''; margin-left:-0.0em; }
.dot_after:after { content:''; margin-right:-0.5em; }
</style>
</head>
<body>
<h1>A. "<span>Plain</span>"</h1>
<h1>B. "<span class='spaced'>Spaced only</span>"</h1>
<h1>C. "<span class='spaced dot_before dot_after'>Before and after</span>"</h1>
<h1>D. Normal <span class='spaced'>Spaced</span> Normal.</h1>
<h1>E. <span class='spaced dot_before'>Spaced</span> Normal.</h1>
</body>
</html>
Это означает, что ему нужно устанавливать дополнительные классы в зависимости от предшествующей или последующей пунктуации, но не в других случаях. В случае редактирования контента JavaScript должен позаботиться о редакторе или стороне сервера.
Кто-нибудь знает более простое решение?
РЕДАКТИРОВАТЬ: закомментированы ненужные правила, добавлены примеры D. и E. для полноты желаемого поведения. Б. нежелателен.