CSS3 ruota - problemi di rendering in Firefox e Safari

Question

Sto provando a ruotare di una certa lunghezza una riga di testo con la proprietà CSS3 "ruota", con precisione di 1,5 gradi.

-webkit-transform: rotate(1.5deg); 
    -moz-transform: rotate(1.5deg); 
    -ms-transform: rotate(1.5deg); 
    -o-transform: rotate(1.5deg); 
    transform: rotate(1.5deg); 

Il risultato in Chrome (v18) è alla ricerca OK, in Firefox (V10) e Safari (5.1.5), tuttavia sto ottenendo risultati brutti.

Sto usando un font implementato con @ font-face, ma con Arial ho ancora problemi (almeno in Firefox). Vedi esempi di seguito.

Ciò che è veramente strano è che il passaggio a un font di sistema (Arial) in Safari risolve il problema, mentre in Firefox il problema persiste.

Qualsiasi aiuto, soluzione o modifica sarebbe molto apprezzato.

1) Chrome 18/font-family: Calibri/allineamento OK

2) Firefox 10/font-family: Calibri/allineamento brutto

3) Firefox 10/famiglia di caratteri: Arial/allineamento ancora brutto

4) Safari 5.1.5/font-family: Calibri/allineamento brutto

5) Safari 5.1.5/font-family: Arial/allineamento OK

Finora, ho trovato i seguenti thread, ma nessuno di loro dà una spiegazione su come risolvere il problema:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

CSS Transform Rotate letter alignment

Ho anche provato impostando le variabili DirectWrite (per cambiare il rendering dei font), come descritto in questo tutorial: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/, ma i risultati sono gli stessi.

Answer 1

Questo non è qualcosa che è possibile risolvere, dal bug report e altri bit sembra che i produttori di browser sono consapevoli di questi problemi .. ma non vorrei resistere per una soluzione permanente per un po '.

Forse prova a inserire il testo nel proprio contenitore div e a ruotare quello invece del testo direttamente?

Ma IMHO se avete bisogno di questo per lavorare su un sito di produzione, sostituire il testo con un'immagine. Gli utenti utilizzano browser che non supportano la nuova roba CSS3, quindi se è importante o non usarla, o assicurati che degrada bene (funzionale su tutte le piattaforme, ma potrebbe perdere qualche snazz), cioè disabilita la rotazione del testo sui browser che sembra brutto.