CSS text-emphasis-position Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-emphasis-position property in CSS allows web developers to specify the position of emphasis marks relative to the text. Emphasis marks are used in East Asian typography to highlight or emphasize characters.

This property is useful for ensuring that the emphasis marks are positioned correctly in relation to the text, enhancing readability and maintaining typographic integrity.

💡 Syntax

The syntax for the text-emphasis-position property is straightforward. It can be applied to any element that supports it, and you can specify the position using predefined keywords.

Syntax

Copied

element {
  text-emphasis-position: position;
}

Here, position can be a combination of the following keywords: over, under, right, and left.

🎛️ Default Value

The default value of the text-emphasis-position property is over right. This means that the emphasis marks are placed above the text and to the right of the characters.

🏠 Property Values

Value	Description
over	Places the emphasis marks above the text.
under	Places the emphasis marks below the text.
right	Places the emphasis marks to the right of the text (default for horizontal writing modes).
left	Places the emphasis marks to the left of the text (default for vertical writing modes).

📄 Example

In this example, we'll position the emphasis marks below and to the left of the text.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-emphasis-position Example</title>
  <style>
    p {
      text-emphasis-style: circle;
      text-emphasis-position: under left;
    }
  </style>
</head>
<body>
  <h1>Text Emphasis Position Example</h1>
  <p>This is an example text with emphasis marks positioned below and to the left.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-emphasis-position property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-emphasis-position property is a valuable tool for web developers who need to work with East Asian typography or want to emphasize specific parts of their text.

By specifying the position of emphasis marks, you can enhance the readability and visual appeal of your content. Experiment with different positions to see how this property can improve the presentation of your text.