text-emphasis-style

Overview

The text-emphasis-style property specifies the shape and style of the emphasis marks applied to text characters. It's part of the text-emphasis shorthand property, alongside text-emphasis-color. You can independently adjust text-emphasis-style or reset it by using the shorthand.

Examples and Usage

The following examples illustrate a range of text-emphasis-style values. We'll apply a variety of emphasis styles to several sentences, each one emphasizing text with a distinct style.

HTML Structure

<p class="filled">Filled Style</p>

<p class="open">Open Style</p>

<p class="dot">Dot Style</p>

<p class="circle">Circle Style</p>

<p class="double-circle">Double Circle Style</p>

<p class="triangle">Triangle Style</p>

<p class="sesame">Sesame Style</p>

<p class="string">String Style</p>

CSS Styling

.filled {
/* Filled circle emphasis marks are applied. */
  text-emphasis-style: filled; 
}

.open {
/* Open circle emphasis marks are applied. */
  text-emphasis-style: open; 
}

.dot {
/* Small dot emphasis marks are applied. */
  text-emphasis-style: dot; 
}

.circle {
/* Large circle emphasis marks are applied. */
  text-emphasis-style: circle; 
}

.double-circle {
/* Double circle emphasis marks are applied. */
  text-emphasis-style: double-circle; 
}

.triangle {
/* Triangle emphasis marks are applied. */
  text-emphasis-style: triangle; 
}

.sesame {
/* Sesame-shaped emphasis marks are applied. */
  text-emphasis-style: sesame; 
}

.string {
/* A custom string ("*") is applied as an emphasis mark. */
  text-emphasis-style: "*"; 
}

The example above displays each paragraph (<p> element) with a unique emphasis style, mirroring their class names with the corresponding text-emphasis-style value in the CSS. We've also included a custom string as an emphasis mark, shown in the .string class. While these examples make use of straightforward English text, text-emphasis-style is predominantly used for emphasizing text in East Asian languages.

Values

The text-emphasis-style property accepts the following values:

Associated Properties

• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-decoration (with related properties from the CSS Text Decoration Module)

Tips and Tricks

• text-emphasis-style is beneficial in East Asian languages where text emphasis marks are commonly used. It can also be applied to emphasize text in English and other languages, though less commonly.

• When using a custom string as an emphasis mark via the string value, ensure it's a single character. Multi-character strings won't display as intended.

• Certain emphasis styles could cause overflow if there isn't enough line spacing (leading). For instance, larger styles like double-circle might require more space.

• For better browser compatibility, consider using vendor prefixes (-webkit-) for older versions of Chrome, Edge, and Opera. This practice ensures consistent rendering of your styles across various browsers.

Browser Compatibility

Older versions of Chrome (25-98), Edge (79-98), and Opera (15-84), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-emphasis-style

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-emphasis-style