Webタイポグラフィの深淵：`text-emphasis`で魅せる「傍点」の設計思想
フロントエンド開発において、「傍点（ぼうてん）」の実装は、単なるビジュアルの装飾以上の意味を持ちます。それは日本語のタイポグラフィにおける情緒と、セマンティクス（意味論）のバランスをどう取るかという、エンジニアの美学が問われる領域です。
多くのエンジニアが `` に個別のスタイルを当て、力技で実装してしまいがちなこの表現。しかし、大規模なアプリケーションの設計において、その実装はパフォーマンスのボトルネックとなり、アクセシビリティの観点でも重大な火種を抱えることになります。本稿では、ブラウザのレンダリングエンジンを深く理解した上で、最も堅牢かつパフォーマンスに優れた「傍点」の実装アプローチを紐解きます。
—
1. なぜ `text-emphasis` なのか：レンダリング負荷とメモリ効率の最適化
古くからある「疑似要素（`::after`）で点を配置する」手法は、現代の複雑なSPAにおいては避けるべきアンチパターンです。
なぜなら、各文字に対して `content: “・”` を生成することは、DOMツリーの肥大化とリフロー計算のコストを増大させるからです。これに対し、CSSの `text-emphasis` プロパティはブラウザのネイティブな描画エンジンに直結しています。
- メモリ効率: DOMノードや擬似要素を増やすことなく、レンダラーがテキスト描画のプロセスでインラインとして処理します。
- リフロー回避: テキストの配置と同時に計算されるため、レイアウトシフトのリスクが最小限に抑えられます。
推奨されるCSS設計
/ グローバルなユーティリティとしての定義 /
.u-emphasis-dot {
/ text-emphasis は shorthand で指定し、スタイルを統一する /
/ 値: