Alineación de texto
El elemento <text> nos permite alinear el texto relativamente a una línea horizontal ( dominant-baseline ) o vertical ( text-anchor ), nos permite cambiar la orientación de las letras ( glyph-orientation ), incluso nos permite decidir el modo de escritura ( writing-mode ): de izquierda a derecha o de arriba abajo.
| Atributo | Ejemplo | Descripcion |
|---|---|---|
| dominant-baseline | dominant-baseline = "middle" | auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit |
| glyph-orientation-vertical | glyph-orientation-vertical = "90" | grados sexagesimales |
| glyph-orientation-horizontal | glyph-orientation-horizontal = "270" | grados sexagesimales |
| text-anchor | style = "text-anchor: start" | start | middle | end |
| writing-mode | style = "writing-mode: tb;" | tb (Top to Bottom = de arriba a abajo); rl (right to left = de derecha a izquierda ); lr (left to right = de izquierda a derecha); |
La propiedad dominant-baseline
La propiedad dominant-baseline se utiliza para alinear el texto verticalmente, relativo a una línea horizontal, y puede tomar uno de estos valores:
dominant-baseline = "auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit"
Sin duda alguna los más utilizados son alphabetic, central, middle y hanging. Veamos un ejemplo práctico:
La especificación w3.org: dominant-baseline property
La propiedad text-anchor
Utilizamos la propiedad text-anchor para alinear horizontalmente el texto, relativo a un punto dado ( cuyas coordenadas son x e y ).
En este caso el texto aparece alineado relativamente al punto cuyas coordenadas son x="125" y="70".
<text x="125" y="70" text-anchor="middle">middle</text>
Veamos un ejemplo.
La especificación w3.org: text-anchor property
La orientación de los glifos
glyph-orientation-vertical y
glyph-orientation-horizontal
En este momento esta característica no está bien soportada en ningún navegador.
Dos propiedades controlan la orientación de los glifos ( en tipografía, un glifo es una representación gráfica de un carácter, por ejemplo una letra o un símbolo ):
glyph-orientation-vertical y glyph-orientation-horizontal.
El valor de estos atributos de texto es un ángulo, normalmente 0° o 90°, pero puede ser también de 180° y 270°. Los valores intermediarios son ignorados.