text-emphasis-position

The text-emphasis-position CSS property describes where emphasis marks are drawn.

If right or left is omitted, it defaults to right.

Syntax

CSS

text-emphasis-position: value;

JS

object.style.textEmphasisPosition = "value";

Values

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

over

Draw marks over the text in horizontal typographic modes.

under

Draw marks under the text in horizontal typographic modes.

right

Draw marks to the right of the text in vertical typographic modes.

left

Draw marks to the left of the text in vertical typographic modes.

Initial

over right

Examples

1 · over

2 · under

3 · right

4 · left

5 · JS · Inline

6 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        em
        {
            font-size: 32px;
            text-emphasis-style: circle;
        }
        em:nth-of-type(2)
        {
            writing-mode: vertical-lr;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>over</button>
    <button>under</button>
    <button value="over right">right</button>
    <button value="over left">left</button><br>
    <em>text-emphasis-position</em>
    <em>text-emphasis-position</em>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("em");
            for(let myelement of myelements)
            {
                myelement.style.textEmphasisPosition = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

Links

text-emphasis-color

text-emphasis-style

Properties

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

External

World Wide Web Consortium (W3C)

Home