k8o

← Playgrounds一覧に戻る
CSSデモ1

baseline-shift

インラインレベル要素のベースラインを親要素から相対的にずらすCSSプロパティです。SVGとHTMLをまたいで同じプロパティで扱えます。

baseline-shift値の比較

セレクトでsub/superなどの値を切り替えると、化学式の下付き文字や注釈記号が破線のベースラインからずれる様子を比較できます。

SVGの tspanbaseline-shift: super を当てています。赤い文字がずらしの対象、グレーの破線が親 text のベースラインです。

水の化学式は H2O です。面積は 10 m2 です。注釈付きの語※1を本文に。