La gestión de líneas huérfanas y viudas no sólo en el media='print' 9.11.14
Gestión de las líneas huérfanas y viudas (orphans & widows) en medios impresos y screen.
La gestión de líneas huérfanas y viudas no sólo en el media='print'
Gestión de líneas viudas y huérfanas (widows & orphans)
Estos dos conceptos provienen del mundo de la impresión gráfica, de donde Css lo recogió. Primero sólo fueron de aplicación en los medios paginados media='pint', pero con la llegada de nuevas propiedades, como las multicolumnas css o las regiones, hoy también es posible encontrarse con ellas en los documentos mostrados en pantallas.
Ambas expresiones se refieren a las líneas de texto que quedan en una página distinta a donde se muestra la mayoría del párrafo al que pertenecen.
Viudas o widows
La líneas viudas
(widows en inglés) son aquellas que se imprimen en la "página" siguiente a la que está su párrafo (la mayor parte del párrafo).
La propiedad widows especifica el número mínimo de líneas de un párrafo que deben dejarse al comienzo de una página (cuando el párrafo comienza en la página anterior).
p {
widows: 2;
}
Huérfanas o orphans
La línea huérfana orphans es la que se imprime en la página anterior a la que está la mayor parte del párrafo al que pertenece:
La propiedad Css para controlar las líneas huérfanas es orphans: La propiedad 'orphans' especifica el número mínimo de líneas de un párrafo que deben dejarse al final de una página
p {
orphans: 2;
}
En este caso, o hay espacio al final de la página para imprimir al menos dos líneas o todo el párrafo pasa a la siguiente página, dejando esa línea (en la página precedente) en blanco.
Orphans y widows en media='screen'
Pese a que estas dos propiedades están definidas en la documentación relativa a los medios paginados, como te decía al inicio, también funcionan en media='screen' en las multicolumnas pero dependiendo del navegador. ¿Tengo que asumir que también lo harán en otros contextos como las regiones Css? Posíblemente.
Tanto la captura anterior como la siguiente están hechas en Chrome. En Firefox no he observado que surjan ningún efecto.
Observa que en estos escenarios (multicolumnas), lo que ocurre es que crea una línea adicional al final de la columna para evitar la línea huérfana, toda vez que su contenedor padre no tiene declarada altura. Lo que se traduce en una rotura del "balanceo" que acompaña a las columnas (procurar la misma altura en ambas).
 en medios impresos y screen.){kind=link}
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