Alineaciones horizontales y verticales en CSS3

Iconos de alineción horizontal

El módulo CSS Text Module Level 3 es la especificación CSS3 para manipulación de texto, cubriendo entre otras cosas todo lo relativo a la alineación de elementos en línea. Actualiza la propiedad de CSS2.1 text-align con nuevos valores y agrega más propiedades como text-align-last y text-justify. En este tema veremos un poco sobre esto que, en resumen, se trata de alinear horizontalmente contenidos Inline.

Porque además podríamos alinear verticalmente también contenidos Inline mediante el uso de la propiedad de CSS2.1 vertical-align. Esto también se amplía en CSS3 con el módulo CSS Inline Layout Module Level 3, en su apartado 1. Line Heights and Baseline Alignment.

Lo anterior sólo sirve para alinear contenidos Inline, no habiendo hasta ahora propiedades explícitamente creadas para alinear contenidos de bloque. El nuevo módulo CSS Box Alignment Module Level 3 introduce nuevas propiedades como align-content o aling-self entre otras, como puede observar en el apartado 2. Overview of Alignment Properties.

Y como siempre advertir que son especificaciones no finalizadas, por lo que podrán sufrir cambios importantes. En la exposición de los ejemplos daré información de soporte de los navegadores. Por otro lado puedes consultar al código de todos los ejemplos usando el botón Código de la barra de menús en la cabecera de esta página.

Alineando elementos Inline con text-align en CSS3

La propiedad de CSS2.1 text-align se aplica a elementos de bloque (tipo Block) para alinear horizontalmente los elementos en línea (tipo Inline) que contiene. Estos son elementos como <span> y también el propio texto ubicado directamente dentro del bloque. En CSS2.1 teníamos los valores left, center, right y justify para text-align. Pero ahora con CSS3 la cosa se complica un poco más agregándose nuevas propiedades start y end. La especificación a estudiar es CSS Text Module Level 3, aún en estado de borrador a la fecha de redactar esto. Ahí podemos encontrar las alineaciones y justificaciones en CSS3.

Este primer ejemplo intentaremos ver cuál es el objeto de los nuevos valores usando esta propiedad text-align y también la ya existente direction. Esta última, que es de CSS2.1, sirve para especificar la direccionalidad del texto. Por ejemplo, en español el texto se lee desde la parte izquierda del papel hacia la derecha, mientras que en hebreo se hace en la forma contraria. Esta propiedad especifica desde que borde del papel comienza el texto.

Tenemos un contenedor de bloque (un <blockquote>) con fondo azul claro que contiene sólo texto. Por defecto los elementos tienen un valor left para text-align y un valor ltr para direction. Inicialmente el ejemplo viene con el idioma español, al que le corresponde esa direccionalidad ltr (equivale a left to right). Si cambiamos de idioma al tiempo que de direccionalidad rtl (right to left) vemos que no afecta a la alineación, siguiendo alineado a la izquierda cuando debería alinearse a la derecha.

Ejemplo: Alineando con text-align en CSS3

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
direction CSS2.1
text-align
CSS2.1
CSS3
Valores computados text-align: justify; direction: ltr;

Para evitar esto podemos dar el valor start al contenedor exterior con lo que el texto se alinea con el borde implícito en la propiedad direction. Así se alineará al inicio natural de ese idioma, a la izquierda para ltr y a la derecha para rtl. De igual manera actuará con el valor end, a la derecha para ltr y a la izquierda para rtl.

Esto es útil cuando tenemos texto de varios idiomas dentro de un mismo contenedor. En el siguiente ejemplo damos el valor start al contenedor exterior y luego ubicamos dos párrafos con elementos <p>. El primero contiene texto en español y se alinea a su borde natural izquierdo, pues la direccionalidad por defecto es ltr. Al segundo párrafo le ponemos direccionalidad rtl para albergar texto hebreo y vemos que se alinea a su borde natural derecho.

Ejemplo: Uso del valor start para text-align de CSS3

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

בכפר של לה מנשה, שאת שם אני לא זוכר, לא מזמן ג'נטלמן שחי אלה של לאנס ומגן עתיק, גרזן רזה וגרייהאונד.

El borrador de la especificación CSS Text Module Level 3 que estamos viendo también expone dos valores más para text-align. Son valores en experimentación o bien no están del todo implementadas en los navegadores. Son los siguientes:

match-parent
Se comporta como el valor inherit heredando el text-align del padre, excepto que si el valor heredado es start o end se interpretará según la direccionalidad (direction) del padre.
start end
Especifica la alineación start de la primera línea y de alguna línea que siga a un salto de línea forzado. Por otro lado especifica la alineación end para la última línea de un párrafo.

Vale la pena comentar qué es un salto de línea forzado pues también aparecerá en el siguiente apartado. El contenido a nivel de línea se presenta en líneas, de tal forma que el navegador introduce saltos de línea en los lugares adecuados para dividir el contenido en líneas que quepan en el contenedor de bloque que las alberga. Este tipo de saltos se denominan saltos de ajuste suave, usando por ejemplo los espacios del texto para romper las líneas. Pero también pueden producirse saltos de línea forzados, como cuando usamos un elemento <br />. También se fuerza un salto con la primera y última línea del bloque.

Alinear la última línea con text-align-last de CSS3

Esta nueva propiedad text-align-last describe como la última línea de un bloque o una línea antes de un salto de línea forzado es alineada cuando la propiedad text-align toma el valor justify. Si una línea es también la primera de un bloque o la que sigue a un salto de línea forzado entonces text-align-last prevalece sobre text-align.

Puede tomar los valores auto, start, end, left, right, center y justify, siendo auto el valor por defecto. Si se especifica este valor la línea afectada se alinea según lo declarado en text-align, a menos que esta propiedad está declarada como justify, en cuyo caso se justifica alineada al inicio, como si usáramos el valor start en text-align-last.

Veámos un ejemplo. Como en el anterior, el contenedor azul de bloque contiene dos elementos párrafo en dos idiomas y con direction distintas. Ese contenedor tiene text-align establecida a justify. Dado que esta propiedad se hereda, los párrafos interiores justificarán el texto. La nueva propiedad text-align-last tiene por objeto establecer la justificación de la última línea de cada párrafo.

Antes de ver el ejemplo conviene indicar que text-align-last sólo es soportada actualmente por Firefox (+12) e Internet Explorer (+5.5), aunque en este último no se han implementado los valores start y end. De todas formas el ejemplo está preparado para funcionar en cuanto un navegador comience a soportar la propiedad, bien con prefijo CSS (vendor prefixes) o sin ellos. El soporte se indica en un mensaje al pie del ejemplo.

Ejemplo: Uso de text-align-last de CSS3

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

בכפר של לה מנשה, שאת שם אני לא זוכר, לא מזמן ג'נטלמן שחי אלה של לאנס ומגן עתיק, גרזן רזה וגרייהאונד.

text-align-last
Valor computado text-align-last: auto; text-align: justify;

Al seleccionar distintos valores vemos el efecto de justificado de la última línea. Veáse que los valores auto y start producen el mismo resultado. El valor justify justifica completamente la última línea, agregando espacios entre palabras. La presentación de la última línea dependerá del ancho de pantalla. En un dispositivo de sobremesa con ancho suficiente quedarán unas últimas líneas con pocas palabras. Notará que se justifican separando excesivamente la palabras.

Método de justificado text-justify de CSS3

La nueva propiedad text-justify declara el metodo a usar para el justificado cuando se establece el valor justify para la propiedad text-align. La propiedad aplica a contenedores de bloque (Block), pero el navegador podría también aplicarlo a elementos en línea (Inline). Los valores posibles son:

auto
El navegador elige el algoritmo de justificación que seguirá.
none
No se aplica justificado.
inter-word
La justificación ajusta espacios entre palabras.
distribute
La justificación ajusta espacios entre caracteres.

Esta propiedad solo es soportada a la fecha de redactar esto por IE. No soporta el valor none pero dispone de otros valores que no se incluyen en la especificación. No se aplica a la última línea de cada párrafo. En el siguiente ejemplo repetimos el anterior, con los párrafos justificados con text-align. El efecto en IE de los dos últimos valores inter-word y distribute se apreciará mejor si reducimos el ancho del viewport o incrementamos el tamaño de la fuente hasta 30 píxeles, pues en esos casos cada línea contendrá menos palabras. Aunque sólo lo aplica al primer párrafo con texto en español.

Ejemplo: Uso de text-justify de CSS3

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

בכפר של לה מנשה, שאת שם אני לא זוכר, לא מזמן ג'נטלמן שחי אלה של לאנס ומגן עתיק, גרזן רזה וגרייהאונד.

text-justify
Valor computado text-justify: auto; text-align: justify;

Alineando elementos inline-block

Los elementos del tipo Inline se caracterizan porque sólo pueden contener elementos del mismo tipo y no producen un salto de línea tras ellos. Además no es posible especificar ancho y alto (width y height) pues estas propiedades vienen dadas por el contenido y tamaño y tipo de fuente de esos elementos. El elemento genérico de este tipo es <span>. Pero también el texto final de un elemento puede considerarse de este tipo.

Por lo tanto las propiedades para alinear elementos en línea se aplican a texto y, en general a elementos Inline. Cuando queramos dimensiones explícitas para un elemento hemos de usar el tipo Block. O bien usar el estilo display: inline-block con lo que el elemento se comportará como Inline a efectos de text-align y se puede dimensionar. No producirá un salto de línea si cabe en una línea.

En este ejemplo tenemos un contenedor exterior de bloque con fondo azul claro. Contiene cuatro elementos <span> que inicialmente tienen display: inline-block. Los tres primeros contienen texto con las letras "A", "B" y "C". El último está vacío. Les dotamos de dimensiones 3em×3em y, aún no siendo del tipo inline puro, podemos alinearlos.

Ejemplo: Alineando con text-align elementos inline-block

ABC
text-align (contenedor)
display (elementos)
vertical-align (elementos)
Valores computados
text-align: left (contenedor);
display: inline-block (elementos);
vertical-align: top (elementos);

Como la propiedad text-align se está aplicando al contenedor exterior, está se hereda a los elementos interiores y, por tanto, también se alineará el texto que contienen. En cambio si les cambiamos el tipo a block vemos que ya no se alinean los elementos, aunque si su texto interior al heredar text-align. En este caso son elementos de bloque que fuerzan un salto de línea tras cada uno.

Si les ponemos tipo inline vemos que las dimensiones que les hemos dado son ignoradas. El ancho y alto queda determinado por el contenido de cada elemento. El último que está vacío vemos que ni siquiera aparece. Esta ahí, pero tiene dimensiones cero, por lo que no se presenta pues no hay nada que pintar, ni siquiera bordes porque no tiene.

Aunque la propiedad vertical-align es para alinear verticalmente elementos Inline, la hemos puesto sólo con los valores top y baseline para ver el efecto con el tipo inline-block. Con valor baseline los elementos Inline (incluso inline-block) son alineados verticalmente respecto de la línea base de texto. Dígamos ahora para simplificar que es una línea que sirve de base para asentar las letras, aunque algunas podrían tener trazos descendentes como las letras "p" o "j" por ejemplo.

Si en el ejemplo usamos inline-block con el valor baseline para vertical-align veremos que los tres primeros elementos con las letras "A", "B" y "C" aparecen verticalmente alineados. Pero el último que está vacío se desplaza hacia arriba. Realmente lo que está sucediendo es que todos se alinean por su línea base de texto. Para los inline-block la línea base de texto es la de la última línea de texto de la caja. O bien su borde inferior si está vacío.

Por lo tanto cuando usemos inline-block para forzar el uso de text-align en elementos con dimensiones explícitas cuyo cometido inicial era ser de bloque, quizás tengamos que corregir la alineación vertical de vertical-align, que por defecto es baseline, a un valor como top alineándose en el borde superior.