Comillas automáticas en las citas con CSS y javascript

0 - , , , - 07/07/2006 10:34:10

En "Swooshy Curly Quotes Without Images" de "24 Ways", se explica como utilizar CSS únicamente (sin necesidad de imágenes) para poner las comillas a las citas. El problema es que tienes que, cada vez que haces una cita y por tanto haces uso de la etiqueta

<blockquote><span class="bqstart">"</span>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.<span class="bqend">"</span>

Esto resulta muy molesto de hacer cada vez que tengamos que citar, si en nuestra web o blog lo vamos a hacer con cierta frecuencia. Para evitar esta molestia, podemos incluir una pequeña función javascript que nos incluya tanto las comillas como su clase correspondiente.

CSS
 
blockquote {
	font: 12px "Lucida Sans Unicode", Verdana, Arial, Georgia;
	color: #555;
	margin-left:40px;
	margin-right:40px;
	padding-left:20px;
	padding-right:20px;
}

.ComillasInicio {
	float: left;
	font-size: 500%;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #FF0000;
	margin-left:-30px;
 }

 .ComillasFinal {
	float: right;
	font-size: 500%;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #FF0000;
	margin-top: -75px;
	margin-right: -30px;
 }
javascript:
 
function EstiloComillas(id) {
	//Recibo todas las citas que haya en la web
	var Citas = document.getElementsByTagName("Blockquote");
	//Por cada una de ellas
	for (k = 0; k< Citas.length; k++) {
	//Defino una función que contiene la cita
	var TextoEntreComillas = Citas[k].innerHTML
	//Le sumo las comillas, cada una con su clase
	Citas[k].innerHTML = '<span class="ComillasInicio">“</span>' + TextoEntreComillas + '<span class="ComillasFinal">„</span>';
	}
}

Con este método únicamente deberemos englobar nuestra cita entre dos etiquetas blockquote y la función en javascript se encarga de las comillas y asignar el CSS correspondientemente. Evidentemente la llamada de la función debería hacerse a la carga de la página.

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha