TrueType-QR-Code-Font – QR-Codes nur mit einer Schriftart erstellen

• Ein TrueType/OpenType-Font, der in eckige Klammern gesetzten Text in einen QR-Code umwandelt, sodass sich QR-Codes ohne Bilderzeugung direkt in Dokumente einfügen lassen
• Die Umwandlung erfolgt über OpenType-Regeln innerhalb des Fonts; Text außerhalb der eckigen Klammern wird unverändert als normaler lateinischer Text angezeigt
• Da der QR-Code-Block ebenfalls Text bleibt, sind Kopieren und Einfügen, Speicherung als Plain Text und Inline-Platzierung mit normalen Sätzen möglich
• Da der Browser Zeilenumbrüche vor dem Shaping festlegt, kann der QR-Code an Stellen wie Leerzeichen, Punkten oder Schrägstrichen auf mehrere Zeilen aufgeteilt werden
• Damit die Darstellung in HTML zuverlässig ist, sollte der Block in eckigen Klammern in einen Container eingeschlossen werden, auf den white-space: nowrap; oder display: inline-block; angewendet wird

---

Wie der Font QR-Codes erzeugt

• Jim's TrueType QR Code Font ist ein echter TrueType/OpenType-Font und rendert Text innerhalb eckiger Klammern wie [hello] als QR-Code
• Die QR-Code-Erzeugung wird durch OpenType-Regeln im Font verarbeitet, sodass keine separate Bilderzeugung oder kein Vorverarbeitungsschritt nötig ist
• Text außerhalb der eckigen Klammern bleibt als lesbarer normaler lateinischer Text erhalten
• Innerhalb der eckigen Klammern muss druckbares ASCII verwendet werden
• Die unterstützte Länge je Font ist wie folgt
  • QR Font 1-L: maximal 17 Zeichen pro Block
  • QR Font 2-L: maximal 32 Zeichen pro Block
  • QR Font 3-L: maximal 53 Zeichen pro Block
  • Plain Sans: kein QR-Parsing
• Normaler Text wird in einer von Liberation Sans abgeleiteten Schrift angezeigt

QR-Code als Text und Hinweise zur Darstellung

• Da der QR-Code als Text erhalten bleibt, kann der gerenderte QR-Block wie normale Zeichen kopiert und eingefügt, als Plain Text gespeichert oder inline mit lateinischem Text gemischt werden
• Browser-Layout-Engines führen Zeilenumbrüche auf Basis des Unicode-Texts aus, bevor das Shaping erfolgt
  • Wenn umbruchfähige Zeichen wie Leerzeichen, Punkte oder Schrägstriche vorhanden sind und das Ende des Textcontainers erreicht wird, kann der QR-Code auf mehrere Zeilen aufgeteilt werden
  • In HTML sollte der Block in eckigen Klammern in einen Container eingeschlossen werden, auf den der Stil white-space: nowrap; oder display: inline-block; angewendet ist, damit er zuverlässig gerendert wird
• Download und Quellcode
  • Download QR Font 1-L
  • Download QR Font 2-L
  • Download QR Font 3-L
  • Source repository

[xguru]

Das ist gut. Ich glaube, das könnte irgendwann nützlich sein.
Ich überlege, ob man es bei GeekNews einführen sollte, aber mir fällt kein passender Anwendungsfall ein.

Dinge, die sich für textbasierte Nutzung eignen, führen wir bei GeekNews laufend ein.

Datatype – eine variable Font, die Text in Diagramme umwandelt
Google veröffentlicht Noto Emoji, eine Schwarz-Weiß-Emoji-Font

[GN⁺]

Kommentare auf Lobste.rs

• Mir gefällt, wie gezeigt wird, wo der Inhalt in einem QR-Code codiert wird. Man erkennt den Ablauf: Er beginnt unten rechts, bewegt sich im Zickzack nach oben und unten und füllt sich von rechts nach links.
  Wenn das allerdings der Zweck ist, hätte man den Aufbau wohl besser sehen können, wenn die Positions-/Ausrichtungs-/Timing-Marker nicht bis ] warten würden, sondern direkt bei [ gefüllt würden. Andererseits verstehe ich auch, dass die Verarbeitung bei ] verhindert, dass seltsame Zwischenzustände oder zu lange Werte als Code fehlinterpretiert werden.

• Cool. Ein QR-Code, den ich kürzlich geschäftlich verwendet habe, wurde hinter einem kostenpflichtigen QR-Code-Generator durch einen Betrug gekapert.
  Ich hätte vorsichtiger sein sollen, aber es war schwer, einen webbasierten JavaScript-QR-Encoder von einem betrügerischen QR-Dienst zu unterscheiden. Ich hoffe, dass solche offenen Alternativen besser für Suchmaschinen optimiert werden, damit auch Leute, die sich nicht unbedingt gut auskennen müssen, Betrug vermeiden können.

  • Normalerweise suche ich nach einer JavaScript-Bibliothek zur QR-Erzeugung und gehe dann von GitHub auf die Demo-Seite :p
  • Ich habe noch nie einen QR-Code gescannt. Wenn ein Restaurant sagt, dass man einen QR-Code braucht, um die Speisekarte zu sehen, gehe ich einfach wieder.
  • Man kann CyberChef von GHCQ verwenden. Das ist eine herunterladbare Webseite.

• Ah, wenn man bedenkt, dass OpenType Turing-vollständig ist, hätte man das erwarten müssen.

  • Herausforderung: Irgendwie Doom in OpenType zum Laufen bringen.

• Es wäre schön, wenn es einen temporären Button gäbe, mit dem man der Website kurz erlaubt, ihre eigene Schriftart festzulegen.

• Vielleicht liegt es nur an mir, aber auf Mobilgeräten scheint es nicht zu funktionieren. Egal, welche Schriftart ich im Auswahlfeld wähle, beide erscheinen als normaler Text.
  Getestet im Brave-Browser auf Android.

  • Zur Info: In iOS Safari funktioniert es gut.
  • In Firefox auf Android funktioniert es. Chrome habe ich nicht, daher konnte ich es nicht prüfen.

• Die Funktion, mit der man den Text des QR-Inhalts kopieren kann, scheint in Chrome kaputt zu sein. Abgesehen vom coolen OpenType-Hack wirkt das für mich persönlich wie der größte Vorteil, aber wenn man den QR-Code selbst auswählt und kopiert, erhält man nur die schließende eckige Klammer.

  • Habe dasselbe gesehen. Es scheint eher ein Problem mit dem Bereich zu sein, den ein Doppelklick auswählt.
    Wenn man die Auswahl zieht und sicherstellt, dass sie den gesamten QR-Code umfasst, wird auch der gesamte Text mitkopiert.