Hola de nuevo :
Estuve trabajando en algunos detalles (p.e. el salto de línea) para mejorar el código anterior. Aún tengo problemas por resolver, como el
line-height o el uso de
em. Este último se arreglaría fácil: como el navegador mide basicamente en pixeles, convertimos todo a
px y nos evitamos cualquier desfasaje. Pero el
zoom de texto de
IE no los modifica, y si la palabra destacada con borde está en medio de un texto largo, no debemos limitar al usuario a un tamaño fijo de caracteres.
Por alguna razón, al usar
pt en el
body el
zoom tampoco funciona, así que 'resolví' el asuno con "%". en
IE, el porcentaje se toma evidentemente de los valores por omisión; pero en otros ¿por ciento de qué sería?, ¿es válido?, ¿o es mejor dejarlo sin nada?, entonces ¿
em de qué sería?.
Les dejo mis dudas existenciales junto con el código mejorado
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> TEXTO CON BORDE.</title>
<style type="text/css">
body{font-size:100%; font-family:"times new roman", serif;}
#contenedor {position:relative;}
#texto {position:absolute; height:3em; color:#000; background:#f00; padding:5px; font-weight:900; font-size:2em;}
#texto font {position:relative; top:0; left:0; z-index:0; font-weight:900; font-size:1em;}
#texto .ante {font-size:0;}
#texto font .arrIzq {display:inline; position:absolute; top:-1px; left:-1px; z-index:-1; color:#0f0; }
#texto font .abaDer {display:inline; position:absolute; top:+1px; left:+1px; z-index:-1; color:#0f0; }
</style>
</head>
<body>
<h2>Texto con borde sin filtro glow.</h2>
<div id="contenedor">
<div id="texto">
1234
<font>QWERTYUIOP<span class="arrIzq">QWERTYUIOP</span>
<span class="abaDer">QWERTYUIOP</span></font> <br />
<span class="ante"> </span>
<font>ASDFGHJKL<span class="arrIzq">ASDFGHJKL</span>
<span class="abaDer">ASDFGHJKL</span></font>
ZXCV
</div>
</div>
</body>
</html>
Tenía hecho otro que usaba 4 capas para rodear el texto, lo que permite "aumentar el grosor del borde" en más de
1px; pero lo perdí en un cambio de máquina. No es tan grave porque no era más que otra versión usando el mismo criterio de las anteriores.
Otra forma de hacerlo está en
Texto con sombra
esta vez para crear un efecto de sombra.
saludos
furoya