Свойство CSS `math-depth`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с января 2023 года.

Свойство math-depth описывает понятие глубины для каждого элемента математической формулы относительно контейнера верхнего уровня этой формулы. Это свойство используется для масштабирования вычисленного значения размера шрифта элементов при применении font-size: math.

Примечание: font-size: math используется по умолчанию для элементов <math> в таблице стилей пользовательского агента MathML Core, поэтому указывать его явно не нужно.

Синтаксис

/* Keyword values */
math-depth: auto-add;

/* Relative values */
math-depth: add(2);
math-depth: add(-2);

/* Absolute value */
math-depth: 4;

/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

Значения

auto-add: Устанавливается равным унаследованному значению math-depth плюс 1, если унаследованное значение math-style равно compact.
add(<integer>): Устанавливается равным унаследованному значению math-depth плюс указанное целое число.
<integer>: Устанавливается равным указанному целому числу.

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

Исходное значение	0
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	Не анимируется

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

math-depth = 
  auto-add |
  add(<integer>) |
  <integer>

<integer> = 
  <number-token>

Примеры

Задание глубины математической формулы

В следующем примере показано, как изменение свойства math-depth влияет на размер шрифта подформул. Числа в каждой подформуле указывают math-depth и применённый коэффициент масштабирования.

Первый элемент <mtext> используется как эталон для остальных подформул; к нему не применяются специальные стили. Для второй и третьей подформул задано math-depth со значением auto-add, что показывает влияние масштабирования в зависимости от math-style.

В двух последних подформулах показан эффект задания конкретного значения для math-depth.

HTML

<p>
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>

p {
  font-size: 3rem;
  margin: 1rem 0;
}

Результат

Спецификации

Спецификация
MathML Core # the-math-script-level-property

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`math-depth`	109	109	117	95	26.4	109	117	74	26.4	21.0	109	26.4
`auto-add`	109	109	117	95	26.4	109	117	74	26.4	21.0	109	26.4

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/math-depth