Comillas automÃ¡ticas en las citas con CSS y Javascript

0 COMENTARIOS - Publicado hace 44 meses - Clasificado en:

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>, asignarle una clase a la comilla de inicio y otra a la comilla final. Algo así:

âSpeech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.â

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 = '“' + TextoEntreComillas + '„';
	}
}

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. Por ejemplo:

Ejemplo de uso: