Cómo mostrar caracteres unicode especiales que usan fuente monoespacial en HTML con ancho de personaje preservado
https://stackoverflow.com/questions/9351689
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando pre elemento para mostrar algún texto que incluye caracteres unicode especiales (⚡ ⚑ ▶ ◀ ⁋). Noté que los navegadores hacen que estos caracteres especiales más amplios que los regulares, ocupen más espacio horizontalmente.
Esto se puede ver fácilmente aquí: https://gist.github.com/968b5c22cce14909cf27Ambas líneas tienen 20 caracteres, pero observe que el primero es más largo (píxeles de pantalla).
¿Hay alguna manera (CSS) para forzar los elementos previos (u otro elemento con fuente monoespacial aplicada) para tener un ancho de carácter realmente fijo?
Revisé Chrome y Firefox y ambos expanden el ancho de los personajes especiales.
Solución
La razón es que algunos de los personajes faltan desde la primera fuente enumerada en el font-family Declaración que se aplica. Por lo tanto, se mostrarán algunas otras fuentes en el sistema, o se muestra algún indicador de carácter no representable.
Por ejemplo, el primer personaje está presente solo en un puñado de fuentes, verhttp://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm(que no cubre todas las fuentes sino la mayoría de las fuentes que las personas probablemente tienen en sus computadoras).
Incluso si las otras fuentes utilizadas son fuentes monoespaciales, pueden tener diferentes anchos de avance para los personajes. Por ejemplo, Everson mono tiene un ancho un poco más pequeño que Dejavu sin mono. Ser monoespacio significa solo eso Dentro de la fuente, todos los personajes tienen el mismo ancho de avance.
Por lo tanto, necesitaría usar una sola fuente que contenga todos los personajes que necesita. Para esta colección de personajes, las dos fuentes mencionadas anteriormente son probablemente las únicas fuentes monoespaciales distribuidas públicamente que las contienen todas. Bueno, hay uniforme, pero es una fuente de mapa de bits con un diseño muy grueso; Puede parecer tolerable en tamaño de 12 puntos o algo más grande.
Otros consejos
No es el navegador el que está expandiendo los personajes, es la definición de fuentes en sí. Dudo que exista un realmente Fuente monoespacial que incluye a todos estos personajes y los define a todos al mismo ancho, pero eso es lo que deberías estar buscando. Ver esta pregunta Para obtener más detalles sobre por qué esto probablemente no esté disponible.
