Mejores saltos de línea para URL largas

CSS-Tricks ya ha descubierto cómo dividir texto que desborda su contenedor, pero no tanto como podría pensar. En 2012, Chris escribió “Manejo de palabras largas y URL (forzar saltos, separación de palabras, elipsis, etc.)” y sigue siendo una de las pocas publicaciones sobre el tema, incluido su seguimiento de 2018 ” Donde las líneas se rompen son complicadas”. Aquí está todo el CSS y HTML relacionados. “

La técnica probada y verdadera de Chris funciona bien cuando desea aprovechar los saltos de palabras automatizados y las reglas de separación de palabras integradas en el navegador:

.dont-break-out {  /* These are technically the same, but use both */  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  /* Adds a hyphen where the word breaks, if supported (No Blink) */  hyphens: auto;}

Pero ¿y si no puedes? ¿Qué pasa si tu guía de estilo requiere que rompas las URL en ciertos lugares? Estos mazos clásicos son demasiado imprecisos para ese nivel de control. Necesitamos una forma diferente de decirle al navegador exactamente dónde hacer una pausa.

Por qué debemos preocuparnos por los saltos de línea en las URL

Una razón es el diseño. Una URL que desborda su contenedor es sencillamente asquerosa a la vista.

Luego están los estándares de redacción. El Manual de estilo de Chicago, por ejemplo, especifica cuándo dividir las URL impresas. Por otra parte, Chicago nos da un pase para documentos electrónicos… más o menos:

Generalmente no es necesario especificar rupturas para las URL en formatos de publicaciones electrónicas con texto ajustable, y los autores deben evitar obligarlos a dividir sus manuscritos.

Chicago 17ª ed., 14.18

Pero, ¿qué pasa si, como nos anima Rachel Andrew (2015), estás diseñando para impresión, no solo para pantallas? De repente, lo “generalmente innecesario” se vuelve “absolutamente imperativo”. Ya sea que estés publicando un libro, o quieras crear una versión PDF de un trabajo de investigación que escribiste en HTML, o estés diseñando un CV en línea, o tengas una lista de referencias al final de tu entrada de blog, o simplemente importa cómo se ven las URL en tu proyecto; querrás una forma de administrar los saltos de línea con un mayor grado de control.

Bien, hemos establecido por qué es importante considerar los saltos de línea en las URL y que hay casos de uso en los que en realidad son muy importantes. Pero eso nos lleva a otra pregunta clave…

Entonces, ¿dónde se supone que deben ir los saltos de línea?

Queremos que las URL sean legibles. Tampoco queremos que sean feos, al menos no más feos de lo necesario. Siguiendo con el consejo de Chicago, debemos dividir las URL largas según la puntuación, para ayudar a indicarle al lector que la URL continúa en la siguiente línea. Eso incluiría cualquiera de los siguientes lugares:

Después de dos puntos o una doble barra (//)
Antes de una sola barra (/), una tilde (~), un punto, una coma, un guión, un subrayado (también conocido como guión bajo, _), un signo de interrogación, un signo numérico o un símbolo de porcentaje.
Antes o después de un signo igual o un signo comercial ()

Al mismo tiempo, no queremos inyectar nueva puntuación, como cuando usamos hyphens: auto;reglas en CSS para dividir palabras largas. Los guiones suaves o “tímidos” son excelentes para dividir palabras, pero son malas noticias para las URL. No es tan importante en las pantallas, ya que los guiones suaves no interfieren con copiar y pegar, por ejemplo. Pero un aún usuario podría confundir un guión suave con parte de la URL; Después de todo, los guiones suelen estar en las URL. Por lo tanto, definitivamente no queremos guiones impresos que en realidad no forman parte de la URL. Leer URL largas ya es bastante difícil sin tener que dividir las palabras dentro de ellas.

Aún podemos dividir palabras y cadenas particularmente largas dentro de las URL. Simplemente no hay guiones. En su mayor parte, Chicago deja a su discreción los saltos de palabras dentro de las URL. Nuestro objetivo principal es dividir las URL antes y después de los signos de puntuación apropiados.

¿Cómo se controlan los saltos de línea?

Afortunadamente, existe un elemento HTML (subestimado) para este propósito expreso: el wbrelemento, que representa una oportunidad de salto de línea. Es una forma de decirle al navegador que rompa la línea aquí si es necesario, no en cualquier lugar.

Podemos tomar una URL retorcida, como la que Chris compartió por primera vez en su publicación de 2012:

http://www.amazon.com/s/ref=sr_nr_i_o?rh=k%3Ashark+vacuum%2Ci%3Agardenkeywords=shark+vacuumie=UTF8qid=1327784979

Y agregue algunas wbretiquetas, “estilo Chicago”:

http:wbr//wbrwwwwbr.wbramazonwbr.comwbr/wbrs/wbrrefwbr=wbrsrwbr_wbrnrwbr_wbriwbr_owbr?rhwbr=wbrkwbr%3Asharkwbr+vacuumwbr%2Ciwbr%3Agardenwbrwbrkeywordswbr=wbrshark+vacuumwbriewbr=wbrUTF8wbrwbrqidwbr=wbr1327784979

Incluso si eres el tipógrafo más masoquista que jamás haya nacido, probablemente marcarías una URL como esa exactamente cero veces antes de comenzar a preguntarte si hay una manera de automatizar esas oportunidades de salto de línea.

Sí, sí lo hay. Indica JavaScript y algunas expresiones regulares colocadas adecuadamente:

/** * Insert line break opportunities into a URL */function formatUrl(url) {  // Split the URL into an array to distinguish double slashes from single slashes  var doubleSlash = url.split('//')  // Format the strings on either side of double slashes separately  var formatted = doubleSlash.map(str =    // Insert a word break opportunity after a colon    str.replace(/(?after:)/giu, '$1wbr')      // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol      .replace(/(?before[/~.,-_?#%])/giu, 'wbr$1')      // Before and after an equals sign or ampersand      .replace(/(?beforeAndAfter[=])/giu, 'wbr$1wbr')    // Reconnect the strings with word break opportunities after double slashes    ).join('//wbr')  return formatted}

Pruébalo

Continúe y abra la siguiente demostración en una nueva ventana, luego intente cambiar el tamaño del navegador para ver cómo se rompen las URL largas.

Esto hace exactamente lo que queremos:

Las URL se rompen en los lugares apropiados.
No hay puntuación adicional que pueda confundirse como parte de la URL.
Las wbretiquetas se generan automáticamente para evitar que las insertemos manualmente en el marcado.

Esta solución de JavaScript funciona aún mejor si utiliza un generador de sitios estáticos. De esa manera, no es necesario ejecutar un script en el cliente sólo para formatear la URL. Tengo un ejemplo funcional en mi sitio personal creado con Eleventy.

Si realmente también deseas dividir palabras largas dentro de las URL, te recomiendo insertar esas pocas wbretiquetas a mano. El Manual de estilo de Chicago tiene una sección completa sobre división de palabras (7.36–47, es necesario iniciar sesión).

Soporte del navegador

El wbrelemento se ha visto en libertad desde 2001. Finalmente se estandarizó con HTML5, por lo que funciona en casi todos los navegadores en este momento. Curiosamente, wbrfuncionó en Internet Explorer (IE) 6 y 7, pero se eliminó en IE 8 en adelante. El soporte siempre ha existido en Edget, por lo que solo es cuestión de lidiar con IE u otros navegadores heredados. Algunos programas populares de HTML a PDF, como Prince, también necesitan un impulso para manejar archivos wbr.

Una posible solución más

Hay un truco más para optimizar las oportunidades de salto de línea. Podemos usar un pseudoelemento para insertar un espacio de ancho cero, que es como wbrdebe comportarse el elemento en páginas codificadas en UTF-8. Eso al menos devolverá el soporte a IE 9 y, quizás lo más importante, trabajará con Prince.

/**  * IE 8–11 and Prince don’t recognize the `wbr` element, * but a pseudo-element can achieve the same effect with IE 9+ and Prince. */wbr:before {  /* Unicode zero width space */  content: "200B";  white-space: normal;}

La lucha por lograr HTML, CSS y JavaScript con calidad de impresión no es nada nuevo, pero está experimentando un cierto renacimiento. Incluso si no diseña para impresión ni sigue el estilo de Chicago, sigue siendo un objetivo valioso escribir HTML y CSS teniendo en cuenta las URL y los saltos de línea.

Referencias

Andrés, Raquel. 2015. “Diseño para impresión con CSS”. Revista Smashing, 7 de enero.
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.
——— 2018. “Una guía sobre el estado de los estilos de impresión en 2018”. Revista Smashing, 1 de mayo.
https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/.
Coyier, Chris. 2012. “Manejo de palabras largas y URL (forzar pausas, separación de palabras, elipsis, etc.)”. CSS-Tricks, 30 de enero de 2012. Última modificación el 25 de julio de 2018.
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/.
——— 2018. “Donde las líneas se rompen es complicada. Aquí está todo el CSS y HTML relacionados”. CSS-Tricks, 9 de mayo de 2018. Última modificación el 24 de abril de 2020.
https://css-tricks.com/where-lines-break-is-complicated-heres-all-the- related-css-and -html/.
El manual de estilo de Chicago. 2017. 17ª ed. Chicago: Prensa de la Universidad de Chicago.
https://www.chicagomanualofstyle.org/.
Príncipe. y “Convertir HTML a PDF con CSS”. Consultado el 25 de febrero de 2021.
https://www.princexml.com/.
El Consorcio Unicode. 2009. “Áreas especiales y caracteres de formato”. En el estándar Unicode. Versión 5.2.0.
http://unicode.org/versions/Unicode5.2.0/ch16.pdf.
WHAT. y “HTML: Nivel de vida”. Consultado el 25 de febrero de 2021.
https://html.spec.whatwg.org/multipage/.

Deja un comentario Cancelar respuesta