Regola CSS per rendere OSX Chrome Print Emoji

Question

Non riesco a ottenere Chrome su OSX per stampare emoji, c'è qualche trucco di css o altro?

Qui ci sono 2 emoji: Quando provo a stampare questa pagina, lo spazio delle emoji è conservato, ma è bianco. Nella stampa di Safari, l'emoji funziona perfettamente.

Ecco uno screenshot di l'anteprima di stampa di questa pagina su Chrome:

Answer 1

Dopo un sacco di dialogo nei commenti della questione, sembra di avere un problema di rendering dei caratteri (forse un bug Chrome). Non penso che questo possa essere risolto con qualsiasi combinazione di HTML, CSS o Javascript.

Vi è, tuttavia, la possibilità di aggirare il problema non utilizzando un font.

è possibile utilizzare un vector image come SVG di avere lo stesso tipo di capacità di scala come un tipo di carattere:

• SVG for THUMBS UP SIGN caratteri Unicode carattere
• SVG for REGIONAL INDICATOR SYMBOL LETTER A caratteri Unicode
• SVG for REGIONAL INDICATOR SYMBOL LETTER T Unicode
• SVG for    Thumbs up sign
• SVG for    Austrian flag

Basta collegarsi all'SVG come immagine e specificare le sue dimensioni in HTML o in CSS secondo necessità.

 

Con un po 'di lavoro, si potrebbe automatizzare la conversione di emoji generati dagli utenti alle immagini utilizzando un dizionario di immagini note e integrare che esce con il sia lo SVG o PNG emoji a FileFormat.Info. Hanno un list of emojis che si potrebbe racimolare (supponendo che non si tratti di una violazione di their terms of service) per PNG e di un SVG per ogni carattere (emoji o altro) che può essere ottenuto dal solo codice carattere. Ad esempio, ecco U + 1f44d ():

http://www.fileformat.info/info/unicode/char/1f44d 

Sarà l'unico collegamento SVG sulla pagina, così si potrebbe fare questo in JS:

var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href; 

Ciò detto,' Sarebbe molto preferibile avere questo ready-made piuttosto che creare da zero. @pandawan's answer suggerendo twemoji sembra promettente.

 

Forse ci è una soluzione CSS-only: Ho anche letto altrove che è possibile stampare correttamente questi caratteri avoiding bold (e forse ogni manipolazione caratteri e sul testo forse solo rendere la dimensione del carattere? più grande?). Questo può dipendere dai font installati sul sistema client.

Answer 2

Ciò è dovuto a un rendering difference between Chrome and Safari, non lo chiamerei un bug dal momento che non credo che il comportamento previsto sia definito ovunque (Firefox ha problemi a rendere anche i tuoi emoji).

Se si desidera un supporto emoji completo e semplice su tutte le piattaforme, è possibile utilizzare twemoji, una piccola libreria sviluppata da Twitter per questa specifica esigenza.