Cómo insertar el símbolo de copyleft con CSS y HTML

Si alguna vez has necesitado incluir el símbolo de copyleft (©) en alguna sección de tu página o en algún post, te habrás encontrado con que, al contrario de lo que ocurre con el símbolo de copyright (©) o de marca registrada (®), no cuenta con ninguna entidad HTML que lo represente. Un enojoso contratiempo para aquellos que ofrecemos nuestros contenidos bajo licencia libre y que, en algún momento, nos parezca oportuno hacer uso de este icono.

Es lo que le ha ocurrido a un servidor al que, dentro del reciente rediseño de este sitio, le pareció curioso acompañar el aviso a pie de página (footer) con esta indicación gráfica. Pero parecía que sólo sería posible echando mano de imagen, y no de forma ‘limpia’, es decir con líneas de código, que es lo que pretendía.

Sin embargo, tras pasarme un rato buscando por la web, encontré un hilo muy interesante en el que se describen algunos métodos para paliar esta deficiencia. Yo me he quedado con la fórmula más sencilla, que consiste en añadir unas simples líneas a tu archivo CSS y luego ya ejecutar una sencilla fórmula HTML: una llamada al estilo, yo he optado por <span> (también puede ser <p>, <div> u otras), y luego, dado que el símbolo de copyleft no deja de ser el de copyright al revés, pues directamente éste, el CSS ya se encarga de ‘darle la vuelta’.

Las líneas que hay que incluir en el CSS son éstas:

.copy-left {
display: inline-block;
text-align: right;
margin: 0px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

Y, donde quieras que aparezca el símbolo:

<span class="copy-left">©</span>

Con este coqueto resultado:

© Manuel M. Almeida

Y ya está, capricho satisfecho 😉

NOTA: El truco puede ser un poco viejuno, ya que la entrada en el hilo donde lo encontré es de 2013, pero yo no he podido encontrar nada mejor. Si conoces alguna otra fórmula, por favor compártela en los comentarios. Gracias.

[This post is also available in English]