text-anchor
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis août 2016.
La propriété CSS text-anchor aligne une boîte contenant une chaîne de caractères textuelle où la zone de retour à la ligne est déterminée à partir de la propriété inline-size, et le texte est ensuite placé par rapport au point d'ancrage de l'élément, qui est défini à l'aide des attributs x et y (ou dx et dy). Si présent, la valeur de la propriété CSS remplace toute valeur de l'attribut text-anchor de l'élément.
Chaque fragment de texte individuel au sein d'un élément est aligné indépendamment ; ainsi, un élément <text> multi-lignes aura chaque ligne de texte alignée selon la valeur de text-anchor. Les valeurs de text-anchor n'ont d'effet que sur les éléments SVG <text>, <textPath> et <tspan>. text-anchor ne s'applique pas au texte automatiquement retourné à la ligne ; pour cela, voir text-align.
Syntaxe
text-anchor: start;
text-anchor: middle;
text-anchor: end;
/* Valeurs globales */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;
Valeurs
start-
Aligne le texte de manière à ce que le début de la chaîne de caractère textuelle soit aligné sur le point d'ancrage. Cet alignement est relatif au sens d'écriture du texte ; ainsi, par exemple, dans une écriture de droite à gauche et de haut en bas, le texte sera placé à gauche du point d'ancrage. Si le sens d'écriture du texte est vertical, comme c'est le cas pour de nombreuses langues asiatiques, le bord supérieur du texte est aligné sur le point d'ancrage.
middle-
Aligne le texte de manière à ce que le centre (milieu) de la boîte en ligne de la chaîne de caractères textuelle soit aligné avec le point d'ancrage.
end-
Aligne le texte de manière à ce que la fin de la chaîne de caractères textuelle soit alignée sur le point d'ancrage. Cet alignement est relatif au sens d'écriture du texte ; ainsi, par exemple, dans une écriture de droite à gauche et de haut en bas, le texte sera placé à droite du point d'ancrage. Si le sens d'écriture du texte est vertical, comme c'est le cas pour de nombreuses langues asiatiques, le bord inférieur du texte est aligné sur le point d'ancrage.
Définition formelle
| Valeur initiale | start |
|---|---|
| Applicabilité | éléments <text>, <textPath> et <tspan> dans <svg> |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
text-anchor =
start |
middle |
end
Exemples
Trois éléments SVG <text> sont placés à la même position x, mais avec des valeurs différentes pour text-anchor. Une ligne rouge en pointillés est incluse pour marquer la position de l'axe des x de tous les trois points d'ancrage.
<svg
viewBox="0 0 200 150"
height="150"
width="200"
xmlns="http://www.w3.org/2000/svg">
<line
x1="100"
y1="0"
x2="100"
y2="150"
stroke="red"
stroke-dasharray="10,5" />
<text x="100" y="40">Anchored</text>
<text x="100" y="80">Anchored</text>
<text x="100" y="120">Anchored</text>
</svg>
text:nth-of-type(1) {
text-anchor: start;
}
text:nth-of-type(2) {
text-anchor: middle;
}
text:nth-of-type(3) {
text-anchor: end;
}
Spécifications
| Spécification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextAnchorProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
dominant-baseline - L'élément SVG
<text> - L'attribut SVG
text-anchor