Los saltos de línea

Por defecto, en Configuración | Formato veremos que tenemos definido algo así:

Convertir saltos de línea Sí No
Si seleccionas "Sí", los retornos forzados únicos introducidos en el Editor de entradas se sustituirán por etiquetas <br /> únicas en tu blog, y los retornos forzados dobles se sustituirán por dos etiquetas (<br /><br />).

Esto, hace que escribir en el editor de entradas sea sencillo; ponemos:

Este es un párrafo ...
... y este es otro ....

y veremos que al publicar la entrada, una línea está debajo de la otra.

Es lo que pasa en Blogger y también en al mayoría de los servicios de este tipo. Es obvio que eso ayuda pero, para quién no está informado de cómo funcionan las páginas webs, puede implicar problemas cuando se intentan hacer cosas diferentes o escribir código HTML de manera directa.

Lo que debemos entender es que los navegadores son bobos porque las computadoras son bobas y sólo hacen lo que nosotros les decimos que hagan así que si queremos que dos párrafos estén en dos líneas diferentes, en realidad, debemos indicárselo explícitamente y Blogger, lo que hace es simplificarnos la tarea, agregando el código extra necesario ya que para que veamos esos dos párrafos anteriores, en realidad, deberíamos escribir lo siguiente:

Este es un párrafo ...<br/>... y este es otro ....

que es lo que veremos si miramos el código fuente de nuestro sitio.

Como decía, el problema surge cuando ponemos otras cosas y escribimos etiquetas en diferentes líneas, allí se agregarán etiquetas <br/> extras, dejando líneas en blanco indeseadas. El caso más evidente son las tablas pero también ocurre con listas y con cualquier otra etiqueta:

<div>este es el párrafo anterior a la lista ...</div>
<ul>
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.

Como se ve, entre los párrafos y los items de la lista se han generado espacios que no son otra cosa que etiquetas <br/> ya que cada item está escrito en una línea diferente. Para eñimianlos y que quede "normal", deberíamos escribir todo eso en una sola:

<div>este es el párrafo anterior a la lista ...</div>
<ul><li>item UNO</li><li>item DOS</li><li>item TRES</li><li>item CUATRO</li></ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO
• item DOS
• item TRES
• item CUATRO

... y este es el párrafo siguiente.

Esto pasará con cualquier código y de allí que muchas veces se diga "escribir todo en una sola línea", justamente, para evitar esos espacios indeseados que incluso, pueden hacer que ciertas cosas no funcionen. Por ejemplo, si usamos la etiqueta style o la etiqueta script en una entrada y escribimos en líneas separadas, no funcionarán en absoluto.

Tanto en el nuevo modelo de editor como en el que está en Blogger Draft, si desplegamos las Opciones de entrada veremos una alternativa que nos permite definir si vamos a utilizar esa configuración en cada post en particular:

Editar los saltos de línea de HTML
Pulsar "Intro" para los saltos de línea
Utilizar etiquetas <br />

Pero también podemos hacerlo de otro modo, creando alguna clase CSS que agregamos a nuestra plantilla y utilizándola para identificar sectores donde no queremos que Blogger inserte saltos de línea automáticos. Le damos un nombre cualquiera y simplemente, le decimos que no los muestre:

.noBR br {display:none;}

Con eso, podríamos escribir algo así:

<div>este es el párrafo anterior a la lista ...</div>
<ul class="noBR">
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

Y los saltos de línea de la lista serían ignorados:

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.