Nov. 21st,2021
プロパティについて
概要
| 初期値 | “text-emphasis-style: none;” |
| 適用対象 | すべての要素 |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | “none”、圏点の形状と塗りつぶすかどうかを表すキーワードの組、文字列のいずれか |
| アニメーション | 離散 |
“text-emphasis-style”プロパティはテキストを強調する圏点や傍点の見た目を指定するプロパティです。
圏点は圏点を付加するテキストと同じフォントの設定が適用されますが、文字の大きさの50%の大きさで描画され、使用されているフォントにルビ用の変化形がある場合はその変化形を使用します。フォントに指定されたグリフが含まれていない場合にはユーザー・エージェントはそれ以外のより適切なフォントを使用したり、圏点を合成したりすることがあります。
サンプルコード
span { text-emphasis-style: filled circle;}
値
| 値 | 説明 |
|---|---|
| none | 圏点を付加しません |
| filled | 圏点の中を塗りつぶします |
| open | 圏点の中を塗りつぶしません |
| dot | 小さな丸を圏点とします (“filled”の場合は“•(U+2022)”、“open”の場合は“◦(U+25E6)”を圏点とします。) |
| circle | 大きな丸を圏点とします (“filled”の場合は“●(U+25CF)”、“open”の場合は“○(U+25CB)”を圏点とします。) |
| double-circle | 蛇の目(二重丸)を圏点とします (“filled”の場合は“◉(U+25C9)”、“open”の場合は“◎(U+25CE)”を圏点とします。) |
| triangle | 三角形を圏点とします (“filled”の場合は“▲(U+25B2)”、“open”の場合は“△(U+25B3)”を圏点とします。) |
| dot | ゴマを圏点とします (“filled”の場合は“﹅(U+FE45)”、“open”の場合は“﹆(U+FE46)”を圏点とします。) |
| <string> | 与えられた文字を圏点として使用します (1文字よりも多い“<string>”値は指定するべきではありません。ユーザー・エージェントは書記素クラスタ2個以上からなる“<string>”値を無視したり、切り捨てたりすることができます。) |
| 共通キーワード |
あらかじめ定義された圏点の形状を指定するキーワードを使用する場合は“filled”と“open”のどちらかとともにホワイトスペースで区切って記述します。
“none”と“<string>”値は単独で記述します。
形状を指定するキーワードだけが記述され、“filled”と“open”のいずれも記述されていない場合には“filled”が指定されたものとみなされます。
“filled”と“open”のいずれかだけが記述され、形状を指定するキーワードが記述されていない場合には、使用値は水平書字モード(横書き)では“circle”、垂直書字モード(縦書き)では“sesame”とみなされます。
圏点は垂直書字モードの場合はテキストの横に描画されますが、向きは水平書字モードの場合と同じです。
使用例
圏点の中を塗りつぶす
<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span {
text-emphasis-style: filled dot;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: filled circle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: filled double-circle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: filled triangle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: filled sesame;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
圏点の中を塗りつぶさない
<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span {
text-emphasis-style: open dot;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: open circle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: open double-circle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: open triangle;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-emphasis-style: open sesame;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
