5.1.1. —perdido, buscando el diseño ideal

Comillas para citas contenidas en bloques

Agregando comillas al elemento BLOCKQUOTE

Este post es una versión minimamente reducida de Comillas para citas contenidas en bloques que publiqué en mi anterior blog y la considero más actualizada.

Continuando la movida de anotaciones 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. Cita de la Especificación HTML 4.01 (en castellano), sección Citas: los elementos BLOCKQUOTE y Q:

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 (…).

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:

<blockquote>
  <p> Texto sin sentido
</blockquote>

El estilo a aplicar sería:

blockquote p:lang(es) {
  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.

Demasiados párrafos

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. Cita de Inserción de comillas con la propiedad content:

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.

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.

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

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

Últimas observaciones

  • Internet Explorer no soporta este selector (ni tampoco generación de contenido que es el tema de esta anotación.
  • :last-child funciona en Mozilla pero no en Opera.

Publicado el 14 de diciembre de 2004 en las categorías CSS

© Federico Martín Panicobpm230 (arroba) gmail (punto) com