JMiur [E]

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.

19 comentarios:

Mandelrot  

¡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...

Responder
La Blogueria  

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.

Responder
Gabriela  

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

Responder
Anónimo  

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

Responder
JMiur  

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.

Responder
Jabba  

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.

Responder
JMiur  

Parece ... pero ... nadie sabe como seguirá este asunto de Blogger :D

Responder
Alvaro Gabriel  

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

Responder
Fernandooo1  

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.

Responder
Fernandooo1  

Oops... releo el comentario #1... ¡y es exactamente el mismo caso!

;) Comentario #2: ¡Comprobado y nada!

Responder
JMiur  

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?

Responder
Fernandooo1  

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...

Responder
La Blogueria  

Amigo, los hay que NACEN. es así.

Responder
JMiur  

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.

Responder
Fender Stratokaster  

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.

Responder
JMiur  

Que bueno que te fuera útil. Es cierto, serviría perfectamente para hacer ese tipo de entrada.

Responder
KnxDT  

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.

Responder
Diego Costa Garrido  

Hola, trataré de ser claro y no engorroso.
Tengo esta página de ejemplo : http://www.diegocosta.com.ar/?p=1035
allí hay una tabla que saco de otro programa (swiss perfect) cuando importo como archivo HTML. Desde el navegador la veo bien.
Pero si pego el HTML en el editor de wordpress la veo toda pequeña, y horrible, no como la veo en el navegador.

¿Cómo edito el html para que la etiqueta PRE funcione bien?
En el CSS agregué line-weight: normal pero no se corrige.
Si tenés un mail te mando el HTML con la tabla que quiero pegar.

Espero que me entiendas. Saludos!

Responder
JMiur  

No só l oque hace Swiss Perfect o qué tipo d HTML generá pero, lo que se ve en WP es que la etiqueta PRE carece de estilos CSS así que, seguramente, lo que te falta es buscar eso, copiarlo y pegarlo en la hoja de estilo style.css

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR