La etiqueta PRE

Hace unos días, luego de los cambios realizados por Blogger y que aún nos vuelven locos, ocurrió un problema que viene repitiéndose desde hace mucho. Si bien parece haberse "arreglado", no deja de ser interesante hablar del tema por si vuelve a repetirse el problema.

Hay una etiqueta HTML que algunos solemos usar, sobre todo a la hora de mostrar códigos: <pre> </pre> (PREformated) que nos permite formatear cualquier texto que se encuentre dentro de ella.

El HTML tiene una particularidad, los espacios en blanco adicionales se eliminan sistemáticamente es decir, si escribimos:

<p>Hola          Adiós</p>

Lo que veremos será:

Hola Adiós

Toda esa separación adicional será ignorada y si queremos separar una palabra de la otra, tenemos que recurrir a caracteres especiales como &nbsp; (on-breaking space o no-break space) que es el llamado hard space o fixed space (espacio fijo).

<p>Hola&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adios</p>

Se verá:

Hola          Adios

También podemos usar otra variante, escribiendo &#160; y si queremos reproducirlo con el teclado, es sencillo ya que en la mayoría de los procesadores de texto basta oprimir Ctrl+Mayús+Espacio o Ctrl+Espacio.

Si no queremos usar esos caracteres podemos recurrir al CSS y escribir:

<p>Hola <span style="margin-left:valor">Adios</span></p>

Sea como sea, el resultado es un código confuso y da demasiado trabajo. Entonces, podemos recurrir a la etiqueta PRE. Cuando el navegador encuentre esa etiqueta sabrá que deberá dejar los espacios en blanco intactos, mostrar el texto con una fuente de ancho fijo y deshabilitar los saltos de línea.

Es decir, si escribimos:

<pre>
este texto
       se mostrará
              así
                     tal y como lo escribimos.
</pre>

Por defecto, veremos esto:

este texto
       se mostrará
              así
                     tal y como lo escribimos.

No sólo podemos usar espacio, también podemos usar TABs horizontales (&#09;) para crear tablas sencillas:

ABCDEF		ABCDEF		ABCDEF
ABCDEF		ABCDEF		ABCDEF
ABCDEF		ABCDEF		ABCDEF

La etiqueta PRE puede tener varios atributos opcionales class, id, style, title y uno especial llamado width con el que podemos definir la cantidad máxima de caracteres de cada línea.

Como con cualquier otra etiqueta, podemos definir sus propiedades con CSS y modificar las que tiene por defecto. De esta manera, es posible establecer el tipo de fuente, su tamaño, márgenes, color, etc. El problema con Blogger fue que la distancia entre líneas dentro de esa etiqueta cambió abruptamente agregando una línea adicional, así que si normalmente veíamos esto:

una linea
       otra linea
       otra linea
última línea

Pasamos a ver esto:

una linea

       otra linea

       otra linea

última línea

En este caso no había solución posible pero, en muchos otros, cuando lo que vemos es una gran separación entre dos líneas de texto sin que hayamos dejado esos espacios, lo que debemos verificar es una propiedad CSS llamada line-height que controla la "altura" de las líneas.

Por defecto esta propiedad o no está definida o tiene como valor "normal". Podemos cambiarla usando valores expresados como puntos (pt), pixeles (px) o proporcionales (em). Por ejemplo:

line-height: normal;
line-height: 15px;
line-height: 1.5em;

Cuanto más grande sea ese valor, mayor será la distancia entre dos líneas.