Dropcaps-Sifr

Me da una pereza horrorosa escribir... pero... si lo dejo, dejo morir el blog. Y aún es pronto :)

A la vista está que he cambiado de plantilla (es la "BlogTimes" de Milo), aunque el resultado para IE es el mismo de siempre: desastre en cuanto entras en comentarios, je... para qué contar ya de IE...

Con la de chismes que tengo por aquí, me ha resultado bastante complicado insertar la nueva plantilla, pero-ya puestos-decidí que si quería algo distinto, debía ser con Sifr. Así que, quienes tengáis flash, podréis ver los títulos de las entradas, así como los de sidebares y footer, en Sifr. Quienes, además, tengáis Firefox, podréis ver las dropcaps de las entradas, también en flash-Sifr (En IE no se ven).

Conseguir las Dropcaps-sifr me ha costado mucho trabajo, sobre todo porque partía de cero (no conozco ninguna página con Dropcaps-Sifr). Pero, mejor o peor, he conseguido insertarlas, así:

.- Scripts:
Supongamos que ya tenemos nuestro script-Sifr:

<script language='javascript' src='http://.../fonts_sifr.js' type='text/javascript'/>

Y que tenemos otro script para sustituir el texto por la fuente-flash que nos interesa ver, además de darle un estilo:

<script type='text/javascript'>

if(typeof sIFR == "function"){

sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"http://.../Medici_Text_fulllatin.swf", sLinkColor:"#678566", sBgColor:"#900", sHoverColor:"#CCCCCC"}));
};
</script>

Aquí colocamos las URL de nuestra fuente flash, el color de fondo que tendrá, el color del texto y el sitio donde aparecerá el reemplazo: en este caso le indicamos a Sifr que habrá de reemplazar nuestros "h2" en la plantilla (títulos de entradas, por lo general).

Ahora, si queremos también unas Dropcaps con SIFR, comenzaremos por darles un "nombre", para que Sifr pueda identificarlas y reemplazarlas. Por ejemplo "h7#first-letter":

sIFR.replaceElement(named({sSelector:&quot;h7#first-letter&quot;, sFlashSrc:&quot;http://.../Acorn_Initials_fulllatin.swf&quot;,

sColor:&quot;#678566&quot;, sLinkColor:&quot;#678566&quot;, sBgColor:&quot;#ffffff&quot;, sHoverColor:&quot;#333333&quot;, nPaddingTop:0, nPaddingBottom:0, sCase: &quot;lower&quot;, sFlashVars:&quot;textalign=left&quot;}));

De manera que, ahora, este segundo script nos queda así:

<script type='text/javascript'>



if(typeof sIFR == &quot;function&quot;){

sIFR.replaceElement(named({sSelector:&quot;h2&quot;, sFlashSrc:&quot;http://.../Medici_Text_fulllatin.swf&quot;, sLinkColor:&quot;#678566&quot;, sBgColor:&quot;#900&quot;, sHoverColor:&quot;#CCCCCC&quot;}));

sIFR.replaceElement(named({sSelector:&quot;h7#first-letter&quot;, sFlashSrc:&quot;http://junioscripts.googlepages.com/Acorn_Initials_fulllatin.swf&quot;,
sColor:&quot;#678566&quot;, sLinkColor:&quot;#678566&quot;, sBgColor:&quot;#ffffff&quot;, sHoverColor:&quot;#333333&quot;, nPaddingTop:0, nPaddingBottom:0, sCase: &quot;lower&quot;, sFlashVars:&quot;textalign=left&quot;}));
};
</script>

.- CSS: Ahora, tenemos que darle un estilo a esa Dropcap-first-letter. Algo parecido a ésto:

h7#first-letter{margin:0 0 0 25px;padding:0 25px 0 10px;font-style:italic;color:#666;font-size:70px;}

Cada quien, habrá de arreglarla a su manera. Lo siento... pero en cuestión de CSS, todos estamos a solas con nuestras plantillas, je...

.- Sifr:
Nos queda por "ordenar" a Sifr dónde y cuándo tiene que reemplazar (podéis hacerlo dentro del CSS de la plantilla). Algo como ésto:

.sIFR-flash{visibility: visible !important;margin:0;}
.sIFR-replaced{visibility:visible !important;}
span.sIFR-alternate {position: absolute;left: 0;top: 0;width: 0;height: 0;display: block;
overflow: hidden;}

.sIFR-flash + div[adblocktab=true] {display: none !important;}

.sIFR-hasFlash h2{visibility:hidden;letter-spacing:-9px;font-size:35px;}
.sIFR-hasFlash h7#first-letter{visibility:hidden;letter-spacing:-9px;font-size:55px;}

.sIFR-hasFlash h7#first-letter {
letter-spacing: -4px;
visibility: hidden;
font-size: 55px;
}

Aquí, además de marcarle la posición (absoluta), le estamos diciendo el texto que ha de reemplazar y las alternativas en cuanto a parámetros de ancho, alto, etc...
Fijáos que, especificamos estos parámetros para los dos reemplazos que estamos poniendo de ejemplo: "h2" y "h7#first-letter".

.- HTML:
Con ésto terminamos: Ahora debemos llamar al Sifr a través de la tag que le hemos "enseñado" a reemplazar", así:

<h7 id="first-letter">P</h7>texto..

Hay alguna otra alternativa, con el Beta de Sifr pero, de momento, no me ha dado buenos resultados por aquí...