¿Una manera de hacer un "outline" a un font?

hey_alan · #1 (**permalink**) 30/12/2010, 01:44

Hola a todos.

Digamos que tengo un título con texto, y la capa donde se encuentra tiene transparencia, y a veces como la image de fondo tiene tonos del mismo color del texto no se alcanza a leer bien.

Me preguntaba si alguien conoce algun método para hacer un "outline" a las letras para que esto no ocurra.

Muchas gracias.

Yoi · #2 (**permalink**) 30/12/2010, 07:12

y porque no haces 2 capas, una con un fondo transparente y la otra, una mas arriba con el texto...

zerokilled · #3 (**permalink**) 30/12/2010, 10:48

¿a traves de javascript?

no creo que sea tan util. tendrias que mirar por otras alternativas como <canvas> (html5) o CSS3. el problema, ninguno de los dos son tecnologias plenamente difundidas. pero si no te es un problema, pues bien. en css3 parace que hay varias propiedades como font-effect u otras propietarias como -webkit-text-stroke. demo

hey_alan · #4 (**permalink**) 30/12/2010, 15:56

Muchas gracias a ambos.

No puedo hacer lo de la capa porque practicamente destrozaría la idea y lo de <canvas> como bien dices, no se ha difundido y firefox (al menos la version que yo tengo) no lo soporta.

Había pensado si habia un modo de hacerlo con algo similar al "Cufon".

Gracias, y espero puedan ayudarme.

Panino5001 · #5 (**permalink**) 30/12/2010, 16:16

Y algo así no te serviría:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style> 
#txt{ font-family:Verdana, Geneva, sans-serif; font-size:24px; font-weight:bold; color:#F00; z-index:10; position:relative} 
</style> 
<script type="text/javascript"> 
function getElementPosition() { 
        var offsetTrail = this; 
        var offsetLeft = 0; 
        var offsetTop = 0; 
        while (offsetTrail) { 
            offsetLeft += offsetTrail.offsetLeft; 
            offsetTop += offsetTrail.offsetTop; 
            offsetTrail = offsetTrail.offsetParent; 
        } 
        return {left:offsetLeft, top:offsetTop}; 
} 
onload=function(){ 
        var shadow=document.getElementById('txt').cloneNode(1); 
        shadow.style.color='#CCC'; 
        shadow.style.position='absolute'; 
        shadow.style.zIndex=1; 
        var pos=getElementPosition.call(document.getElementById('txt')); 
        shadow.style.left=pos.left+2+'px'; 
        shadow.style.top=pos.top+2+'px'; 
        document.body.appendChild(shadow); 
} 
</script> 
</head> 
 
<body> 
<div id="txt">ESTE ES UN TEXTO</div> 
</body> 
</html>

furoya · #6 (**permalink**) 03/01/2011, 08:04

En realidad, para dudas como estas existen los buscadores

html texto color borde OR sombra site:www.forosdelweb.com

(y en la web hay más ejemplos).
Aunque me parece que si el texto no se lee porque su color se confunde con el de fondo, aquí ya hay un problema de diseño. Alguien no lo previó, y cuando el yerro se hizo evidente, en vez de repensar la idea se optó por el parche, que es lo que estás pidiendo y es lo que te estamos ofreciendo.

En fin. Supongamos que no te queda otra que dejar esas imágenes y ese color de títulos, entonces vamos a aprovechar el tema para seguir proponiendo alternativas. Como no tengo idea de dónde lo vas a usar, tiro varios 'genéricos'.

El más común es poner al título un color de fondo (al bloque header o a los caracteres). La ventaja es que funciona en cualquier navegador y no chupa demasiados recursos. La desventaja es que tapa parte del fondo de documento. Una forma de disimularlo es usar texto oscuro, y que su fondo sea semitransparente y claro (o al revés, eso también depende de la imagen), así las letras se destacan y el diseño que está atrás se ve; menos, pero se ve. Funciona mejor si el fondo de documento está fijo y no se desplaza con el contenido. Es lo más parecido a tu caso.

Otra es usar una animación, como que al poner el puntero sobre el título le aparezca el color de fondo para verlo mejor. O que el mismo texto cambie de color, o de colores con alguna secuencia que pueda ser un "adorno", pero que de última sirva para destacarlo.

Hay métodos para sumar, restar o invertir colores entre capas. Son más complejos y menos compatibles, pero ya que estoy también los menciono. Para esto sí se puede usar canvas, pero de momento sólo lo soporta Mozilla.

Un último efecto es el de marquesina; que al desplazar el texto, en algún momento hace visibles las letras.

Sobre ese escript que pusiste, Panino5001, lo que hace es replicar el texto con otro color y ponerlo desplazado a unos pixeles del original. Y en lo personal, me parece mucho código para tan poco. Pero tendría que estudiarlo. Por otro lado, dos capas (o cuatro, según AlvaroX) se pueden poner directamente con CSS.

Dejo algunos enlaces pre-buscados más.

Letras con borde de otro color

Texto con sombra

Letras o imagenes transparentes

Texto transparente en Firefox (como filter chroma)