Datatype – eine variable Schrift, die Text in Diagramme umwandelt

• Mit dem Konzept „data as type“ werden Diagramme allein mit Text dargestellt – ohne JS-, Bild- oder Rendering-Bibliotheken
• Nutzt OpenType-Ligatur-Ersetzungen, um einfache Textdarstellungen wie {b:30,70,50,90} in Inline-Diagramme umzuwandeln
• Drei Diagrammtypen werden unterstützt
  • Balkendiagramm: {b:30,70,50,90,64,27,72,42} kommagetrennte Werte (jeweils 0–100), maximal 20 Balken
  • Sparkline: {l:10,50,30,80,20,15,48,72,37} kommagetrennte Werte (jeweils 0–100), maximal 20 Punkte
  • Kreisdiagramm: {p:69} {p:43} ein einzelner Prozentwert zwischen 0 und 100
• Visuelle Anpassung über Schriftgröße und zwei variable Achsen
  • Width (wdth): 50–150, steuert den Abstand, Standardwert 100
  • Weight (wght): 100–900, steuert die Linienstärke, Standardwert 400
• Kann auch zwischen normalen Zeichen gerendert werden und funktioniert daher überall dort, wo Text verwendet wird – etwa mitten im Fließtext, in Tabellen oder in Log-Meldungen
  • Lässt sich auch leicht in Tabellen/Dashboards/Reports einfügen
• Im Web lässt es sich mit nur drei CSS-Zeilen einführen
  • Schrift per @font-face laden → font-family: 'Datatype' festlegen → in HTML {l:20,40,70} schreiben
  • Mit font-variation-settings stehen zusätzliche Anpassungsoptionen wie wdth zur Verfügung
• Desktop: Nach Installation der TTF-Datei in Apps mit OpenType-Ligatur-Unterstützung nutzbar (z. B. Adobe)
• Wird auch über Google Fonts verteilt und kann daher ohne separates Hosting genutzt werden
• 15 benannte Instanzen enthalten (9 Standard-Weights + 6 Kombinationen mit benutzerdefinierter Breite)
  • Enthält Presets für verschiedene Einsatzzwecke wie Thin UltraCondensed (50/100), SemiBold Condensed (75/600), Medium Expanded (125/500), Black ExtraExpanded (150/900) usw.
• Anzahl der Glyphen: 10.850 pro Master, insgesamt 9 Master
• Dateigröße: TTF 4,0 MB / WOFF2 78 KB, Unicode-Abdeckung entspricht Google Fonts Latin Core
• Browser-Unterstützung: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Funktionsweise

  • Verwendet die Funktion OpenType-Ligatur-Ersetzung (ligature substitution)
  • Normalerweise ersetzt eine Ligatur Zeichenkombinationen wie fi oder fl durch eine einzelne Glyphe
  • Datatype wendet das darauf an und ersetzt ein ganzes Muster wie {b:30,70,50,90} durch eine einzelne Diagramm-Glyphe {b:30,70,50,90}
  • Wenn der Browser oder die App die Schrift-Ligaturfunktion unterstützt, wird das Diagramm sofort ohne JavaScript-Ausführung gerendert
• SIL Open Font License 1.1
• Auf der Specimen-Seite lassen sich reale Anwendungsbeispiele ansehen

[winterjung]

{p:75} {l:40,10,10,40} {p:75}

[shakespeares]

{p:75} {l:40,10,10,40} {p:75}
Wow..

[xguru]

Was für eine Anwendung ist das denn?!

[crawler]

Hahahahahaha

[bichi]

hahaha

[roxie]

Ich dachte, das unterscheidet sich nicht groß davon, es in SVG umzuwandeln, aber auf GeekNews ist direkt schon ein Anwendungsbeispiel aufgetaucht. Das war wirklich eine gute Idee. {p:100} {b:50,50,50} {p:100}

[xguru]

Ich dachte, das passt gut zu GeekNews, deshalb habe ich es zur Vorstellung testweise als Beta-Funktion eingeführt. Da es klein ist, ist auch Self-Hosting kein großer Aufwand.
Wenn man etwas wie {b:30,70,90,64,27,42} {b:30,70,90,64,27,42} oder {l:10,50,30,80,20} {l:10,50,30,80,20} eingibt, wird nur dieser String erkannt und mit der Schriftart umschlossen.
Man muss nur den String ohne Backticks (`) eingeben.

[xguru]

GeekNews verwendet möglichst keine Bilder, daher versuchen wir, solche textbasierten Lightweight-Lösungen nach Möglichkeit einzuführen, wenn sie erscheinen.
Google veröffentlicht die Schwarz-Weiß-Emoji-Schriftart Noto Emoji ist inzwischen auch schon seit 4 Jahren im Einsatz und funktioniert immer noch gut 😀😃😄😁😆😅😍🥰😘

[humblebee]

{p:75} {l:40,10,10,40} {p:75} 🙂

[crawler]

Wow, das ist ja mega faszinierend hahaha

[onestone]

Ein aufwärts gerichteter Graph~ {b:10,20,40,60,80,100}

[logone72]

{l:10,50,30,80,20}

[jungkeuny]

{l:10,50,30,80,20}

[aer0700]

{p:75} {l:45,30,10,10,30,45} {p:75}

[lazydonkey456]

{p:65} {l:70,0,70,0,70} {p:65}

[duky8n]

{p:5} {l:60,0,50,50,0,60} {p:5}

[aciddust]

{p:75} {l:40,10,10,40} {p:75} Wie süüüüüüüüüüß

[filab]

{b:30,70,50,30}

[nvrshowfear]

{p:75} {l:40,10,10,40} {p:75}

[syate]

{p:75} {l:40,10,40} {p:75}

[syate]

{p:75} {l:40,10,10,10,10,10,40} {p:75}

[gilsport]

{b:30,70,90,64,27,42}

[unknowncyder]

{b:30,70,90,64,27,42,42,27,64,90,70,30}

[alstj158]

Auch Googles Material Symbols scheinen Icons per Ligaturen umzusetzen, ziemlich interessant.

[holywork]

Sehr gut

[akarin]

{l:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15}

[recast7838]

{b:30,70,50,90}

[sigco]

{l:40,10,10,40} {p:75}

[kimjeongwonn]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

[seoseonyu]

Wow, haha, das ist ja faszinierend.