【CSS Modules】text-emphasis-positionプロパティの使い方
text-emphasis-positionプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
text-emphasis-positionプロパティは、テキストに付与される強調マーク（圏点やルビのように、文字の横や上、下に小さな記号を付けて単語やフレーズを強調する際に使われる記号）の表示位置を制御するプロパティです。このプロパティは、主に日本語などの特定の言語における文字の強調表現に利用されます。
強調マーク自体はtext-emphasis-styleプロパティでその形状や色を指定しますが、text-emphasis-positionプロパティは、それらのマークを対象テキストに対してどこに配置するかを決定します。
このプロパティは、強調マークを配置する位置を二つのキーワードを組み合わせて指定します。一つ目のキーワードは、テキストの行方向に対する位置を示し、over（文字の上または行の始まり側）またはunder（文字の下または行の終わり側）を指定します。二つ目のキーワードは、テキストの書字方向（文字が並ぶ方向）に対する物理的な位置を示し、right（文字の右）またはleft（文字の左）を指定します。
例えば、横書き（writing-mode: horizontal-tb）のウェブページでは、overを指定すると文字の上に、underを指定すると文字の下に強調マークが表示されます。一方、縦書き（writing-mode: vertical-rl）のウェブページでは、rightを指定すると文字の右側に、leftを指定すると文字の左側に強調マークが表示されます。
デフォルト値はover right（または書字方向に応じてover left）となっており、これは横書きであれば文字の上部、縦書きであれば文字の右部にマークが配置されることを意味します。このプロパティを使用することで、強調マークをテキストに対してより細かく、論理的かつ物理的な位置に配置するといった柔軟な指定が可能になります。
構文(syntax)
1selector { 2 text-emphasis-position: over right; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
'over right' | 'over left' | 'under right' | 'under left'
text-emphasis-position プロパティは、emphasisマーク（強調記号）の表示位置を指定します。指定できる値は、emphasisマークが文字の「上（over）」または「下（under）」に表示されるか、そしてそのマークが文字の「右側（right）」または「左側（left）」に寄るかを組み合わせたものです。