タイポグラフィの規則によれば、句読点が続く場合は間隔のあるテキストの後に間隔をあけるべきではありませんが、間隔のないテキストが続く場合はより大きな間隔が必要です。間隔のあるテキストの左側のスペースについても同様です。
私の現在の解決策:`
<!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. を追加しました。B.は不要です。