Hacer que Firefox renderice el texto del lienzo de la misma manera que el texto CSS

Question

He estado experimentando con la etiqueta canvas y Javascript. He creado una página que toma Tweets de la línea de tiempo pública de Twitter y los anima a la vista. Funciona mediante el uso de un elemento canvas en el fondo de la animación. Cuando se completa la animación, crea un elemento div con el mismo texto en la parte superior. Hago esto para que el texto del tweet sea seleccionable y se pueda hacer clic en los enlaces.

Ahora, en Safari, Chrome e incluso Opera, el texto del lienzo y el texto div se ven casi exactamente iguales. Sin embargo, en Firefox, el tamaño del texto es lo suficientemente diferente como para hacerlo 'saltar' en el momento en que cambia a div.

¿Alguien sabe cómo hacer que Firefox represente el texto de la misma manera en el elemento del lienzo y div usando CSS? O esto es una incoherencia de renderizado con el motor.

He puesto la página on my website si quiere ver lo que quiero decir.

Ahora para el código:

El CSS que estoy usando para hacer que la div contiene:

line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px; 

para la representación en el lienzo que estoy usando:

this.context.font = this.scale + 'px Georgia'; 
this.context.fillStyle = "white"; 
this.context.strokeStyle = 'white'; 
this.context.fillText(this.text, 0, 0); 
this.context.strokeText(this.text, 0, 0); 

donde this.scale es un factor de escala animado que termina exactamente a 20px. Entonces, para recapitular, estoy usando la misma fuente y terminando en el mismo tamaño de px, pero Firefox representa el texto de manera diferente entre Canvas y CSS.

(editar) Aquí hay una captura de ejemplo: alt text http://danforys.com/temp/firefox-behaviour.png

primera línea es la animación de texto en el uso de lienzo, segunda línea es el div resultante.

Answer 1

Derecho, tengo test case.

Creé un elemento div y canvas uno al lado del otro con el mismo texto. Resulta que la representación de la fuente fue una pista falsa. Lo que difiere con Firefox es el informe de los anchos de caracteres. Mi visualizador de Twitter calcula el ancho de cada personaje usando measureText(). Width y los coloca en consecuencia. Por alguna razón, el ancho de los caracteres en Firefox es más pequeño.

Curiosamente, en el caso de prueba mido dos cosas:

1. El ancho total de todo el texto
2. La suma de las anchuras de cada carácter en el texto

En Chrome , ambos salen a 399px. En Firefox, el primero sale como 393px, el segundo a 367px.

Editar: El error se ha cerrado. Mozilla dice it's invalid, todavía digo que es inconsistente con los otros navegadores. Tendré que encontrar otra forma de hacerlo, o suficiente información para convencer a Mozilla de que, después de todo, es un error. Gracias por escuchar de todos modos!

Answer 2

No puedo ver tanta diferencia entre Firefox y Chrome (aparte de la velocidad ...).

¿Ha intentado no utilizar strokeText? Creo que el texto generalmente se procesa utilizando fill -operations.

Cool app, btw.!