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:
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 (on-breaking space o no-break space) que es el llamado hard space o fixed space (espacio fijo).
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 (on-breaking space o no-break space) que es el llamado hard space o fixed space (espacio fijo).
<p>Hola Adios</p>
Se verá:
Hola Adios
También podemos usar otra variante, escribiendo   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:
Hola Adios
También podemos usar otra variante, escribiendo   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:
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 (	) 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:
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.
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.
17 comentarios:
¡Así da gusto aprender! Esto me va a servir para un problema que estoy teniendo con Blogger desde la actualización: si publico una entrada y me doy cuenta de que algo no está bien, la edito y la vuelvo a publicar, todos los espacios entre párrafos desaparecen y aparece un único bloque de texto del principio al final; y la única solución que he encontrado es copiar todo al portapapeles, borrar la entrada y volverla a publicar desde cero. Pero con PRE supongo que se puede "engañar" a Blogger forzándolo para que no cometa ese fallo, otra aplicación para la etiqueta...
Mandelrot, asegúrate de que en la Configuración, tienes habilitados los saltos de línea, el problema puede estar ahí.
JMiur si hubiese tenido algún profesor que se pareciese a ti, estaría licenciada en un par de carreras, probablemente. Bueno probablemente no, pero ya me entiendes :D
Gracias.
Gracias.
Me interesó lo de las tablas.
Ahora bien, ¿luego de PRE va esto ?
¿O como queda el CSS para que el post tenga dos columnas y cada columna tenga la misma cantidad de lineas, hasta que aparece el leer mas?
Uso blogger.
Gracias
Hola!!!hace poco que he creado el blog y la verdad es que no se mucho.. he estado leyendo varios post porque intento poner imagenes en movimiento o un reloj...en fin poner algo alegre el blog pero no se como hacerlo, intento seguir las instrucciones que poneis pero no lo consigo(es que soy un poco torpe lo reconozco jaja), si hay alguno de los post que me haya pasado o donde puedo leerlo os lo agradeceria mucho,mi mail es mismmap@hotmail.com. perdon por la molestia y muchas gracias
Peque
Mandelrot: es verdad, primero que nada verifica las opciones de configuración. Algo así me ocurrió al probar el nuevo editor de Blogger, no pude restaurar las opciones y tuve que eliminar el post borrador.
La Bloguería: una exageración ¿Profesor? Never jamais :D
Gabriela: por lo que entiendo de tu comentario, en realidad te convendría usar una tabla y no PRE porque esta es una etiqueta limitada.
Excelente post. Soy asiduo de la etiqueta Pre para simular el intérprete de comandos de Linux y la verdad que hace un par de días noté interlineados anormales en algunos códigos publicados.
Como dices, parecen haberlo "solucionado" xD.
Parece ... pero ... nadie sabe como seguirá este asunto de Blogger :D
hola,
quisiera prenguntar como hacer una barra como la de blogger que apares en el principio del blog ,yo le quite esa barra a mi blog pero quiero poner una mia asi que responde profa ...mi blog es quenotas.blogspot.com
JMiur,
Me comenta una amiga que está teniendo problemas con los saltos de línea. Blogger parece no tomarlos en cuenta.
Y eso que no ha usado el nuevo editor, sino el tradicional (leía por ahí que el nuevo está teniendo problemas en ese aspecto).
¿A qué se debe?
Todo "se pega" en un solo GRAAAAN párrafo... y resulta frustrante. La pobre se va a hechar a llorar (naah, pero sí desespera XD).
Un saludo.
Oops... releo el comentario #1... ¡y es exactamente el mismo caso!
;) Comentario #2: ¡Comprobado y nada!
Avaro, para quitar la navbar de Blogger fíjate acá.
Fernando:
Tema complicado de resolver y es extraño que ocurra sólo en ciertos blogs. No encuentro nada en la web que hable del tema hasta ahora.
¿Usando el editor de Blogger Draft pasa lo mismo?
Te cuento que a MÍ me ocurrió con el de Blogger Draft- pero a mi amiga le ocurría, en principio, en el editor normal.
O_O;; Luego utilizó el otro tratando de resolver el problema y pues... IGUAL.
¿Qué estarán haciendo estos de Google? Hmmm...
Amigo, los hay que NACEN. es así.
Con el editor de Blogger Draft tuve problemas pero bueno, es lógico y está perdonado pero el problema se "transfirió" al otro y tuve que eliminar el post. Por suerte no afectó al resto.
No se me ocurre nada que pueda hacerse, sólo esperar que hay algún tipo de información. Tal vez recurrir a los grupos de Google.
Al percatarme hace tiempo de las limitaciones de blogger, había perdido las esperanzas de anexar a las entradas ejemplos importantes utilizando el verdadero formato del guión, algo como éste. Había pensado en Scribd para respetar el formato. Acabo de realizar algunas pruebas con las etiquetas (pre) y parece que no necesitaré recurrir al servicio de Scribd.
Muchas gracias, JMiur.
Saludos.
Que bueno que te fuera útil. Es cierto, serviría perfectamente para hacer ese tipo de entrada.
Por fin un formulario a lo Wordpress, que lindo y tranquilo es comentar asi ... disculpa xD, me dejé llevar.
Como siempre la explicación está explicada de manera sublime, bastante clara y ejemplificada.
Un saludo, JMiur.
¿Quiere dejar un comentario?
Utilice el formulario adjunto para comunicarse.
Enlaces