math-depth

Die math-depth Eigenschaft beschreibt eine Vorstellung von Tiefe für jedes Element einer mathematischen Formel, in Bezug auf das oberste Container-Element dieser Formel. Dies wird verwendet, um den berechneten Wert der Schriftgröße von Elementen zu skalieren, wenn font-size: math angewendet wird.

Note: font-size: math ist der Standard für <math>-Elemente im MathML Core User Agent Stylesheet, daher ist es nicht notwendig, es explizit anzugeben.

Syntax

css
/* 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;

Werte

auto-add

Wird auf die vererbte math-depth plus 1 gesetzt, wenn vererbter math-style compact ist.

add(<integer>)

Wird auf die vererbte math-depth plus dem angegebenen Integer gesetzt.

<integer>

Wird auf den angegebenen Integer gesetzt.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

Beispiele

Eine mathematische Tiefe angeben

Das folgende Beispiel zeigt die Wirkung der Änderung der math-depth-Eigenschaft auf die Schriftgröße von Unterformeln. Die Zahlen in jeder Unterformel geben die math-depth und den angewendeten Skalierungsfaktor an.

Das erste <mtext>-Element wird als Referenz für andere Unterformeln verwendet und hat keine spezifischen Stile angewendet. Die zweite und dritte Unterformel haben math-depth auf auto-add gesetzt und zeigen den Effekt der Skalierung in Abhängigkeit vom math-style.

Die letzten zwei Unterformeln zeigen die Wirkung, math-depth auf einen spezifischen Wert zu setzen.

HTML

html
<p style="font-size: 3rem; margin: 1rem 0">
  <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>

Ergebnis

Spezifikationen

Specification
MathML Core
# the-math-script-level-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
math-depth

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch