text-emphasis-position

Свойство принимает одно или два значения:

• Если указано только одно значение, оно может быть auto, over, или under. При использовании только over или under, значение right предполагается по умолчанию.
• Если указаны два значения, они должны включать одно из over или under и одно из right или left. Порядок значений не имеет значения.

Значения включают:

auto

Отображает знаки над текстом в горизонтальном режиме и справа от текста в вертикальном режиме.

over

Отображает знаки над текстом в горизонтальном режиме.

under

Отображает знаки под текстом в горизонтальном режиме.

right

Отображает знаки справа от текста в вертикальном режиме.

left

Отображает знаки слева от текста в вертикальном режиме.

Предпочтительное положение знаков ударения зависит от языка. Например, в японском языке предпочтительное положение — over right. В китайском языке — under right. Ниже приведена таблица, обобщающая предпочтительные положения знаков ударения для китайского, монгольского и японского языков:

Предпочтительное положение знаков ударения и позиции ruby

Язык	Предпочтительное положение		Иллюстрация
	Горизонтальное	Вертикальное
Японский	над	справа
Корейский
Монгольский
Китайский	под	справа

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

Используйте раскрывающийся список, чтобы изменить положение знаков ударения. Это изменит класс элемента <section>, что, в свою очередь, обновит положение знаков ударения в тексте.

HTML

<section id="setting" class="auto">
  <p class="horizontal" lang="zh">你好世界</p>
  <!-- Hello World in Chinese -->
  <p class="vertical" lang="ja">世界、こんにちは。</p>
  <!-- Hello World in Japanese -->
</section>

CSS

section p {
  text-emphasis: filled circle tomato;
  text-emphasis-position: auto;
}
.over-right p,
.preferred p [lang="ja"] {
  text-emphasis-position: over right;
}
.over-left p {
  text-emphasis-position: over left;
}
.under-right p,
.preferred p [lang="zh"] {
  text-emphasis-position: under right;
}
.under-left p {
  text-emphasis-position: under left;
}
.preferred p [lang="ja"] {
}

Результат

Используйте раскрывающийся список «Положение ударения», чтобы выбрать расположение знаков ударения. Вариант preferred в раскрывающемся списке использует предпочтительные позиции, как описано в разделе Описание.

Некоторые редакторы предпочитают скрывать знаки ударения, когда они конфликтуют с ruby. В HTML это можно сделать с помощью следующего правила стиля:

ruby {
  text-emphasis: none;
}

Другие редакторы предпочитают скрывать ruby, когда они конфликтуют со знаками ударения. В HTML это можно сделать следующим образом:

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

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

• text-underline-position
• text-emphasis-style
• text-emphasis-color
• text-emphasis сокращенное свойство
• writing-mode