dominant-baseline
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das dominant-baseline
-Attribut gibt die dominante Grundlinie an, welche die Grundlinie ist, die verwendet wird, um den Text und die Inline-Inhalte der Box auszurichten. Es zeigt außerdem die Standard-Grundlinie jeder Box an, die in der Grundlinienausrichtung im Kontextrahmen der Box beteiligt ist.
Es wird verwendet, um eine skalierte Grundlinientabelle zu bestimmen oder neu zu bestimmen. Eine skalierte Grundlinientabelle ist ein zusammengesetzter Wert mit drei Komponenten:
- ein Grundlinienkennzeichen für die dominante Grundlinie,
- eine Grundlinientabelle und
- eine Grundlinientabellenschriftgröße.
Einige Werte der Eigenschaft bestimmen alle drei Werte neu. Andere legen nur die Schriftgröße der Grundlinientabelle neu fest. Wenn der Anfangswert auto
ein unerwünschtes Ergebnis liefert, kann dieses Attribut verwendet werden, um die gewünschte skalierte Grundlinientabelle explizit festzulegen.
Wenn in der Nominalschrift keine Grundlinientabelle vorhanden ist oder wenn die Grundlinientabelle keinen Eintrag für die gewünschte Grundlinie enthält, kann der Browser Heuristiken verwenden, um die Position der gewünschten Grundlinie zu bestimmen.
Hinweis:
Als Präsentationsattribut hat dominant-baseline
auch ein entsprechendes CSS-Attribut: dominant-baseline
. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Beispiel
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />
<text dominant-baseline="auto" x="30" y="20">Auto</text>
<text dominant-baseline="middle" x="30" y="50">Middle</text>
<text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>
Hinweise zur Verwendung
Wert |
auto
|
text-bottom | alphabetic |
ideographic | middle | central |
mathematical | hanging | text-top
|
---|---|
Standardwert | auto |
Animierbar | diskret |
auto
-
Wenn diese Eigenschaft auf einem
<text>
-Element auftritt, hängt der berechnete Wert vom Wert deswriting-mode
-Attributs ab.Wenn der
writing-mode
horizontal ist, hat die Komponente der dominanten Grundlinie den Wertalphabetic
. Andernfalls, wenn derwriting-mode
vertikal ist, hat die Komponente der dominanten Grundlinie den Wertcentral
.Wenn diese Eigenschaft auf einem
<tspan>
,<tref>
oder<textPath>
-Element auftritt, bleiben die dominante Grundlinie und die Komponenten der Grundlinientabelle gleich wie die des übergeordneten Textelements.Wenn der berechnete
baseline-shift
-Wert die Grundlinie tatsächlich verschiebt, wird die Schriftgrößenkomponente der Grundlinientabelle auf den Wert desfont-size
-Attributs des Elements gesetzt, auf dem dasdominant-baseline
-Attribut vorkommt. Andernfalls bleibt die Schriftgrößenkomponente der Grundlinientabelle dieselbe wie die des Elements.Wenn kein übergeordnetes Textelement vorhanden ist, wird der Wert der skalierten Grundlinientabelle wie oben für
<text>
-Elemente konstruiert. use-script
Veraltet-
Die dominante Grundlinie und die Komponenten der Grundlinientabelle werden durch die Bestimmung des vorherrschenden Skripts der Zeichendateninhalte festgelegt. Der
writing-mode
, ob horizontal oder vertikal, wird verwendet, um die entsprechenden Grundlinientabellen auszuwählen, und die dominante Grundlinie wird verwendet, um die Grundlinientabelle auszuwählen, die dieser Grundlinie entspricht. Die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs des Elements festgelegt, auf dem dasdominant-baseline
-Attribut vorkommt. no-change
Veraltet-
Die dominante Grundlinie, die Grundlinientabelle und die Schriftgrößenkomponente der Grundlinientabelle bleiben mit der des übergeordneten Textelements identisch.
reset-size
Veraltet-
Die dominante Grundlinie und die Grundlinientabelle bleiben gleich, aber die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert des
font-size
-Attributs dieses Elements geändert. Dadurch wird die Grundlinientabelle für die aktuellefont-size
neu skaliert. ideographic
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
ideographic
gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung derideographic
-Grundlinientabelle aus der Schriftart konstruiert, und die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. alphabetic
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
alphabetic
gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung deralphabetic
-Grundlinientabelle aus der Schriftart konstruiert, und die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. hanging
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
hanging
gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung derhanging
-Grundlinientabelle aus der Schriftart konstruiert, und die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. mathematical
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
mathematical
gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung dermathematical
-Grundlinientabelle aus der Schriftart konstruiert, und die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. central
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
central
gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle der Schriftart konstruiert. Diese Schriftgrundlinientabelle wird unter Verwendung der folgenden Prioritätsreihenfolge der Grundlinientabellennamen ausgewählt:ideographic
,alphabetic
,hanging
,mathematical
. Die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. middle
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
middle
gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle der Schriftart konstruiert. Diese Schriftgrundlinientabelle wird unter Verwendung der folgenden Prioritätsreihenfolge der Grundlinientabellennamen ausgewählt:alphabetic
,ideographic
,hanging
,mathematical
. Die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. text-after-edge
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
text-after-edge
gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle der Schriftart konstruiert. Die Wahl der Schriftgrundlinientabelle aus den Grundlinientabellen in der Schrift ist browserabhängig. Die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. text-before-edge
-
Das Grundlinienkennzeichen für die dominante Grundlinie wird auf
text-before-edge
gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle der Schriftart konstruiert. Die Wahl der Grundlinientabelle aus den Schriftgrundlinientabellen ist browserabhängig. Die Schriftgrößenkomponente der Grundlinientabelle wird auf den Wert desfont-size
-Attributs dieses Elements geändert. text-top
-
Dieser Wert verwendet die Oberseite der Em-Box als Grundlinie.
SVG
<svg
width="400"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<!-- Materialization of anchors -->
<path
d="M60,20 L60,270
M30,20 L400,20
M30,70 L400,70
M30,120 L400,120
M30,170 L400,170
M30,220 L400,220
M30,270 L400,270"
stroke="grey" />
<!-- Anchors in action -->
<text dominant-baseline="auto" x="70" y="20">auto</text>
<text dominant-baseline="middle" x="70" y="70">middle</text>
<text dominant-baseline="hanging" x="70" y="170">hanging</text>
<text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
<text dominant-baseline="text-top" x="70" y="270">text-top</text>
<!-- Materialization of anchors -->
<circle cx="60" cy="20" r="3" fill="red" />
<circle cx="60" cy="70" r="3" fill="red" />
<circle cx="60" cy="120" r="3" fill="red" />
<circle cx="60" cy="170" r="3" fill="red" />
<circle cx="60" cy="220" r="3" fill="red" />
<circle cx="60" cy="270" r="3" fill="red" />
<style>
<![CDATA[
text {
font: bold 30px Verdana, Helvetica, Arial, sans-serif;
}
]]>
</style>
</svg>
Ergebnis
Spezifikationen
Specification |
---|
CSS Inline Layout Module Level 3 # dominant-baseline-property |
Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
dominant-baseline |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS
dominant-baseline
-Eigenschaft