Come visualizzare caratteri unicode speciali usando il carattere monospaziale in HTML con larghezza del personaggio conservato

Question

sto usando pre Elemento da visualizzare un po 'di testo tra cui speciali caratteri Unicode (⚡ ⚑ ▶ ◀ ⁋). Ho notato che i browser rendono questi personaggi speciali più larghi di quelli normali, occupando più spazio orizzontale.

Questo può essere facilmente visto qui: https://gist.github.com/968b5c22cce14909cf27Entrambe le righe hanno 20 caratteri ma notano che prima è più lungo (pixel dello schermo).

C'è un modo (CSS) per forzare i pre -elementi (o altri elementi con carattere monospaziale applicato) per avere una larghezza del carattere davvero fissa?

Ho controllato Chrome e Firefox ed entrambi ampliano la larghezza di personaggi speciali.

Answer 1

Il motivo è che alcuni dei personaggi mancano dal primo carattere elencato nel font-family Dichiarazione applicata. Verranno quindi visualizzati alcuni altri caratteri nel sistema o viene mostrato alcuni indicatore di carattere non rappresentabile.

Ad esempio, il primo personaggio è presente solo in una manciata di caratteri, vedihttp://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm(che non copre tutti i caratteri ma la maggior parte dei caratteri che probabilmente le persone hanno sui loro computer).

Anche se gli altri caratteri utilizzati sono font monospaziali, potrebbero avere diverse larghezze anticipate per i personaggi. Per esempio, Everson Mono ha una larghezza leggermente più piccola di Dejavu sans mono. Essere monospace significa proprio questo all'interno del carattere, tutti i personaggi hanno la stessa larghezza anticipata.

Quindi dovresti usare un singolo carattere che contiene tutti i personaggi di cui hai bisogno. Per questa raccolta di personaggi, i due caratteri sopra menzionati sono probabilmente gli unici caratteri monospatici distribuiti pubblicamente che li contengono tutti. Bene, c'è Unifont, ma è un carattere bitmap con un design molto grossolano; Potrebbe sembrare tollerabile in dimensioni 12pt o un po 'più grande.

Answer 2

Non è il browser che sta espandendo i personaggi, è la definizione del carattere stesso. Dubito che esista un veramente Carattere monospaziale che include tutti questi personaggi e li definisce tutti alla stessa larghezza, ma è quello che dovresti cercare. Vedere questa domanda Per maggiori dettagli sul perché questo probabilmente non è disponibile.