Police TrueType QR Code - créer des QR codes avec une simple police

 (qr.jim.sh)
4 points par GN⁺ 3 시간 전 | 2 commentaires | Partager sur WhatsApp
  • Une police TrueType/OpenType qui convertit en QR code le texte entre crochets ; elle permet d’insérer des QR codes dans un document sans générer d’image
  • La conversion est gérée par des règles OpenType intégrées à la police, tandis que le texte hors crochets reste affiché tel quel en texte latin normal
  • Comme les blocs QR restent du texte, il est possible de faire du copier-coller, de les enregistrer en texte brut et de les placer en ligne avec des phrases ordinaires
  • Comme le navigateur décide des retours à la ligne avant le shaping, un QR code peut se fragmenter sur plusieurs lignes à des endroits comme les espaces, les points ou les slashs
  • Pour un affichage stable en HTML, il faut envelopper le bloc entre crochets dans un conteneur avec white-space: nowrap; ou display: inline-block;

Comment la police génère des QR codes

  • Jim's TrueType QR Code Font est une véritable police TrueType/OpenType qui rend en QR code le texte saisi entre crochets, comme [hello]
  • La génération du QR code est assurée par les règles OpenType de la police, sans création d’image séparée ni étape de prétraitement
  • Le texte hors crochets reste un texte latin normal et lisible
  • À l’intérieur des crochets, il faut utiliser de l’ASCII imprimable
  • Les longueurs prises en charge varient selon la police
    • QR Font 1-L : jusqu’à 17 caractères par bloc
    • QR Font 2-L : jusqu’à 32 caractères par bloc
    • QR Font 3-L : jusqu’à 53 caractères par bloc
    • Plain Sans : pas d’analyse QR
  • Le texte normal est affiché avec une police dérivée de Liberation Sans

QR codes conservés comme texte et points d’attention pour l’affichage

  • Comme le QR code reste du texte, le bloc QR rendu peut être copié-collé comme des caractères ordinaires, enregistré en texte brut ou mélangé en ligne avec du texte latin
  • Le moteur de mise en page du navigateur effectue les retours à la ligne sur la base du texte Unicode avant le shaping
    • S’il y a des caractères autorisant un retour à la ligne, comme un espace, un point ou un slash, et que la fin du conteneur de texte est atteinte, le QR code peut être divisé sur plusieurs lignes
    • En HTML, il faut envelopper le bloc entre crochets dans un conteneur auquel s’applique white-space: nowrap; ou display: inline-block; pour un rendu stable
  • Téléchargements et source

À lire aussi

2 commentaires

 
xguru 3 시간 전

C’est sympa. J’ai l’impression que ça pourrait servir un jour.
Je me demande si on pourrait l’intégrer à GeekNews, mais je ne vois pas bien quel serait le cas d’usage adapté.

On continue d’ajouter à GeekNews des choses qui se prêtent bien au texte.

Datatype — une police variable qui transforme du texte en graphique
Google publie Noto Emoji, une police d’emoji en noir et blanc
 
GN⁺ 3 시간 전
Avis sur Lobste.rs

  • J’aime bien la manière dont cela montre où le contenu est encodé dans le code QR. On voit bien le flux qui commence en bas à droite, zigzague de haut en bas, puis se remplit de droite à gauche
    Cela dit, si c’est l’objectif, les marqueurs de positionnement/d’alignement/de timing auraient peut-être mieux montré le processus de construction s’ils s’étaient remplis dès [ au lieu d’attendre ]. Cela dit, je comprends aussi qu’en le traitant à ], on évite des états intermédiaires bizarres ou que des valeurs trop longues soient prises à tort pour du code

  • Très cool. Un code QR que j’utilisais récemment pour une activité s’est fait détourner derrière un générateur de codes QR payant
    J’aurais dû être plus prudent, mais il était difficile de distinguer un encodeur QR JavaScript web d’un service QR frauduleux. J’aimerais que ce genre d’alternatives ouvertes fasse mieux en SEO, pour que même les gens qui n’ont pas besoin de bien s’y connaître puissent éviter les arnaques

    • En général, je cherche une bibliothèque JavaScript de génération de QR, puis je passe par GitHub vers la page de démo :p
    • Je n’ai jamais scanné de code QR. Si un restaurant exige un code QR pour voir le menu, je pars simplement
    • On peut utiliser CyberChef de GHCQ. C’est une page web téléchargeable

  • Ah, vu qu’OpenType est Turing-complet, j’aurais dû m’y attendre

    • Défi : réussir d’une manière ou d’une autre à faire tourner Doom dans OpenType

  • Ce serait bien d’avoir un bouton temporaire permettant au site de définir brièvement sa propre police

  • Je suis peut-être le seul, mais chez moi ça ne semble pas marcher sur mobile. Quelle que soit la police choisie dans la liste, les deux apparaissent comme du texte normal
    Testé avec le navigateur Brave sur Android

    • Pour info, ça fonctionne bien sur Safari iOS
    • Ça marche sur Firefox pour Android. Je n’ai pas Chrome pour vérifier

  • La fonctionnalité permettant de copier le texte du contenu QR semble cassée dans Chrome. Personnellement, en dehors du côté hack OpenType très cool, ça me paraît être le principal intérêt, mais si je sélectionne et copie le QR lui-même, je n’obtiens qu’un crochet fermant

    • J’ai vu la même chose. Cela ressemble davantage à un problème lié à l’étendue sélectionnée par le double-clic
      Si on fait glisser la zone de sélection pour bien inclure tout le QR, tout le texte est aussi copié