<wbr> Ajuste de línea condicional | El HTML desconocido

La máxima «Nunca se para de aprender» sirve también para las etiquetas HTML. A pesar de la flexibilidad de CSS deberí­amos utilizar todas las etiquetas o tags (X)HTML a nuestra disposición para crear un código semántico, siempre y cuando sean estándar y compatibles con todos los navegadores.

El número de tags es finito y por eso creemos conocerlas todas, pero es que hay algunas que ni siquiera aparecen en los listados de referencia más habituales (1, 2) o en editores como Dreamweaver.

Recientemente se han publicado dos artí­culos sobre etiquetas (X)HTML «desconocidas» o poco habituales:

  1. 5 obscure HTML tags that you should know and even use [en] «“ Ricardo Oliveira lo ha traducido a español.
  2. 10 Rare HTML Tags You Really Should Know

Las etiquetas en cuestión son estas 14:

  1. <cite>
  2. <optgroup>
  3. <acronym>
  4. <address>
  5. <ins>
  6. <del>
  7. <label>
  8. <fieldset>
  9. <abbr>
  10. <rel>
  11. <wbr>
  12. <q>
  13. <legend>
  14. <bdo>

Debo reconocer que a pesar de que hago mis deberes hay 2 que desconocí­a. Me he quedado más tranquilo cuando he comprobado que no son compatibles en todos los navegadores.

Mis dos grandes desconocidas

<q>

Hace que el explorador entrecomille un texto. Todos los navegadores la soportan a excepción de versiones de IE anteriores a IE8

Ejemplo

&lt;q&gt; de <q>quote</q>, de cita

Resultado:

<q> de quote, de cita

 

<wbr>

Esta es la etiqueta que titula el artí­culo. No hace mucho que escribí­ un artí­culo titulado 9 formas de separar por sí­labas textos web y debí­a de haber al menos mencionado esta etiqueta, <wbr> de «word break» o más bien «word wrap» ya que lo que hace es un «Ajuste de lí­nea condicional».

Si un texto es demasiado largo y hemos insertado esta etiqueta el navegador romperá la lí­nea si lo considera necesario y añadirá un salto de lí­nea, evitando el incómodo scroll horizontal. Puede sernos útil para la partición o separación por sí­labas pero recordemos que no añadirá ningún guión de separación.

Ejemplo

Dependiendo de la resolución de tu monitor verás el siguiente texto como una sola lí­nea o dos lí­neas, estrecha el ancho de la ventana de tu navegador y verás cómo se va rompiendo la lí­nea en los sitios que hemos insertado la etiqueta <wbr>:

Pluriblanduzcosplusgrandifecho<wbr>entrifugadlPluriblanduzcosplusgrandifechocentrifugadlo<wbr>smurciélagoPluriblanduzcosplusgrandifecho<wbr>centrifugadlosmurciélagoPluriblanduzcosplusgrandifecho<wbr>centrifugadlosmurciélagoélago

Resultado:

PluriblanduzcosplusgrandifechocentrifugadlosmurciélagoPluriblanduzcosplusgrandifechocentrifugadlosmurciélagoPluriblanduzcosplusgrandifechocentrifugadlosmurciélago

* Las palabras del ejemplo son palabras largas donde ninguna letra se repite.

Peter-Paul Koch, autor de estas famosas tabla de compatibilidad explica que precisamente hace uso de <wbr> para crearlas.

image

Como ves la etiqueta <wbr> está soportada por IE, Firefox, Safari 4.0+ pero no soportado en Opera. Lo he testeado en Opera 9.6.4 bajo XP.

Hay dos soluciones a través de CSS para Opera pero que harí­a que no pudiésemos tampoco validar el CSS:

1.- Con la propiedad display y el valor inline-block:

wbr {

display: inline-block;

}

2.- Añadiendo mediante la propiedad content la entidad HTML  &#8203;

wbr:after { content: "\00200B"; }

Así­ que después del descubrimiento me sigo quedando con las alternativas, estas dos entidades HTML: &#8203; y &shy;

La diferencia es si queremos que se inserte un guión de separación ( &shy; ) o no ( &#8203; ).

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *