Confimación de fuente instalada.

furoya · #1 (**permalink**) 16/01/2005, 08:47

viene de Problema Con Fuente!!!

Resumen del capítulo anterior : aprendiz_82 preguntó cómo mostrar en su página una fuente no instalada en el cliente y mofotrip aprovechó el tema para saber qué fuentes se instalan con el paquete de Windows por omisión. kemie sugirió visitar una encuesta con las fuentes más populares, lo que me recordó un viejo proyecto para "ver" las que están instaladas en la máquina cliente y dar un aviso cuando no se encuentre la que estemos usando en nuestra página.
Ahora, la conclusión.

Ya me pareció demasiado seguir ocupando espacio en el tema de aprendiz_82, por lo que abro uno nuevo que, además, está mejor ubicado.
El siguiente código no es más que una variante del de "encuesta compulsiva", que informa al visitante cuando debe instalar una nueva fuente para ver correctamente la página (esta idea ya se sugirió en algún otro tema).

Código:

<HTML>
<HEAD><TITLE>CONFIRMA  FUENTE INSTALADA. </TITLE>
<SCRIPT>

function buscaFuentes(){
var miFuente = "Arial";	//nombre de la fuente a buscar
try{
var todas = lF.fonts.count;
var lista;
var guarda = new Array();

for (i= 1;i<= todas;i++){ 
fuente = lF.fonts(i);
guarda[i-1] = fuente;
} 
miFuente = miFuente.toUpperCase() ;
lista = guarda.toString()+",";
lista = lista.toUpperCase() ;
confirma = lista.indexOf(miFuente+",")
if(confirma==-1){
descarga = confirm("La fuente "+miFuente+" no está disponible. ¿Desea descargarla?.");
if(descarga) open("http://www.descarga_mi_fuente.htm","DF");
}
//else alert("La fuente "+miFuente+" está disponible");
}
catch(e){ alert("El navegador no permite buscar la fuente "+miFuente+" .") }
}

</SCRIPT>
</HEAD>
<BODY onload="buscaFuentes()">
<h2>Confirma si una fuente no se encuentra disponible.</h2>
En el ejemplo : <font face=arial >Arial</font> <br>
Para <b>IE6</b>.


 <OBJECT id="lF" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>

</BODY>
</HTML>

Por supuesto, adolece de las mismas incompatibilidades que el anterior. Aún no terminé uno que sea -o al menos intente ser- cross-browser o cross-platform, que además cubra el caso en que la fuente sí esté instalada pero el navegador no la reconozca (he viso algunos temas que mencionan ese "bug" en los navegadores o quizá en la fuente).

saudos

furoya

furoya · #2 (**permalink**) 22/01/2005, 11:20

Hola, aquí de nuevo.

es evidente que si no puedo conseguir la lista de fuentes instaladas, no puedo buscar la mía por nombre; así que me resigné a hacer uso y abuso del pensamiento lateral y empecé a buscarla por forma.
No estoy proponiendo una suerte de "inteligencia artificial" con JavaScript; solamente medir algún valor que la difeencie de las otras. Y empecé a probar con el tamaño.

No encontré nada que midiera los caracteres, pero sí hay una forma de medir sus 'consecuencias', y creí que ya tenía resuelto el problema.

En realidad lo hice (en la mayoría de las fuentes), pero solamente para IE5+ [NOTA : recordemos que el código anterior sirve nada más que en la última versión -quizás en 5.5-], cuando lo probé en Firefox falló estrepitosamente.
Creo que intuyo el motivo pero antes de seguir, dejo el código. Éste es una herramienta que genera el JS a pegar en nuestra página, ya que el código será distinto para cada fuente.

Código:


<HTML>
<HEAD>
<TITLE>DETECTA FUENTE INSTALADA.</TITLE>
<script language= "JavaScript">
var alto,ancho,tipo,vFuente;

function mideFuente(){
var tipo=document.formulario.nFuente.value;
document.getElementById("muestra").style.fontFamily = tipo;
ancho = document.getElementById('muestra').offsetWidth;
alto = document.getElementById('muestra').offsetHeight;
document.getElementById('elAlto1').innerText = alto;  
document.getElementById('elAncho1').innerText = ancho;
document.getElementById('laFuente1').innerText = tipo;
document.getElementById('laFuente2').innerText = tipo;
}

function ejemploFuente(Z){
vAlto=parseInt(Z);
vAncho=parseInt(Z.substring(Z.indexOf(',')+1));
vFuente=Z.substring(Z.indexOf('-')+1);
document.getElementById("muestra").style.fontFamily="\""+vFuente+"\"!important";
if((document.getElementById("muestra").offsetHeight==vAlto) && (document.getElementById("muestra").offsetWidth==vAncho)){
alert("Fuente "+vFuente+" instalada.");}
else alert("Fuente "+vFuente+" no instalada.");
}

</script>
<style>
#muestra{position:absolute; top:10px; left:10px; visibility:hidden; background-color:#ffffcc; font-size:16px!important}
</style>
</HEAD>
<BODY>
<form name="formulario">
<h2>Confirma si una fuente se encuentra instalada.</h2>

Elija una fuente de la lista para saber si se encuentra instalada en el sistema:<p>
<select name="selector" onchange="ejemploFuente(this.value)">
<option value="18,51-Arial">Arial
<option value="19,50-Bedini">Bedini
<option value="16,63-Courier">Courier
<option value="19,76-DoggyPrint AOE">DoggyPrint AOE
<option value="19,63-Eclipse">Eclipse
<option value="18,56-Georgia">Georgia
<option value="19,49-Times New Roman">Times New Roman
<option value="18,64-Verdana">Verdana
</select>

<hr>

Para usar el código en una página, ingrese el nombre de una fuente <u>previamente instalada</u>. <input name="nFuente"> <br>
Click en &nbsp<button onclick="mideFuente()">Crear código</button> 
(<input type="checkbox" name="mMuestra" onmousedown="if(this.checked) getElementById('muestra').style.visibility = 'hidden'; else getElementById('muestra').style.visibility = 'visible'" > Ver muestra).<br>
Copie el código verde y pegue entre las etiquetas <tt>&lt;BODY></tt>, antes del documento.
</form>

<tt>&lt;BODY></tt>
<pre style=color:#009900>
&lt;SCRIPT language=javascript>
vAltoQpB=<b><font color="#006600" id=elAlto1>HH</font></b>;
vAnchoQpB=<b><font color="#006600" id=elAncho1>WW</font></b>;
vFuenteQpB="<b><font color="#006600" id=laFuente1>FF</font></b>";
document.write('&lt;span id="Mj5Kf6" style="position:absolute; top:10px;'+
' left:10px; visibility:hidden; font-size:16px!important; font-family:\'<b><font color="#006600" id=laFuente2>FF</font></b>\'!important">'+
'WXil _´&lt;/span>');
if ((document.getElementById("Mj5Kf6").offsetHeight==vAltoQpB) 
&& (document.getElementById("Mj5Kf6").offsetWidth==vAnchoQpB)){
alert("Fuente "+vFuenteQpB+" instalada.");}
else {
descarga=confirm("Fuente "+vFuenteQpB+" no instalada. \r\n¿Desea instalarla?");
if(descarga)open("http://www.mi_sitio/mi_fuente.htm","DF","")
}
&lt;/SCRIPT>
</pre>
<tt>&lt;!--DESDE AQUÍ EL DOCUMENTO --><br>
&lt;/BODY></tt>

<span id="muestra">WXil _´</span>

</BODY>
</HTML>

Lo que hace es meter una serie de caracteres con nuestra fuente dentro de un SPAN y luego medir su alto y su ancho. Al poner ese mismo SPAN en la página que abre nuestra visita, si ésta usa la misma fuente que aquel, debería tener también el mismo tamaño, pero si usa la fuente por omisión, no. Entonces se abre un mensaje de descarga con la sugerencia de instalar la nueva fuente.

Como dije, midiendo todo en px tabaja razonablemente bien ... en IE.

Conseguí un FF, y haciendo algunas puebas (no muchas) observé que en la configuración permite usar distintas medidas para cada familia y -lo más importante- elegir una como referencia para la altura relativa de las demás.

Por supuesto que algo así va a falsear cualquier medida que deba tener nuestro SPAN. Seguramente habrá alguna forma de corregir ésto con CSS, pero yo llego hasta aquí. Ya mencioné que solamente conozco el IE y que nada más uso ese navegador, ni hablar de que nunca usaría una fuente que no tuviera previamente instalada.

Si alquien tiene alguna idea, se los dejo para corregirlo.

saludos

furoya

Nota : el código funcionaba en IExplorer Opera , pero ya no anda.

furoya · #3 (**permalink**) 27/01/2005, 09:55

No sé por qué; pero el editor BBCode me insertó espacios en varias partes del código lo que hacía que no funcionara. Ya lo corregí y espero que dure.

Mi agradecimiento a tksko por avisarme.

saludos

furoya

P.D. : ¿ ya mencioné que odio el BBCode ?

furoya · #4 (**permalink**) 18/01/2007, 14:17

Estas herramientas merecen alguna actualización del código. Por ahora voy a actualizar el tema con descubrimientos, sospechas, ideas y cambios de software.

Ya lo comenté en otro tema, pero lo debí hacer aquí : el objeto de MSIE que captura la lista de fuentes instaladas en Windows tiene un comportamiento 'extraño'. Cada vez que se lo llama intenta conectar la máquina a Internet (si no está en red ya).
Alguien me dirá que esto puede ocurrir porque ese objeto no está en el cliente y debe buscarlo en algún servidor; pero considerando que Microsoft es capaz de poner spyware hasta en los parches de seguridad, no deja de ser preocupante.
Sugiero probarlo desconectados.

El otro asunto tiene que ver con Firefox y el segundo código. Ya mencioné que funciona en IE (también en Opera y seguramente en cualquiera que no tenga el 'invento' de la fuente proporcional), pero se me ocurrió una idea algo ingenua para adaptarlo a FF.

En principio, lo que compara el escript es el ancho y el alto del texto de muestra; y como el 'tamaño relativo' de FF viene por default, la comparación con el 'tamaño real' de los caracteres siempre (o casi) va a terminar en error.
Pero resulta que la fuente no se deforma; es decir, que la relación entre el ancho y el alto se tiene que mantener. Si en vez de usar esos 2 valores usamos la razón

Código:

 width/height

y recortamos la cantidad de decimales, tendría que funcionar; aún con menos precisión, pero tendría...

Critiqué bastante eso de que Firefox modifique la altura de los caracteres en el documento, aunque debí reconocer que en la versión 1.0 (al menos) tenía una suerte de disculpa : un casillero en la configuración para desactivar el invento y hacer que el Firefox se comportara como el resto de los navegadores.
Pero en la versión 1.5 ya no lo encontré. Y no me parece que lo hayan quitado así, nada más. Seguramente comprendieron que podía ser más útil si se activaba desde el código fuente, y agregaron alguna línea propietaria CSS para hacerlo.
Lo importante es que si hay un usuario de Mozilla que la recuerde, la conozca o la encuentre, nos la postee aquí, ya que sería la mejor forma de hacer que la última herramienta funcionase sin hacerle ningún cambio.

Porque mientras desconfiemos del método MSIE, y JS (o mejor CSS) no nos provea de alguna línea semejante a onerror para usar en las fuentes, esto -por el momento- es lo mejor que tenemos.
(modestamente)

Nota : como dije más arriba, ya no anda. Sólo nos queda el objeto de MS.