Unnecessary Spaces in Safari's Reader Mode

[yamatoiizuka]

Safari のリーダーモードで、カーニングや四分アキスペースで使われているスペース／NBSP が出力されてしまう。

[yamatoiizuka]

.typeset-thin-space, .typeset-kerning {
  visibillity: hidden;
}

では、リーダーモードに不要な半角スペースは出力されなくなったが、今度は text-decoration が効かなくなってしまう。（カーニングの適用がある「よ-う-な」間が空いてしまう。）

[yamatoiizuka]

そのほかあり得そうなのは、Web コンポーネントを用いて、typeset-thinspace と typeset-kerning をカプセル化してしまう、あたりだろうか…？ Web コンポーネントは Node 環境での正解がよくわからない。#49 も参照のこと

[yamatoiizuka]

HTML 側でスペースを出力するのをやめ、CSS の before/after 擬似要素の content で出力するのがよさそう。

例）

.typeset-thin-space::after,
.typeset-kerning::after {
  font-family: ling-one;
  content: ' ';
}

[yamatoiizuka]

修正後のスクリーンショット