Mejores saltos de línea para direcciones URL largas | Programar Plus

0

Programar Plusha cubierto cómo romper el texto que desborda su contenedor antes, pero no tanto como podría pensar. En 2012, Chris escribió “Manejo de palabras largas y direcciones URL (cortes forzados, guiones, puntos suspensivos, etc.)” y sigue siendo una de las pocas publicaciones sobre el tema, incluido su seguimiento de 2018 “Donde las líneas se rompen es complicada. Aquí están todos los CSS y HTML relacionados”.

La técnica comprobada de Chris funciona bien cuando desea aprovechar las reglas de división de palabras y guiones automáticas que se integran 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é sucede si su guía de estilo requiere que rompa 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 un descanso.

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 simplemente 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 en la impresión. Por otra parte, Chicago nos da un pase para documentos electrónicos… más o menos:

Por lo general, no es necesario especificar saltos para URL en formatos de publicaciones electrónicas con texto ajustable, y los autores deben evitar forzarlos a romper en sus manuscritos.

Chicago 17ª ed., 14.18

Pero, ¿y si, como nos anima Rachel Andrew (2015), estás diseñando para la impresión, no solo para las pantallas? De repente, “generalmente innecesario” se convierte en “absolutamente imperativo”. Ya sea que esté publicando un libro, desee crear una versión en PDF de un trabajo de investigación que escribió en HTML, esté diseñando un CV en línea, tenga una lista de referencias al final de la publicación de su blog o simplemente preocúpese por el aspecto de las URL en su proyecto; deseará una forma de administrar los saltos de línea con un mayor grado de control.

De acuerdo, 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 en función de la puntuación, para ayudar a señalar al lector que la URL continúa en la línea siguiente. Eso incluiría cualquiera de los siguientes lugares:

  • Después de dos puntos o una doble barra (//)
  • Antes de una sola barra inclinada (/), una tilde (~), un punto, una coma, un guión, un subrayado (también conocido como guion bajo, _), un signo de interrogación, un signo de número o un símbolo de porcentaje
  • Antes o después de un signo igual o un ampersand (&)

Al mismo tiempo, no queremos inyectar nueva puntuación, como cuando podríamos alcanzar hyphens: auto; reglas en CSS para dividir palabras largas. Los guiones suaves o “tímidos” son excelentes para romper 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 usuario aún podría confundir un guión suave como parte de la URL; después de todo, los guiones suelen estar en las URL. Así que definitivamente no queremos guiones impresos que en realidad no sean parte de la URL. Leer direcciones URL largas ya es bastante difícil sin dividir las palabras dentro de ellas.

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

¿Cómo controlas los saltos de línea?

Afortunadamente, hay un elemento HTML (infravalorado) para este propósito expreso: el <wbr> elemento, que representa una oportunidad de salto de línea. Es una forma de decirle al navegador: Rompe la línea aquí si es necesario, no cualquier lugar antiguo.

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%3Agarden&keywords=shark+vacuum&ie=UTF8&qid=1327784979

Y espolvorear un poco <wbr> etiquetas, “estilo Chicago”:

http:<wbr>//<wbr>www<wbr>.<wbr>amazon<wbr>.com<wbr>/<wbr>s/<wbr>ref<wbr>=<wbr>sr<wbr>_<wbr>nr<wbr>_<wbr>i<wbr>_o<wbr>?rh<wbr>=<wbr>k<wbr>%3Ashark<wbr>+vacuum<wbr>%2Ci<wbr>%3Agarden<wbr>&<wbr>keywords<wbr>=<wbr>shark+vacuum<wbr>&ie<wbr>=<wbr>UTF8<wbr>&<wbr>qid<wbr>=<wbr>1327784979

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í hay. Cue JavaScript y algunas expresiones regulares bien colocadas:

/**
 * 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, '$1<wbr>')
      // 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>$1<wbr>')
    // 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.
  • El <wbr> las etiquetas se generan automáticamente para evitar que las insertemos manualmente en el marcado.

Esta solución de JavaScript funciona aún mejor si está aprovechando un generador de sitios estáticos. De esa forma, no tiene que ejecutar un script en el cliente solo para formatear las URL. Tengo un ejemplo de trabajo en mi sitio personal creado con Eleventy.

Si realmente desea dividir las palabras largas dentro de las URL también, le recomiendo que inserte esas pocas <wbr> etiquetas a mano. El Manual de estilo de Chicago tiene una sección completa sobre la división de palabras (7.36–47, se requiere iniciar sesión).

Compatibilidad con navegador

El <wbr> El elemento se ha visto en la naturaleza desde 2001. Finalmente se estandarizó con HTML5, por lo que funciona en casi todos los navegadores en este momento. Curiosamente, <wbr> funcionó 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 <wbr>.

Una solución más posible

Hay un truco más para optimizar las oportunidades de salto de línea. Podemos usar un pseudo-elemento para insertar un espacio de ancho cero, que es como el <wbr> El elemento está destinado a comportarse en páginas codificadas en UTF-8 de todos modos. 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 HTML, CSS y JavaScript de calidad de impresión no es algo nuevo, pero está experimentando un pequeño renacimiento. Incluso si no diseña para impresión ni sigue el estilo de Chicago, sigue siendo un objetivo que vale la pena escribir su 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 saltos, guiones, puntos suspensivos, 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-break-out-of-container/.
  • ———. 2018. “Donde las líneas se rompen es complicado. Aquí están todos los 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.
  • ¿QUÉ? nd “HTML: Estándar de vida”. Consultado el 25 de febrero de 2021.
    https://html.spec.whatwg.org/multipage/.