text-align-last: control de la última línea aunque también sea la primera 12.10.15

text-align-last: control de la última línea aunque también sea la primera

Preámbulos

Uno

Allá por el inicio de la existencia del blog "trasladaba" al español el nuevo, entonces, documento Css text level 3. Hoy aquel documento está como last call y aunque no haya alcanzado el estatus de recomendation ya ha visto la luz el siguiente desarrollo que lo complementa y amplía: Css text level 4.

Como suele ser habitual en el camino de cualquier documento del Consorcio algunas de las novedades del "level 3" están marcadas como at risk (que viene a ser un estado como el del Gato de Schrödinger), de otras no busques ver su funcionamiento en vivo en navegadores y alguna que ya están listas para jugar con ellas.

Dos

Poco después (sobre 2 meses) de publicado el post sobre Css text level 3 traía a estas páginas otra traducción. En este caso del artículo de Patrick Kunka Text-align: Justify and RWD.

En él muestra cómo crear una grilla o rejilla con los elementos distribuidos equitativamente en base a la propiedad text-align. También recoge un par de "inconvenientes" en el momento de su publicación:

1. La declaración text-align: justify; sólo aplica si hay 2 ó más lineas conformadas.
2. Distribución de los ítems en la última línea si está incompleta.

El primer caso (ítems ocupan una sóla línea) se puede solventar con Css: se encarga al pseudoelemento ::after que conforme una línea más. Así los ítems se distribuyen como deseamos. Es la línea formada por los trazos de la siguiente imagen:

Para el segundo "pequeño inconveniente" Css no tenía solución (entonces). Así que quedaba delegado o encomendado a la programación y lenguaje usado en ella (js, php...) en calcular los espacios vacíos de la última línea de ítems y crear otros tantos ocultos para lograr una distribución o alineación deseada:

Tres

En la edición de este año de Octuweb, en su primer artículo, uno de los "trucos" para engañar a Css que incluía su autora era el punto 1 del preámbulo anterior: una sóla línea de ítems forzada su alineación justificada con el pseudoelemento.

text-align-last: control de la última línea

Después de esta larga serie de preámbulos (disculpas para que el artículo no quedase tan pobre y para darte qué leer) retomemos el documento Css text level 3 y una de sus novedades text-align-last.

Con esta propiedad se controla el tipo de alineación en la última línea. Y la última es la última, con independencia de cuántas haya antes que ella. Aplica aunque la última también sea la primera.

Los valores para text-align-last son:

• auto
• start
• end
• left
• right
• center
• justify

Soporte a text-align-last

Por mis pruebas ya es usable en Chrome y Firefox con prefijo -moz-. En IE 11 tiene algunas inconsistencias según caniuse.com.

Demo 1: ítems de menú

Una línea de items ocupando toda la línea:

See the Pen text-align-last by Kseso (@Kseso) on CodePen.

Demo 2: párrafos

See the Pen QjMOop by Kseso (@Kseso) on CodePen.

Pero, pero, pero...

Si realmente quieres tener control de la distribución o alineación de ítems en casos como la primera demo recurre al flexbox sin dudar. Tendrás muchas más herramientas, aka declaraciones, para lograr tu propósito.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso