CSS text-emphasis-position Guide & Examples

Introduction

The text-emphasis-position CSS property lets you specify where emphasis marks, like dots or lines, are drawn relative to the text. This is particularly useful for languages like Japanese, Chinese, and Mongolian. If there isn’t enough space for these marks, the line height of the text will increase to make room for them.

Specification

The text-emphasis-position property is defined in the CSS Text Decoration Module Level 3. This module extends the capabilities of CSS to handle text decorations, including emphasis marks. For more detailed information, you can refer to the official specification:

• CSS Text Decoration Module Level 3 - text-emphasis-position property

Syntax

The text-emphasis-position property can be set using various keywords to specify the position of emphasis marks relative to the text.

text-emphasis-position: over | under | right | left;

Keywords

• over: Positions the emphasis marks above the text in horizontal writing mode.
• under: Positions the emphasis marks below the text in horizontal writing mode.
• right: Positions the emphasis marks to the right of the text in vertical writing mode.
• left: Positions the emphasis marks to the left of the text in vertical writing mode.

Examples

/* Initial value */
text-emphasis-position: over right;

/* Keywords value */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* Global values */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

Values

The text-emphasis-position property accepts several keyword values that determine where the emphasis marks will be drawn relative to the text.

Keywords

• over: Positions the emphasis marks above the text in horizontal writing mode.
• under: Positions the emphasis marks below the text in horizontal writing mode.
• right: Positions the emphasis marks to the right of the text in vertical writing mode.
• left: Positions the emphasis marks to the left of the text in vertical writing mode.

Combined Values

You can also combine these values to specify the position of emphasis marks for both horizontal and vertical writing modes simultaneously.

• over right: Positions the emphasis marks above the text in horizontal writing mode and to the right of the text in vertical writing mode.
• over left: Positions the emphasis marks above the text in horizontal writing mode and to the left of the text in vertical writing mode.
• under right: Positions the emphasis marks below the text in horizontal writing mode and to the right of the text in vertical writing mode.
• under left: Positions the emphasis marks below the text in horizontal writing mode and to the left of the text in vertical writing mode.
• left over: Positions the emphasis marks to the left of the text in vertical writing mode and above the text in horizontal writing mode.
• right under: Positions the emphasis marks to the right of the text in vertical writing mode and below the text in horizontal writing mode.
• left under: Positions the emphasis marks to the left of the text in vertical writing mode and below the text in horizontal writing mode.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value (over right).
• revert: Reverts the property to the value specified by the user-agent stylesheet.
• revert-layer: Reverts the property to the value specified by the user-agent stylesheet for the cascade layer.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Description

The text-emphasis-position property is a powerful CSS feature that allows you to specify the position of emphasis marks relative to the text. These marks are commonly used to highlight or draw attention to specific parts of the text, particularly in languages like Japanese, Chinese, and Mongolian. The positioning of these marks can vary depending on the language and writing mode (horizontal or vertical).

Preferred Positions by Language

The preferred position of emphasis marks can differ based on the language:

• Japanese: In Japanese, the preferred position is over right. This means that emphasis marks are drawn above the text in horizontal writing mode and to the right of the text in vertical writing mode.
• Chinese: In Chinese, the preferred position is under right. This means that emphasis marks are drawn below the text in horizontal writing mode and to the right of the text in vertical writing mode.
• Mongolian: Similar to Japanese, the preferred position in Mongolian is over right.

Table Summary

Important Note

It’s important to note that the text-emphasis-position property cannot be set or reset using the text-emphasis shorthand property. This means you need to specify the text-emphasis-position property separately to control the position of emphasis marks.

Formal Definition

The text-emphasis-position property in CSS defines the position of emphasis marks relative to the text. This property is particularly useful for languages that use emphasis marks, such as Japanese, Chinese, and Mongolian.

Initial Value

• Initial Value: over right

Applies To

• Applies To: All elements

Inherited

• Inherited: Yes

Computed Value

• Computed Value: As specified

Animation Type

• Animation Type: Discrete

Formal Syntax

The formal syntax of the text-emphasis-position property defines the structure and valid values for specifying the position of emphasis marks.

text-emphasis-position =
  [ over | under ] && [ right | left ] ?

Explanation

• [ over | under ]: This part of the syntax specifies the horizontal position of the emphasis marks. You can choose between over (above the text) and under (below the text).
• &&: This operator indicates that both horizontal and vertical positions must be specified.
• [ right | left ]: This part of the syntax specifies the vertical position of the emphasis marks. You can choose between right (to the right of the text) and left (to the left of the text).
• ?: This operator indicates that the vertical position is optional but can be combined with the horizontal position.

Examples

/* Positions emphasis marks above and to the right of the text */
text-emphasis-position: over right;

/* Positions emphasis marks below and to the left of the text */
text-emphasis-position: under left;

/* Positions emphasis marks above and to the left of the text */
text-emphasis-position: over left;

/* Positions emphasis marks below and to the right of the text */
text-emphasis-position: under right;

Examples

Example 1: Horizontal Text with Over and Under Emphasis

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Emphasis Position Example</title>
    <style>
        p {
            width: 30rem;
            font-size: 1.5rem;
            padding: 1rem;
        }
        .first {
            text-emphasis: triangle;
            text-emphasis-position: over;
            background-color: rgba(95, 158, 160, 0.602);
        }
        .second {
            text-emphasis: circle;
            text-emphasis-position: under;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>
<body>
    <h1 style="color:green;">Text Emphasis Position Example</h1>
    <div>
        <h3>text-emphasis-position: over;</h3>
        <p class="first">A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p>
        <h3>text-emphasis-position: under;</h3>
        <p class="second">We provide a variety of services for you to learn, thrive and also have fun!</p>
    </div>
</body>
</html>

Example 2: Vertical Text with Left and Right Emphasis

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Text Emphasis Position Example</title>
    <style>
        p {
            height: 25rem;
            font-size: 1.5rem;
            padding: 1rem;
        }
        div {
            display: flex;
        }
        .first {
            writing-mode: vertical-rl;
            text-emphasis: triangle;
            text-emphasis-position: left;
            background-color: rgba(95, 158, 160, 0.602);
        }
        .second {
            writing-mode: vertical-rl;
            text-emphasis: circle;
            text-emphasis-position: right;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>
<body>
    <h1 style="color:green;">Vertical Text Emphasis Position Example</h1>
    <div>
        <h3>text-emphasis-position: left;</h3>
        <p class="first">A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p>
        <h3>text-emphasis-position: right;</h3>
        <p class="second">We provide a variety of services for you to learn, thrive and also have fun!</p>
    </div>
</body>
</html>

Preferring Ruby Over Emphasis Marks or Vice Versa

Some editors prefer to hide emphasis marks when they conflict with ruby text. In HTML, this can be achieved using the following CSS:

ruby {
  text-emphasis: none;
}

On the other hand, some editors prefer to hide ruby text when it conflicts with emphasis marks. This can be done with the following CSS:

em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}

em rt {
  display: none; /* Hide ruby inside <em> elements */
}

Browser Compatibility

The text-emphasis-position property is supported by the following browsers:

• Chrome 99 and above
• Edge 99 and above
• Firefox 46 and above
• Opera 15 and above
• Safari 7 and above

See Also

For further exploration and related properties, you might want to check out the following CSS properties:

• [text-emphasis-style]WebsiteUrl: Defines the style of the emphasis marks.
• [text-emphasis-color]WebsiteUrl: Sets the color of the emphasis marks.
• [text-emphasis]WebsiteUrl: A shorthand property that combines text-emphasis-style and text-emphasis-color.

These properties work together with text-emphasis-position to provide comprehensive control over text emphasis, allowing you to create visually appealing and culturally appropriate text emphasis in your web projects.