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 legt die dominante Basislinie fest, die verwendet wird, um den Text und die Inhalte auf Inline-Niveau der Box auszurichten. Es zeigt auch die Standardausrichtungs-Basislinie aller Boxen an, die an der Basisausrichtung im Ausrichtungskontext der Box teilnehmen.
Es wird verwendet, um eine skalierte Basislinientabelle zu bestimmen oder neu zu bestimmen. Eine skalierte Basislinientabelle ist ein zusammengesetzter Wert mit drei Komponenten:
- einem Basislinienidentifikator für die dominante Basislinie,
- einer Basistabelle und
- einer Schriftgröße der Basistabelle.
Einige Werte der Eigenschaft bestimmen alle drei Werte neu. Andere stellen nur die Schriftgröße der Basistabelle wieder her. Wenn der Anfangswert auto
ein unerwünschtes Ergebnis liefern würde, kann diese Eigenschaft verwendet werden, um die gewünschte skalierte Basislinientabelle ausdrücklich festzulegen.
Wenn es in der nominalen Schriftart keine Basistabelle gibt oder wenn die Basistabelle keinen Eintrag für die gewünschte Basislinie hat, kann der Browser Heuristiken verwenden, um die Position der gewünschten Basislinie zu bestimmen.
Hinweis: Als Präsentationsattribut kann dominant-baseline
als CSS-Eigenschaft verwendet werden. Siehe dominant-baseline
für mehr.
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>
Anwendungsnotizen
Wert |
auto
|
text-bottom | alphabetic |
ideographic | middle | central |
mathematical | hanging | text-top
|
---|---|
Standardwert | auto |
Animierbar | diskret |
auto
-
Wenn diese Eigenschaft auf einem
<text>
-Element vorkommt, hängt der berechnete Wert von dem Wert deswriting-mode
-Attributs ab.Wenn der
writing-mode
horizontal ist, ist der Wert der dominanten Basislinienkomponentealphabetic
. Andernfalls, wenn derwriting-mode
vertikal ist, ist der Wert der dominanten Basislinienkomponentecentral
.Wenn diese Eigenschaft auf einem
<tspan>
,<tref>
oder<textPath>
-Element vorkommt, bleiben die dominante Basislinie und die Basistabellenkomponenten dieselben wie die des übergeordneten Textelement-Inhalts.Wenn der berechnete
baseline-shift
-Wert die Basislinie tatsächlich verschiebt, wird die Schriftgrößenkomponente der Basistabelle auf den Wert desfont-size
-Attributs für das Element gesetzt, auf dem dasdominant-baseline
-Attribut vorkommt. Andernfalls bleibt die Schriftgrößenkomponente der Basistabelle dieselbe wie die des Elements.Wenn es kein übergeordnetes Textelement gibt, wird der skalierte Basislinientabellenwert wie oben für
<text>
-Elemente konstruiert. use-script
Veraltet-
Die dominanten Basislinien- und Basistabellenkomponenten werden durch Bestimmen des vorherrschenden Skripts des Zeichendateninhalts festgelegt. Der
writing-mode
, ob horizontal oder vertikal, wird verwendet, um den geeigneten Satz von Basistabellen auszuwählen, und die dominante Basislinie wird verwendet, um die Basistabelle auszuwählen, die dieser Basislinie entspricht. Die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf dem Element gesetzt, auf dem dasdominant-baseline
-Attribut vorkommt. no-change
Veraltet-
Die dominanten Basislinien-, Basistabellen- und Schriftgrößenkomponenten der Basistabelle bleiben dieselben wie die des übergeordneten Textelement-Inhalts.
reset-size
Veraltet-
Die dominanten Basislinien- und Basistabellen bleiben dieselben, aber die Schriftgrößenkomponente der Basistabelle wird auf den Wert des
font-size
-Attributs auf diesem Element geändert. Dies skaliert die Basistabelle für die aktuellefont-size
neu. ideographic
-
Der Basislinienidentifier für die dominante Basislinie wird auf
ideographic
gesetzt, die abgeleitete Basistabelle wird unter Verwendung derideographic
-Basistabelle in der Schrift konstruiert, und die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. alphabetic
-
Der Basislinienidentifier für die dominante Basislinie wird auf
alphabetic
gesetzt, die abgeleitete Basistabelle wird unter Verwendung deralphabetic
-Basistabelle in der Schrift konstruiert, und die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. hanging
-
Der Basislinienidentifier für die dominante Basislinie wird auf
hanging
gesetzt, die abgeleitete Basistabelle wird unter Verwendung derhanging
-Basistabelle in der Schrift konstruiert, und die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. mathematical
-
Der Basislinienidentifier für die dominante Basislinie wird auf
mathematical
gesetzt, die abgeleitete Basistabelle wird unter Verwendung dermathematical
-Basistabelle in der Schrift konstruiert, und die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. central
-
Der Basislinienidentifier für die dominante Basislinie wird auf
central
gesetzt. Die abgeleitete Basistabelle wird aus den definierten Basislinien in einer Basistabelle in der Schrift konstruiert. Diese Schrift-Basistabelle wird anhand der folgenden Prioritätenreihenfolge der Basistabellennamen ausgewählt:ideographic
,alphabetic
,hanging
,mathematical
. Die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. middle
-
Der Basislinienidentifier für die dominante Basislinie wird auf
middle
gesetzt. Die abgeleitete Basistabelle wird aus den definierten Basislinien in einer Basistabelle in der Schrift konstruiert. Diese Schrift-Basistabelle wird anhand der folgenden Prioritätenreihenfolge der Basistabellennamen ausgewählt:alphabetic
,ideographic
,hanging
,mathematical
. Die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. text-after-edge
-
Der Basislinienidentifier für die dominante Basislinie wird auf
text-after-edge
gesetzt. Die abgeleitete Basistabelle wird aus den definierten Basislinien in einer Basistabelle in der Schrift konstruiert. Die Wahl, welche Schrift-Basistabelle aus den Basistabellen in der Schrift verwendet wird, hängt vom Browser ab. Die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. text-before-edge
-
Der Basislinienidentifier für die dominante Basislinie wird auf
text-before-edge
gesetzt. Die abgeleitete Basistabelle wird aus den definierten Basislinien in einer Basistabelle in der Schrift konstruiert. Die Wahl, welche Basistabelle aus den Basistabellen in der Schrift verwendet wird, hängt vom Browser ab. Die Schriftgrößenkomponente der Basistabelle wird auf den Wert desfont-size
-Attributs auf diesem Element geändert. text-top
-
Dieser Wert verwendet die Oberkante der em-Box als Basislinie.
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
BCD tables only load in the browser
Siehe auch
- CSS
dominant-baseline
-Eigenschaft