Después de mucho tiempo, volví para releer el tema 2 veces. La primera no me gustó, hice algunos comentarios que siguen siendo válidos pero que merecían ser mejor aclarados. En la segunda pasada me gustó un poco más. Las versiones de referencia al
W3C ya están un poco viejas, pero sirve para mostrar que ante la duda se recurre en primer lugar a los tutoriales. Mis comentarios sobre el
doctype parecen a propósito para que
inforsol ( 
Hola!
) explique la importancia del
DTD en las páginas WEB ( juro que no fue preparado ). La discusión con
Remo:Erdosain ( Hola!
) sobre las FAQs mostró que conviene poner a prueba cualquier afirmación. Y es justamente donde está el motivo para este nuevo mensaje.
Hace poco encontré un código para
Mozilla que me recordó estos 2 párrafos
Cita: ...Todo el problema más más detalladamente implicaría saber sobre los juegos de caracteres sobre los que no tengo la más mínima idea...
Cita: ...ese ejemplo hubiera terminado con todas las dudas. Escribir un unicode que muestre alguno de los símbolos que hay en Wingdings no es exactamente CSS, pero se le acerca bastante a lo que busco...
Y el código es este :
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style>
body{background:black; color:white; }
a{font-size:22pt; color:yellow; }
a:focus { -moz-outline: 1px solid invert; }
a[href^="mailto:"]:before { content: "\2709 \a0" }
</style>
</head>
<body>
<h2>El ícono está escrito con CSS.</h2>
<a href="mailto:[email protected]">mail</a>
<br />
<a href="http://servidor.net">site</a>
</body></html>
Si lo vemos en
FF, delante del enlace de correo aparece un ícono que no está en el
body sino que se agrega con CSS.
Pensé que había encontrado la forma de llamar a una fuente con glifos, y quise probar un método que no usara el seudoelemento
:before, para hacerlo compatible. Pasé el unicode
2709 al decimal
9993 y quedó así
[FONT=Arial Unicode MS', 'Lucida Sans Unicode', 'Times New Roman', 'Arial', 'Tahoma]✉[/FONT]
Pero en
IE el sobre no aparece (sí su caracter de reemplazo). (Nota :ahora ya aparece)
Busqué a qué fuente pertenecían esos íconos, y la más parecida fue IconicSymbolsA, pero no coincidía el orden. No era.
Entonces deduje : "si el
03B1 es una alfa, en las fuentes que llegan hasta ese caracter, es posible que unicode tenga más íconos, que el
IExplorer por alguna razón no los muestre, pero que
Firefox sí -si es que encuentro fuentes con un mapa lo suficientemente grande-".
Hay montones de herramentas como esta, pero a mí se me hizo más fácil escribirla que buscarla (a pesar de que
IE no acepta
innerHTML en las tablas y tuve que escribir código de más para hacerla compatible)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>CARACTERES UNICODE.</title>
<style type="text/css">
body {background:black; color:white;}
#eldiv {font-size:18pt; font-weight:bold; font-family:"Arial Unicode MS", "Lucida Sans Unicode" "Times New Roman", Arial, Tahoma; }
#latabla td{border-width:1px; border-style:solid; padding:2px}
#eltexto{width:80%; height:200px; font-family:"Arial Unicode MS", "Lucida Sans Unicode" "Times New Roman", Arial, Tahoma; }
.elbordeI{border-color: yellow gray yellow yellow; }
.elbordeD{border-color: yellow yellow yellow gray; font-family:"Arial Unicode MS", "Lucida Sans Unicode" "Times New Roman", Arial, Tahoma;}
</style>
<script type="text/javascript">
var car = 8000; //8960
var n_cont = "";
var celdas = 8;
var fuente = "";
var filas = 10;
var filastemp = filas;
var todo = false;
var todotemp = todo;
function otra(){
document.getElementById('lasceldas').disabled='disabled';
document.getElementById("eldiv").style.fontFamily = fuente;
if(!todotemp){
document.getElementById("eldiv").innerHTML = "<table><tbody></tbody></table>";}
//alert(document.getElementById("eldiv").innerHTML)
n_cont = document.getElementById("eldiv").getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].innerHTML;
//alert(n_cont)
for(t=0; t<celdas; t++){
n_cont += "<td class='elbordeI'>&#"+(car*1+t)+";\t</td><td class='elbordeD'>"+(car*1+t)+"\t</td>";
}
var n2_cont = "<table cellspacing='0' id='latabla'><tbody>" +n_cont+ "</tr></tbody></table>";
document.getElementById("eldiv").innerHTML = n2_cont;
car = car*1+celdas*1;
document.getElementById("genera").focus();
repite();
}
function repite(){
if(filastemp > 1){
setTimeout("otra()" , 500);
filastemp -= 1;
todotemp = true;}
else {
filastemp = filas;
todotemp = todo;}
}
function hexADec(){
numero = parseInt(document.getElementById("valor").value,16);
alert
document.getElementById("valor").value = numero;
}
function decAHex(){
numero =(document.getElementById("valor").value*1).toString(16);
document.getElementById("valor").value = numero;
}
function aTexto(){
var texto = document.getElementById("eldiv").getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
document.getElementById("eltexto").value = (document.getElementById("eldiv").textContent) ? texto.textContent : (document.getElementById("eldiv").innerText) ? texto.innerText : "No disponible.\r\nUnavailable.";
}
function agrega(){
var nueva = prompt("Escriba el nombre de una fuente instalada.","Default");
var opcion = document.createElement('option');
opcion.value = nueva;
//alert(nueva)
if(nueva){
var opciones = document.getElementById("fuentes").options.length-1;
opcion.appendChild(document.createTextNode(nueva));
document.getElementById("fuentes").appendChild(opcion);
setTimeout('var opciones= document.getElementById("fuentes").options.length-1; document.getElementById("fuentes").options[opciones].selected = "selected";',100);
fuente = nueva;
}
}
</script>
</head>
<body>
<h2>Muestra caracteres por ASCII. (en decimal)</h2>
<div id="eldiv"><table><tbody></tbody></table></div>
<p>
<nobr><input type="button" value="RESET" onclick="document.getElementById('eldiv').innerHTML='<table><tbody></tbody></table>'; document.getElementById('lasceldas').disabled =false; car =document.getElementById('caracter').value;" />
<input type="button" value="VER" onclick="otra()" id="genera" /> </nobr>
<nobr>Desde : &#<input id="caracter" value="8000" onblur="car=this.value" size="6" />; | </nobr>
<nobr>Celdas/Fila : <select onchange="celdas=this.value" id="lasceldas"><option value="1">1 </option><option value="3">3 </option><option value="4">4 </option><option value="5">5 </option><option value="6">6 </option><option value="8" selected="selected">8 </option><option value="10">10 </option><option value="12">12 </option></select> | </nobr>
<nobr>Filas/Pág. : <select onchange="filas=filastemp=this.value" id="lasfilas"><option value="1">1 </option><option value="3">3 </option><option value="4">4 </option><option value="5">5 </option><option value="6">6 </option><option value="8">8 </option><option value="10" selected="selected">10 </option><option value="12">12 </option></select> | </nobr>
<nobr>Todo ? <input type="checkbox" che cked="checked" onclick="todo = todotemp = (this.checked)? true : false;" /> | </nobr>
<nobr>Fuente : <select id="fuentes" onchange="(this.value=='nuevo')?agrega():fuente=this.value; document.getElementById('eldiv').style.fontFamily = this.value;">
<option value="nuevo" style="background-color:buttonface; font-face:caption; color:ButtonText; text-decoration:underline overline;">Agregar fuente </option><option value="Arial Unicode MS" selected="selected">Arial Unicode MS </option><option value="Lucida Sans Unicode">Lucida Sans Unicode </option><option value="georgia">Georgia </option><option value="wp iconicsymbolsa">WP iconicSymbolsA </option><option value="Tahoma">Tahoma </option><option value="Times New Roman">Times New Roman </option><option value="arial">Arial </option><option value="verdana">Verdana </option><option value="courier new">Courier New </option>
</select> | </nobr>
<nobr> a Hexa<input type="radio" name="DH" onclick="decAHex()" />
a Dec<input type="radio" name="DH" onclick="hexADec()" checked="checked" /> <input id="valor" value="8000" size="6" /> | </nobr>
<input type="button" value="a Texto" onclick="aTexto()" />
</p>
<p>
<textarea id="eltexto"></textarea>
</p>
</body></html>
Habrá que ponerse a buscar si en algún lugar aparecen los dibujos de Symbol o Wingdings; y si no están, por lo menos tenemos algunos signos más para usar en
Mozilla.