Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS text-emphasis-position Property

Posted in CSS Tutorial
Updated on Jul 18, 2024
By Mari Selvan
👁️ 10 - Views
⏳ 4 mins
💬 1 Comment
CSS text-emphasis-position Property

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
Copy To Clipboard
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

ValueDescription
overPlaces the emphasis marks above the text.
underPlaces the emphasis marks below the text.
rightPlaces the emphasis marks to the right of the text (default for horizontal writing modes).
leftPlaces 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy