Datatype – eine variable Schrift, die Text in Diagramme umwandelt

 (github.com/franktisellano)
28 Punkte von xguru 4 시간 전 | 11 Kommentare | Auf WhatsApp teilen
  • 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 <span class="chart">{l:20,40,70}</span> 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

Verwandte Beiträge

11 Kommentare

 
winterjung 4 시간 전

{p:75} {l:40,10,10,40} {p:75}
 
shakespeares 2 시간 전

{p:75} {l:40,10,10,40} {p:75}
Wow..
 
xguru 3 시간 전

Was für eine Anwendung ist das denn?!
 
crawler 4 시간 전

Hahahahahaha
 
bichi 1 시간 전

hahaha
 
sigco 57 분 전

{l:40,10,10,40} {p:75}
 
xguru 4 시간 전

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.
 
crawler 4 시간 전

Wow, das ist ja mega faszinierend hahaha
 
xguru 4 시간 전

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 😀😃😄😁😆😅😍🥰😘
 
kimjeongwonn 3 시간 전

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}
 
seoseonyu 3 시간 전

Wow, haha, das ist ja faszinierend.