Por que as fontes não são renderizadas da mesma forma em um navegador e em um terminal?

Question

Para ser mais específico, vamos supor que eu tenha uma fonte monoespaçada com alguns glifos maiores do que a largura normal de caracteres (por exemplo, ícones fontawesome).

Na maioria dos emuladores de terminal, os caracteres maiores simplesmente se sobrepõem ao caractere à direita, enquanto no cromo, por exemplo, caracteres maiores pressionam o restante da linha para criar espaço para ela mesma.

Por que isso? O que está renderizando o texto nesses aplicativos? É o aplicativo em si? É um componente do sistema operacional? Os terminais são especificamente projetados para evitar esse problema?

E a pergunta complementar: existe alguma maneira de fazer o cromo se comportar como a maioria dos terminais, de modo que as fontes monoespaçadas permaneçam monoespaçadas mesmo quando há glifos maiores.

Para fornecer informações básicas, estou trabalhando no hiper , que é basicamente um terminal no chromium, e isso está causando problemas com alinhamento de personagens.

    

Answer 1

A maioria dos aplicativos (incluindo os navegadores) obedece às dimensões dos glifos, conforme definido na fonte. Na verdade, eles provavelmente usam métodos que exibem strings mais longas em uma única etapa (embora eu não esteja ciente dos detalhes). Se alguns dos glifos são um pouco mais largos que o resto, então não é uma fonte inteiramente monoespaçada, é quase monoespaçada com algumas exceções.

Os emuladores de terminal usam um método de desenho especial, eles posicionam cada caractere de forma independente, porque eles precisam forçar os caracteres em uma grade, caso contrário, o layout geral desmoronaria. Você pode especialmente ver isso em ação se escolher uma fonte não monoespaçada (o resultado ficará feio, mas permanecerá alinhado à grade). (Note que konsole pode ser uma exceção, eu vi isso fazendo coisas estranhas.)

Para fazer com que os navegadores se comportem como emuladores de terminal, recomendo que você tente colocar cada caractere separadamente em seu próprio span ou div com position: absolute ou fixed , ou algo semelhante.

    

Answer 2

Os sistemas operacionais fornecem uma série de recursos de desenho de texto que os desenvolvedores podem escolher. Emuladores de terminal geralmente requerem fontes mono espaçadas e a renderização de texto que você vê é um resultado natural dessa restrição. Os navegadores usam instalações mais sofisticadas que permitem fontes proporcionais e muito mais. Isso não significa que muitas opções serão fornecidas ao usuário. A renderização do navegador que você vê normalmente seria preferida. Claro que nem todo mundo vai concordar.

O Chromium pode renderizar o texto como você deseja? Eu duvido, mas você pode verificar as opções de texto.