Fare in modo che il rendering del testo su tela di Firefox sia lo stesso del testo CSS

Question

Ho sperimentato con il tag canvas e Javascript. Ho creato una pagina che prende Tweets dalla timeline pubblica di Twitter e li anima in vista. Funziona usando un elemento canvas in background per l'animazione. Al termine dell'animazione, crea un elemento div con lo stesso testo in alto. Lo faccio in modo che il testo tweet sia selezionabile e che i collegamenti siano selezionabili.

Ora, in Safari, Chrome e persino Opera, il testo su tela e il testo div sembrano quasi identici. Eppure in Firefox, la dimensione del testo è abbastanza diversa da farla 'saltare' nel punto in cui cambia in div.

Qualcuno sa come rendere Firefox rendere il testo uguale sull'elemento canvas e div utilizzando CSS? O si tratta di un'incoerenza di rendering con il motore.

Ho messo la pagina on my website se vuoi vedere cosa intendo.

Ora, per il codice:

Il CSS che sto usando per rendere il div contiene:

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

Per rendere sulla tela che sto utilizzando:

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); 

dove this.scale è un fattore di scala animato che termina esattamente a 20px. Quindi, per ricapitolare, sto usando lo stesso font e finisco alla stessa dimensione di px, eppure Firefox rende il testo diverso tra Canvas e CSS.

(edit) Ecco un esempio di schermata: alt text http://danforys.com/temp/firefox-behaviour.png

prima riga è l'animatrice testo utilizzando tela, seconda linea è il div risultante.

Answer 1

A destra, ho un test case.

Ho creato un elemento div e canvas fianco a fianco con lo stesso testo. Si scopre che il rendering dei font era un'aringa rossa. Ciò che differisce da Firefox è la segnalazione delle larghezze dei caratteri. Il mio visualizzatore di Twitter calcola la larghezza di ogni personaggio usando measureText(). Width e li posiziona di conseguenza. Per qualche ragione, le larghezze dei personaggi su Firefox sono più piccole.

Stranamente, nel caso di test ho misurare due cose:

1. La larghezza totale dell'intero testo
2. La somma delle larghezze di ciascun carattere nel testo

In Chrome , entrambi escono a 399 px. In Firefox, il primo esce come 393px, il secondo a 367px.

Modifica: Il bug è stato chiuso. Mozilla dice it's invalid, continuo a dire che è incoerente con gli altri browser. Dovrò trovare un altro modo per farlo, o abbastanza informazioni per convincere Mozilla che dopo tutto è un insetto. Grazie per l'ascolto comunque!

Answer 2

Non riesco a vedere quella differenza tra Firefox e Chrome (a parte la velocità ...).

Hai provato a non utilizzare strokeText? Penso che il testo sia di solito reso solo usando compilando -operazioni.

Cool app, btw!!