Cómo controlar los rags

El texto impreso tiene elementos de estilo más fáciles de manejar que en el mundo digital: los autores, escritores, periodistas y columnistas trabajan dentro de márgenes y orientación de papel establecidos, mientras que el tamaño del papel y las columnas están definidos con una altura y ancho específicos, y el diseño incluye encabezados, pies de página y alineación vertical, todo antes de escribir la primera letra o palabra en el teclado. Sin embargo, puede resultar difícil para el diseñador web o el gestor de contenido web manejar todos estos elementos de tipografía y asegurarse de que se vean correctamente en cada página web y en todos los navegadores para cada usuario. En esta publicación, demostraré cómo tomar el control de tus líneas huérfanas, viudas y lisiadas. ¿Cómo puede el diseñador web obtener el dominio sobre la palabra renderizada evitando las líneas huérfanas dolorosas de leer, las incómodas líneas viudas y las líneas lisiadas?

Rag

El "rag" es, probablemente, uno de los detalles más pasados por alto en la tipografía web, sin embargo, su flujo puede hacer o deshacer el aspecto de un sitio web. ¿Cuál es la diferencia entre un rag bueno y uno malo? Un rag bueno tiene un flujo agradable donde las líneas se rompen a la derecha del párrafo y se mueven hacia adentro y hacia afuera en pequeños incrementos. Un rag malo crea formas distraídas de espacios en blanco irregulares en los márgenes de la página o columna, donde las líneas se rompen de manera variada y inconsistente. La Figura A y Figura B a continuación ilustran un rag malo y un rag bueno, respectivamente.

Viudas

Las viudas son líneas que terminan un párrafo y se encuentran al comienzo de la siguiente página o columna, separadas del resto del texto. Una viuda es una línea muy corta, generalmente una palabra o el final de una palabra dividida al final de un párrafo o columna. Las viudas dejan demasiado espacio en blanco entre párrafos o en la parte superior de una página. Esto interrumpe la visión del lector, afecta el proceso de lectura e incluso puede dificultar la comprensión. Ver el ejemplo de una viuda en Figura C a continuación.

Líneas huérfanas

Las líneas huérfanas son palabras únicas que se quedan solas al final de un párrafo. Una línea huérfana es una palabra, parte de una palabra o una línea muy corta que aparece por sí misma al final de un párrafo. También puede ser una línea que abre un párrafo y aparece por sí sola al final de una página o columna. Las líneas huérfanas resultan en demasiado espacio en blanco entre párrafos o en la parte inferior de una página. Ver el ejemplo de una línea huérfana en Figura D a continuación.

Corrigiendo los rags, las viudas y las líneas huérfanas

Veamos algunas formas de equilibrar los rags, corregir las viudas y omitir las líneas huérfanas en tu tipografía web. Aplicar estilos a tus párrafos ayuda a tomar el control de cómo se muestra tu texto justificado. Aunque utilizar CSS te brinda cierto control, CSS3 ofrece reglas adicionales para perfeccionar la justificación efectiva. Si bien no existen soluciones infalibles para controlar el rag, hay algunas modificaciones que se pueden aplicar al nivel de bloque de texto.

El ajuste de texto justificado o el texto con rag se logra mediante CSS con la propiedad text-align, como se muestra en el fragmento de código a continuación:

Cómo editar un documento PDF con LibreOffice Draw

/* ragged right */

P {text-align:left}

/* ragged left */

P {text-align:right}

/* no ragged */

P {text-align:justify}

Sin embargo, este estilo CSS no es una solución perfecta y, dado que la justificación efectiva del texto solo se puede lograr si se dividen las palabras largas, HTML y CSS por sí solos no tienen ninguna disposición para agregar la división automática de palabras con el soporte de todos los navegadores actuales. La división manual de palabras a lo largo de las líneas es algo descartado, por lo que esto resulta ser una solución deficiente.

Obtenemos cierta ayuda del Módulo de diseño multicolumna de CSS, que describe cómo se puede distribuir el contenido de texto e imágenes en múltiples columnas, por ejemplo, y se puede definir con un espacio y una línea entre cada columna en un recuento de columnas asignado si se desea. Revisé esta técnica de CSS3 en detalle en "Trabajando con el Módulo de diseño multicolumna de CSS3". A continuación, se muestra un fragmento de este código de ejemplo, que establece el número de columnas fijas con column-count establecido en 3, el column-gap en 1em y una regla de columna sólida de 1px en negro. Con este estilo, el ancho de las columnas variará dependiendo del ancho disponible en el navegador.

.column_count {

   -moz-column-count: 3;

   -webkit-column-count: 3;

   -moz-column-gap: 1em;

   -moz-column-rule: 1px solid black;

   -webkit-column-gap: 1em;

   -webkit-column-rule: 1px solid black;

   column-count: 3;

   column-gap: 1em;

   column-rule: 1px solid black;

}

Un ejemplo de este estilo aplicado a un texto de muestra se muestra en Figura E a continuación.

Con estos consejos y técnicas, podrás tomar el control de tus rags, viudas y líneas huérfanas en tu diseño web y alcanzar la apariencia deseada para tu contenido de texto.

Cómo configurar un servidor SSH en Windows 7

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo controlar los rags , tenemos lo ultimo en tecnología 2023.