CSS テキスト強調を使用してテキストを強調するための実装コード

1. はじめに

これまで、テキストの特定の部分を強調したい場合、通常は太字にしたり明るい色を使用したりしていました。現在は、強調装飾にtext-emphasis属性を使用するという新しいオプションがあります。

text-emphasisファミリーには 4 つの CSS プロパティがあります。

テキスト強調
テキスト強調色
テキスト強調スタイル
テキスト強調位置

このうち、 text-emphasisは、2 つの CSS プロパティtext-emphasis-colorとtext-emphasis-style独立したtext-emphasis-position text-emphasis-positionプロパティは含まれないことに注意してください。

2. 詳細

1. テキスト強調色

text-emphasis-color 、初期値は現在のテキストの色です。

2. テキスト強調スタイル

text-emphasis-style構文には、主に次の 3 つのタイプがあります。

テキスト強調スタイル: なし
テキスト強調スタイル: [ 塗りつぶし | 空白 ] || [ ドット | 円 | 二重円 | 三角形 | ゴマ ]
テキスト強調スタイル: <文字列>

で：

text-emphasis-style:noneはデフォルトの宣言であり、強調装飾がないことを意味します。

text-emphasis-style:<string>任意の 1 文字を強調デコレータとして使用することを意味します。たとえば、ハート文字を使用する場合:

ベイビー、<span class="emphasis">愛してるよ</span>、<span class="emphasis">ハート</span>！

。強調 {
    -webkit-テキスト強調スタイル: '❤';
    テキスト強調スタイル: '❤';
}

効果は以下の図の通りです。対応するテキストの上にハートの文字が表示されているのがわかります（絵文字フォントが適用されているため、絵文字が表示されています）。

ここにいくつかの詳細をお知らせします:

表示される強調デコレータのフォントサイズは、メインのテキストコンテンツのフォントサイズの半分になります。たとえば、テキストのサイズが16pxの場合、上の強調文字のサイズは8pxになります。したがって、フォントサイズがそれほど大きくない場合は、アスタリスク「*」やポンド記号「#」など、複雑な形状や小さな文字領域を持つ文字は使用しないようにしてください。これらの文字は、通常の表示デバイスでは丸く縮小され、ユーザーには文字が何であるかがわからなくなってしまいます。行の高さがそれほど高くない場合は、強調デコレータによって現在の行の高さが自動的に増加されます。強調デコレータと本文の距離は、行の高さなどのプロパティを設定しても調整できません。距離の大きさは主にフォントによって決まります。

複数の文字を指定した場合、最初の文字のみが強調修飾子として使用されます。例えば：

テキスト強調スタイル: 'CSS New World';

は以下と同等です:

テキスト強調スタイル: 'C';

最後に、 text-emphasis-styleに組み込まれている装飾文字効果、 dot 、 circle 、 double-circle 、 triangle 、 sesameを見てみましょう。

各デコレータには、 filled と hollow の 2 種類の文字があり、これらはfilledとopen 2 つのキーワードによって決まります。

例えば：

/* 実線ドット */
テキスト強調: 塗りつぶされたドット;
/*白抜きドット*/
テキスト強調: 開いたドット;

組み込み文字はデフォルトで実線なので、 text-emphasis:filled dot text-emphasis:dotと同じ効果があります。

text-emphasis-style属性値がfilledまたはopenのみの場合、強調デコレータとしてdotが使用されます。例えば：

/* text-emphasis: filled dot と同等 */
テキスト強調: 塗りつぶし;
/* text-emphasis: オープンドットと同等 */
テキスト強調: オープン;

各装飾シンボルの具体的な効果については、私（張新旭）が便宜上特別に表を作成しました。詳細は以下の表をご覧ください。

各強調デコレータのフォントサイズはフォントによって大きく左右されます。実際のシナリオに応じて適切な強調デコレータを選択できます。

3. テキストの強調位置

text-emphasis-positionプロパティは、強調デコレータの位置を指定するために使用されます。デフォルトの位置はメインテキストの上です。強調デコレータがメインテキストの下になるように指定することも、テキストが垂直に配置されている場合に強調デコレータが左側にあるか右側にあるかを指定することもできます。

構文は次のとおりです。

テキスト強調位置: [ 上 | 下 ] && [ 右 | 左 ]

使用方法:

テキスト強調位置: 左上;
テキスト強調位置: 右下;
テキスト強調位置: 左下;

テキスト強調位置: 左上;
テキスト強調位置: 右下;
テキスト強調位置: 左下;

text-emphasis-positionの初期値はover rightです。 right配置は、テキストが垂直に配置されているときに表示されます。たとえば、 writing-mode:vertical-rlが設定されている場合、下の図に示すように、右側に強調デコレータが表示されます。

text-emphasis-positionプロパティは、中国語のシナリオでは今でも非常によく使用されています。これは、中国語では強調を示す文字を下部に設定する傾向があるためです。これは、日本語や韓国語などの東アジアの言語とは異なります。

したがって、中国語のコンテンツを強調するには、強調デコレータを設定することに加えて、強調デコレータの位置を下部に設定する必要があります。次に例を示します。

.中国語強調 {
    -webkit-テキスト強調: ドット;
    テキスト強調: ドット;
    -webkit-text-emphasis-position: 右下;
    テキスト強調位置: 右下;
}

ここで少し詳細を説明します。Chrome ブラウザでは、 text-emphasis-position属性は垂直位置の値のみを設定でき、水平位置の値は設定できません。たとえば、次の構文も Chrome ブラウザで認識されます。

-webkit-テキスト強調位置: 下;

ただし、Chrome ブラウザのこのアプローチは実際には間違っており、仕様の説明に準拠していないことに注意してください。仕様ではtext-emphasis-position属性値に水平位置と垂直位置の両方を含める必要があります。そのため、両方の値を同時に設定することをお勧めします。

-webkit-text-emphasis-position: 右下;

4. テキストの強調

text-emphasisは、2 つの CSS プロパティtext-emphasis-colorとtext-emphasis-styleの略称です。使用方法は次のとおりです。

テキスト強調: 円 deepskyblue;

構文とセマンティクスの観点から見ると、 text-emphasisプロパティは比較的単純であり、詳細を隠すことはありません。

言及する価値がある唯一のことは、 text-emphasis継承された属性であるということです。つまり、祖先要素が強調効果を設定すると、子要素もそれを適用するということです。これは継承されないtext-decoration text-decorationとはまったく異なります。

もう 1 つの小さな違いは、 text-emphasisプロパティはテキストが占める高さに影響しますが、 text-decorationプロパティは影響しないことです。

3. まとめ

私が経験したプロジェクトをレビューしたところ、JS API や技術文書で強調する必要のあるテキストや、会社の製品の外部ヘルプドキュメントなどで、 text-emphasis属性が使用されている箇所が見つかりました。しかし、通常のコンテンツ表示においては、そのような需要はないようです。

つまり、CSS のtext-emphasisプロパティは、テキストコンテンツを強調するための新しいオプションを提供します。

最後に、 text-emphasis属性のブラウザ互換性を次のように示します。

要約する

CSS text-emphasis を使ってテキストを強調する方法についての記事はこれで終わりです。CSS text-emphasis を使ったテキスト装飾に関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL の group by と having の詳細な説明

>>: HTML要素によるFlashブロックの詳細な例