Alineación de texto

facebook-svg gplus-svg twitter-svg

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:



			
			alphabetic
			central
			middle
			hanging

alphabetic central middle hanging

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.



			
			start
			middle
			end

start middle end

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.



			
			Vertical
			Vertical
			Horizontal
			Horizontal

Vertical Vertical Horizontal Horizontal