Fuente TrueType QR Code: crear códigos QR solo con una fuente

 (qr.jim.sh)
4 puntos por GN⁺ 3 시간 전 | 2 comentarios | Compartir por WhatsApp
  • Una fuente TrueType/OpenType que convierte en códigos QR el texto entre corchetes, permitiendo insertar códigos QR dentro de documentos sin generar imágenes
  • La conversión la manejan las reglas OpenType dentro de la fuente, y el texto fuera de los corchetes se muestra tal cual como texto latino normal
  • Como los bloques de código QR también siguen siendo texto, se puede copiar y pegar, guardar como texto plano y colocar en línea junto con oraciones normales
  • Como el navegador decide los saltos de línea antes del shaping, un código QR puede partirse en varias líneas en puntos como espacios, puntos o barras /
  • Para que se vea de forma estable en HTML, el bloque entre corchetes debe envolverse en un contenedor con white-space: nowrap; o display: inline-block;

Cómo la fuente genera códigos QR

  • Jim's TrueType QR Code Font es una fuente TrueType/OpenType real que renderiza como código QR el texto escrito entre corchetes, como [hello]
  • La generación del código QR se resuelve mediante reglas OpenType dentro de la fuente, por lo que no hace falta crear imágenes ni hacer preprocesamiento
  • El texto fuera de los corchetes permanece como texto latino normal y legible
  • Dentro de los corchetes debe usarse ASCII imprimible
  • La longitud compatible por fuente es la siguiente
    • QR Font 1-L: hasta 17 caracteres por bloque
    • QR Font 2-L: hasta 32 caracteres por bloque
    • QR Font 3-L: hasta 53 caracteres por bloque
    • Plain Sans: sin análisis QR
  • El texto normal se muestra con una tipografía derivada de Liberation Sans

Códigos QR que siguen siendo texto y precauciones de visualización

  • Como el código QR se mantiene como texto, el bloque QR renderizado puede copiarse y pegarse como caracteres normales, guardarse como texto plano o mezclarse en línea con texto latino
  • El motor de maquetación del navegador realiza los saltos de línea sobre el texto Unicode antes del shaping
    • Si hay caracteres donde se permite un salto de línea, como espacios, puntos o barras /, y el texto llega al final del contenedor, el código QR puede dividirse en varias líneas
    • En HTML, para una renderización estable, el bloque entre corchetes debe envolverse en un contenedor con estilo white-space: nowrap; o display: inline-block;
  • Descargas y código fuente

Lecturas relacionadas

2 comentarios

 
xguru 3 시간 전

Esto está bueno. Siento que algún día va a servir para algo.
Me pregunto si valdría la pena incorporarlo a GeekNews, pero no sé cuál sería un caso de uso adecuado.

Seguimos incorporando en GeekNews cosas que funcionan bien con texto.

Datatype: una fuente variable que convierte texto en gráficos
Google presenta Noto Emoji, una fuente de emojis en blanco y negro
 
GN⁺ 3 시간 전
Comentarios en Lobste.rs

  • Me gusta la forma en que muestra dónde se codifica el contenido en un código QR. Se ve el flujo que empieza en la parte inferior derecha, se mueve en zigzag hacia arriba y hacia abajo, y se va llenando de derecha a izquierda.
    Dicho eso, si ese era el objetivo, creo que se habría visto mejor el proceso de construcción si los marcadores de posición/alineación/temporización se llenaran de inmediato con [ en vez de esperar a ]. Claro, también entiendo que procesarlo con ] evita estados intermedios raros o que valores demasiado largos se confundan con el código.

  • Genial. Hace poco el código QR que usábamos para un negocio fue secuestrado en una estafa detrás de un generador de códigos QR de pago.
    Deberíamos haber tenido más cuidado, pero era difícil distinguir entre un codificador QR web en JavaScript y un servicio QR fraudulento. Ojalá opciones abiertas como esta hagan mejor SEO, para que también quienes no necesariamente tienen que saber mucho puedan evitar estafas.

    • Normalmente busco una biblioteca JavaScript para generar QR y luego entro a la página demo desde GitHub :p
    • Nunca he escaneado un código QR. Si un restaurante dice que necesito un código QR para ver el menú, simplemente me voy.
    • Puedes usar CyberChef de GHCQ. Es una página web que se puede descargar.

  • Ah, considerando que OpenType es Turing completo, debí haberlo esperado.

    • Reto: lograr de alguna manera ejecutar Doom en OpenType.

  • Estaría bueno que hubiera un botón temporal que permita al sitio configurar su propia fuente por un rato.

  • No sé si soy solo yo, pero parece que no funciona en móvil. Sin importar qué fuente elija en el selector, ambas se ven como texto normal.
    Lo revisé en Brave para Android.

    • Como referencia, en Safari de iOS funciona bien.
    • En Firefox para Android funciona. No tengo Chrome, así que no pude comprobarlo.

  • Parece que en Chrome está rota la función para copiar el texto del contenido del QR. Personalmente, aparte del genial hack de OpenType, esto me parece su mayor ventaja, pero si selecciono el QR en sí y lo copio, solo sale el corchete de cierre.

    • Vi lo mismo. Parece más bien un problema con el rango que selecciona el doble clic.
      Si arrastras la selección para asegurarte de incluir todo el QR, también se copia todo el texto.