5.1.1.

14 diciembre 2004

Comillas para citas contenidas en bloques

Continuando la movida de posts referentes al correcto uso de las comillas al momento de citar textos, voy a aportar yo también mi granito de arena.

Por cierto, los artículos (de los que tengo conocimiento) que han aportado al tema son:

Curiosamente, ninguno de los artículos (en castellano) explica como manejar al elemento BLOCKQUOTE. El texto delimitado por BLOCKQUOTE es una cita al igual que el delimitado por Q, por lo tanto, las reglas de comillas se aplican de igual manera. Al final de la explicación que dá la Especificación HTML 4.01 (en castellano) sobre este elemento, ésto queda confirmado:

Recomendamos que las implementaciones de hojas de estilo proporcionen un mecanismo para insertar signos de puntuación de citas antes y después de una cita delimitada por un BLOCKQUOTE (…).

Citas: los elementos BLOCKQUOTE y Q

En principio no es un gran drama. Como explican los artículos antes mencionados, usando las propiedades quotes y content ésto se resuelve facilmente.

Tomando como ejemplo el siguiente código HTML:

<blockquote lang="es">
  <p>
    Un elefante se balanceaba sobre la tela de una araña.
    Como veían que resistía fueron a llamar a otro elefante.
  </p>
</blockquote>

El código CSS a aplicar sería:

blockquote p:lang(es) {
  quotes:quotes: '\00AB' '\00BB';
  }
  
blockquote p:before {
  content:open-quote;
  }
  
blockquote p:after {
  content:close-quote;
  }

Pequeñas consideraciones:

  • 00AB y 00BB son las referencias Unicode para las comillas angulares dobles hacia la izquierda y derecha respectavimente. La explicación de estas comillas se encuentra en los otros artículos.
  • Sí, quotes puede ser aplicado a cualquier elemento y es hereditario.

Demasiados parrafos

Aunque todavía existe un ligero problema a resolver: hasta donde tengo entendido, cuando se citan varios párrafos (el caso de BLOCKQUOTE), cada párrafo debe tener su correspondiente comilla de apertura pero no de cierre, con excepción del último párrafo que debe tener tanto de apertura como de cierre.

Algunos estilos tipográficos requieren comillas de apertura que se repiten antes de cada párrafo de una cita que abarca varios párrafos, pero sólo el último párrafo termina con comillas de cierre. En CSS, esto puede lograrse insertando comillas de cierre "fantasmas". La palabra clave no-close-quote disminuye el nivel de las citas, pero no inserta una comilla.

Inserción de comillas con la propiedad content

Luego, la solución que se propone es crear una nueva clase ultimo y asignarla al último párrafo de la cita.

blockquote p:before {
  content: open-quote;
  }
blockquote p:after {
  content: no-close-quote;
  }
blockquote p.ultimo:after {
  content: close-quote;
  }

Jugando a ser incompatible

Como (personalmente) no me interesa ir a editar todas mis citas, tomaré el camino menos compatible.

La última recomendación para el modulo de selectores de CSS3 (CSS3 Selectors) incluye la pseudo clase :last-child para seleccionar al último hijo.

The :last-child pseudo-class represents an element that is the last child of some other element.

:last-child pseudo-class

Para reemplazar a la clase ultimo mencionada antes, el nuevo código CSS entonces sería:

blockquote p:last-child:after {
  content: close-quote;
  }

Para complicarla aún más, en mi caso ultimamente estoy usando el elemento ADDRESS al final de cada BLOCKQUOTE, por lo que el código anterior no me serviría. Para tal caso se puede recurrir a la pseudo clase :last-of-type para seleccionar el último párrafo.

The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.

:last-of-type pseudo-class

El nuevo código CSS sería

blockquote p:last-of-type:after {
  content: close-quote;
  }

Tengamos en cuenta que sí es el último de su clase, tambíen sería el final del texto citado.

Pequeñas observaciones
IE no soporta ninguno de estos dos selectores (ni tampoco generación de contenido que es el tema del post).
:last-child funciona en Mozilla pero no en Opera.
:last-of-type no funciona en ninguno de los anteriores.

Demasiados elementos

Ésto ya viene más a cuento de duda. ¿Cómo se supone que se manejan las citas cuando se trata de listas? ¿Una comilla delante de cada elemento LI ó una única delante del elemento UL?

Personalmente preferiría no agregar nada. Me estuve rebanando la cabeza y no encontre la manera de agregarlas correctamente en un caso como éste:

<blockquote>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
	
  <p>Algo de texto</p>
</blockquote>

La idea era llegar a un código tan genérico que pueda lidiar con esos dos elementos sin importar el orden, pero como finalmente no lo logré es que deseo que no sean necesarias.

�Y por casa como andamos?

Como Blogger tuvo la gracia de borrar mi anterior archivo CSS, las comillas cuando uso Q son las incorrectas. Mi error, mi error. Por otro lado, en el caso de BLOCKQUOTE, hasta que last-of-type sea soportado no hay mucho que pueda hacer.

Powered by Blogger