Fonte TrueType de QR Code — crie QR Codes usando apenas uma fonte

 (qr.jim.sh)
4 pontos por GN⁺ 3 시간 전 | 2 comentários | Compartilhar no WhatsApp
  • Uma fonte TrueType/OpenType que transforma texto entre colchetes em QR Code, permitindo inserir QR Codes em documentos sem gerar imagens
  • A conversão é feita pelas regras OpenType dentro da fonte, enquanto o texto fora dos colchetes é exibido normalmente como texto latino
  • Como o bloco do QR Code também permanece como texto, é possível copiar e colar, salvar em texto puro e posicioná-lo inline junto a frases comuns
  • Como o navegador decide as quebras de linha antes do shaping, o QR Code pode ser dividido em várias linhas em pontos como espaços, pontos e barras
  • Para exibição estável em HTML, o bloco entre colchetes deve ser envolvido por um contêiner com white-space: nowrap; ou display: inline-block; aplicado

Como a fonte cria QR Codes

  • Jim's TrueType QR Code Font é uma fonte TrueType/OpenType real e renderiza como QR Code o texto digitado entre colchetes, como em [hello]
  • A geração do QR Code é tratada pelas regras OpenType dentro da fonte, sem necessidade de gerar uma imagem separada nem de uma etapa de pré-processamento
  • O texto fora dos colchetes permanece como texto latino comum legível
  • Dentro dos colchetes, deve-se usar ASCII imprimível
  • O comprimento suportado por cada fonte é o seguinte
    • QR Font 1-L: até 17 caracteres por bloco
    • QR Font 2-L: até 32 caracteres por bloco
    • QR Font 3-L: até 53 caracteres por bloco
    • Plain Sans: sem parsing de QR
  • O texto comum é exibido com uma fonte derivada da Liberation Sans

QR Codes que permanecem como texto e cuidados de exibição

  • Como o QR Code permanece em formato de texto, é possível copiar e colar o bloco de QR renderizado como caracteres comuns, salvá-lo como texto puro ou misturá-lo inline com texto latino
  • O mecanismo de layout do navegador realiza a quebra de linha com base no texto Unicode antes do shaping
    • Se houver caracteres onde a quebra de linha é possível, como espaços, pontos e barras, e o texto chegar ao fim do contêiner, o QR Code pode ser dividido em várias linhas
    • Em HTML, para renderização estável, o bloco entre colchetes deve ser envolvido por um contêiner com o estilo white-space: nowrap; ou display: inline-block; aplicado
  • Download e código-fonte

Leituras relacionadas

2 comentários

 
xguru 3 시간 전

Isso é bem legal. Acho que pode ser útil algum dia.
Fico pensando se não daria para adotar no GeekNews, mas não sei qual seria um uso adequado.

As coisas adequadas para base textual estão sendo adotadas no GeekNews continuamente.

Datatype - fonte variável que converte texto em gráficos
Google divulga a fonte de emoji em preto e branco Noto Emoji
 
GN⁺ 3 시간 전
Comentários no Lobste.rs

  • Gostei da forma como mostra onde o conteúdo é codificado no QR code. Fica visível o fluxo começando no canto inferior direito, movendo-se em zigue-zague para cima e para baixo, e sendo preenchido da direita para a esquerda
    Ainda assim, se esse era o objetivo, talvez os marcadores de posição/alinhamento/temporização pudessem ser preenchidos logo em [ em vez de esperar por ], o que teria mostrado melhor o processo de composição. Claro, também entendo que processar em ] evita estados intermediários estranhos ou que valores longos demais sejam confundidos com código

  • Muito legal. Recentemente, um QR code que eu usava em um negócio foi sequestrado por trás de um gerador de QR code pago
    Eu deveria ter tomado mais cuidado, mas foi difícil distinguir entre um codificador de QR em JavaScript baseado na web e um serviço fraudulento de QR. Seria bom se alternativas abertas como esta conseguissem se sair melhor em SEO, para que mesmo pessoas que não precisam necessariamente entender muito do assunto possam evitar golpes

    • Normalmente pesquiso por uma biblioteca JavaScript para gerar QR e depois entro na página de demo pelo GitHub :p
    • Nunca escaneei um QR code. Se um restaurante diz que preciso de QR code para ver o cardápio, eu simplesmente vou embora
    • Dá para usar o CyberChef do GHCQ. É uma página web que pode ser baixada

  • Ah, pensando que OpenType é Turing-completo, eu devia ter previsto isso

    • Desafio: dar um jeito de rodar Doom em OpenType

  • Seria bom ter um botão temporário para permitir que o site defina sua própria fonte por um momento

  • Não sei se sou só eu, mas parece que no mobile não funciona. Não importa qual fonte eu escolha na caixa de seleção, ambas aparecem como texto normal
    Testado no Brave do Android

    • Para referência, funciona bem no Safari do iOS
    • Funciona no Firefox do Android. Não tenho Chrome para testar

  • Parece que a função de copiar o texto do conteúdo do QR está quebrada no Chrome. Pessoalmente, tirando o legal hack com OpenType, isso me parece a maior vantagem, mas se eu seleciono e copio o próprio QR, só sai o colchete de fechamento

    • Vi o mesmo comportamento. Parece estar mais relacionado ao intervalo que o duplo clique seleciona
      Se você arrastar a seleção para garantir que inclua o QR inteiro, o texto completo também será copiado