According to typography rules there should not be spacing after spaced text if punctuation follows, but larger spacing if unspaced text follows. Similar for the space on the left side of spaced text.
My current solution:`
<!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>
This means, that it needs to set extra classes dependent on preceeding or succeeding punctuation, but not in other cases. In case of content editing JavaScript, the human editor or server side must take care.
Does somebody know a simpler solution?
EDIT: Commented out unnecessary rule, added examples D. and E. for completeness of the wanted behaviour. B. is unwanted.
