Свойство CSS `text-emphasis-position`

Свойство text-emphasis-position CSS задаёт положение знаков акцентирования. Как и в случае с текстом, отображаемым элементом HTML <ruby>, если для знаков акцентирования недостаточно места, высота строки увеличивается.

Попробуйте

text-emphasis-position: auto;

text-emphasis-position: over right;

text-emphasis-position: under right;

text-emphasis-position: auto;
writing-mode: vertical-rl;

text-emphasis-position: over left;
writing-mode: vertical-rl;

text-emphasis-position: over right;
writing-mode: vertical-rl;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

Синтаксис

/* Initial value */
text-emphasis-position: auto;

/* Keyword values */
text-emphasis-position: over;
text-emphasis-position: under;

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

text-emphasis-position: left over;
text-emphasis-position: right 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;

Значения

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

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

Допустимые значения:

auto

Размещает знаки над текстом при горизонтальном письме и справа от текста при вертикальном письме.

over

Размещает знаки над текстом при горизонтальном письме.

under

Размещает знаки под текстом при горизонтальном письме.

right

Размещает знаки справа от текста при вертикальном письме.

left

Размещает знаки слева от текста при вертикальном письме.

Описание

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

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

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

Формальное определение

Формальный синтаксис

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

Примеры

Добавление положения знаков акцентирования

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

HTML

<p class="unsupported">
  The <code>auto</code> value is not supported in your browser.
</p>
<label for="position">Emphasis position:</label>
<select id="position">
  <option value="auto">auto</option>
  <option value="over-right">over right</option>
  <option value="over-left">over left</option>
  <option value="under-right">under right</option>
  <option value="under-left">under left</option>
  <option value="preferred">preferred</option>
</select>

<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

.unsupported {
  color: red;
}
@supports (text-emphasis-position: auto) {
  .unsupported {
    display: none;
  }
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}
section {
  display: flex;
  justify-content: space-around;
}

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"] {
}

const position = document.querySelector("#position");
const setting = document.querySelector("#setting");
const updateClass = () => {
  const currentClass = setting.classList;
  setting.classList.replace(currentClass, position.value);
};
position.addEventListener("change", updateClass);

Результат

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

Приоритет руби перед знаками акцентирования

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

ruby {
  text-emphasis: none;
}

Приоритет знаков акцентирования перед руби

Некоторые другие редакторы предпочитают скрывать руби, если оно конфликтует со знаками акцентирования. В 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