Wir sind unabhängig, neutral und finanzieren uns teilweise über Werbung und Partnerprovisionen.
Danke wenn du uns unterstützt. Weitere Infos zum Bedanken findest Du hier.
Diese Seite verwendet hierzu Cookies & Tracking-Cookies, weitere Informationen findest du hier. Wenn du diese Seite weiterhin besuchst, erklärst du dich damit einverstanden.
Diese seite ist neutral und unabhängig. Die Finanzierung erfolgt teilweise über Werbung und Partnerprovisionen.
Danke wenn Du mich unterstützt.
Diese Seite verwendet Cookies & Tracking-Cookies, weitere Informationen findest Du hier. Wenn du diese Seite weiterhin besuchst, erklärst du dich damit einverstanden.
___ ___ ___ _ _ ___ ____ _____ _____ _____ _ _ _____
/ _ \ /.__) /.__)|.||.| / _ \ |: _ \|_ . _| |: ___)|. _ .||:\|:||_ . _|
|: _ :|\__.\(.(__ |:||:| |: _ :||: / |:| |: __) |:|_|:||:\ :| |:|
|_| |_|(___/ \___)|_||_| |_| |_||_|\_\ |_| |_| |_____||_|\_| |_|
___ ___ ___ _ _ ___ ____ _____ _____ _____ _ _ _____
/ _ \ /.__) /.__)|.||.| / _ \ |: _ \|_ . _| |: ___)|. _ .||:\|:||_ . _|
|: _ :|\__.\(.(__ |:||:| |: _ :||: / |:| |: __) |:|_|:||:\ :| |:|
|_| |_|(___/ \___)|_||_| |_| |_||_|\_\ |_| |_| |_____||_|\_| |_|
ASCII-ART Schriftarten optimal im Web einbinden
2021-10-21 © ctaas.de, Arno Schröder § Impressum
1.ASCII-ART Geschichte:
ASCII-Grafik fasziniert mich schon länger.
Die Computer in den 1980er Jahren waren lange nicht so leistungsfähig wie heute. Angefangen habe ich unter anderem mit einem
Robotron Z 1013, Sinclair ZX81,
Robotron KC 85/1 bzw. Robotron KC 87.
Damals in den Anfangszeiten waren herkömmliche Pixelgrafiken noch gar nicht möglich. Daher erstellte ich bereits als Kind öfter Grafiken aus ASCII-Zeichen.
Nach wie vor haben ASCII-Grafiken durchaus ihre gestalterische Berechtigung. Sei es um den Retro-Look wieder zu beleben oder um ressourcensparende Überschriften und Logos zu gestalten.
Beispielsweise benötigt eine im HTML-Text intergierte und optimierte ASCII-Art Überschrift deutlich weniger Speicherplatz als ein extra nachzuladendes Bild.
Mit Hilfe von verschiedensten HTML Effekten wie Schatten, Farben usw. kann man auch einfache ASCII-Grafiken etwas interessanter gestalten.
Für meine Webseite suchte ich eine kompakte aber gut lesbare ASCII-ART-Schriftart die auch Sonderzeichen wie deutsche Umlaute beinhaltet.
Mein Ziel war es schnell und einfach eine ressourcenschonende ASCII-Überschrift (als eine Art Logo) für die unterschiedlichsten Themen zu entwickeln.
Im Internet gab es zwar zahlreiche ASCII Schriftvarianten, diese gefielen mir aber alle nicht. Daraufhin erstellte ich einfach den folgenden ASCII-Font komplett neu.
2.ASCII-ART Font CTAAS-DOT-ASCII:
Der folgende Font wurde von mir selbst gestaltet. Einige Zeichen sind natürlich an bereits bestehende Fonts angelehnt, da man bei ASCII-Grafiken unmöglich alles komplett neu erfinden kann.
Die beim Design verwendeten innenliegenden Punkte verleihen den Buchstaben/Zeichen etwas mehr Kontrast. Daher erhielt der Font auch den Namen 'CTAAS-DOT-ASCII'.
Der hier vorgestellte Font mit den Punkten innerhalb der Zeichen mit der minimalistischen Verwendung von Strichen und Klammern wurde so hier erstmals im Internet veröffentlicht.
Hinweis: Übernehmen Sie bitte den Font-Namen bzw. den Designer-Namen, sofern Sie den Font weiterverteilen bzw. weiterverarbeiten.
Design 2020 ©: Arno Schröder - Kahla
ASCII-Font-Name: CTAAS-DOT-ASCII
___ ____ ___ ____ ____ _____ ______ _ _ _ _ _ _ _ _ _ _ _ _____ ____ _____ ____ ___ _____ _ _ _ _ _ _ _ _ _ _ ____
/ _ \ |: _ \ /.__) |: _ \ |:___) |: ___) / .___/ |.|_|.| |.| |.| |:|/ ) |:| / \/ \ |:\|:| |. _ .| |: _ \ |. _ .| |: _ \ /.__) |_ . _| |:| |:| ( \/ ) |.| |.| (.\/.) |.\_/.| \.._|
|: _ :| |: _ ( (.(__ |:|_) ) |:__) |: __) |:(_\ \ |: _ :| |:| /|_|:| |: ( |:|__ |:/\/\:| |:\ :| |:|_|:| |:___/ |:|_|:| |: / \__.\ |:| |:|_|:| \::/ |:\/\/:| )::( \ : / _\.\
|_| |_| |____/ \___) |____/ |____) |_| \_____/ |_| |_| |_| |_____| |_|\_) |____| |_| |_| |_|\_| |_____| |_| |____\| |_|\_\ (___/ |_| |_____| \/ \_/\_/ (_/\_) |_| |____\
Alphabet: A - Z
o_o _o_o_ _o o_ ____
/ _ \ |. _ .| |:| |:| |:_ \
|: _ :| |:|_|:| |:|_|:| |:|( (
|_| |_| |_____| |_____| |_|/_/
Umlaute: Ä, Ö, Ü und ß
__ __ ___ __ ___ __ ___ ___ ___ _ | ___ __ __
/ | (_ \ (__ ) /:/_ |.__) /:/ (_ :) ( - ) / _ \ /.\ | / _ \ /_ | /:/_
(/|.| /:/ (_ \ (_:_| |__.\ / _ \ / / / _ \ \_ ./ ( O ) | (:(_):) |.| (_ :_|
|_| (___) (___/ |_| (___/ \___/ (_/ \___/ (_/ \_/ | \___/ |_| |_|
Ziffern: 0 - 9 mit exakt gleicher Zeichenbreite & alternative Darstellungen mit abweichender Zeichenbreite
_ ___ _ _ ___ _
|:| // /( / () // // \\ ____ /._ \ _| | |_ _|_|_ (_. ) _ _ _ _| |_ ____ \./
|_| \$\ o/o / \, // (( )) ____ (:(___) |_ : : _| _|_|_ (_/ // \\ _ (_) |_ : _| |____| --x-- _
o )/ / \_/` // \\ // \___/ |_|_| | | o \\ // (_) (_) |_| /.\ /_/
Sonderzeichen: ! " $ % & / ( ) = @ # ? < > . : + - * ,
3.Perfekte Einbindung für Blogs, Webauftritte usw. (Empfehlung):
Man sollte bei Webauftritten beachten, dass nicht automatisch alle monospace Fonts für ASCII-ART gleichermaßen geeignet sind.
Ich habe wirklich viele getestet und spreche dabei aus Erfahrung.
Einige Fonts decken nicht alle Zeichen ab. Andere wiederum halten den gleichen Abstand bei Sonderzeichen und Leerzeichen nicht immer ein.
Daraus resultieren dann ggf. Darstellungsprobleme.
Um diese Darstellungsprobleme zu umgehen, sollte man die verwendeten Schriftarten in den eigenen Webauftritt mit einbinden (Tipps siehe folgende Box).
Für eine optimale Einbindung empfehle nur die im folgenden Code Fenster rot hervorgehobenen monospaced Schriftarten, diese wurden getestet (Downloadlinks hier).
Da die ASCII-Art Darstellung von der Darstellung eines Standardtextes abweicht, wurden die Fonts hier in einer abweichenden Reihenfolge sortiert.
CSS-Style (mit optimaler Font Reihenfolge):
/* HTML-Klasse definieren: class="ascii-font" */
.ascii-font
{
font-family:'DejaVu Sans Mono', Hack, 'Fira Mono', 'Courier Prime Code', Cousine, 'Liberation Mono', 'Andale Mono', 'Office Code Pro', 'Roboto Mono', 'Anonymous Pro', 'Ubuntu Mono', monospace;
font-size:10px; /* font-size:1.75vw; font-size:calc(7px + .5vw); /* dynamische Alternativen */
font-weight:400;line-height:1.2;
letter-spacing:-0.015em;
white-space:pre;overflow:auto;
text-shadow:2px 2px 4px #222;
-webkit-text-stroke:0.15px #aaa;
color:#222;
}
/* ASCII-ART Font selbst hosten */
@font-face {
font-family:'DejaVu Sans Mono';
font-weight:400;
font-style:normal;
font-display:swap;
src: local('DejaVu Sans Mono'), url('https://ctaas.de/fonts/DejaVuSansMono-subset.woff2') format('woff2'); /* Wichtig: Hier muss man den Font-Namen und Pfad zur eigenen Domäne anpassen. */
}
Ergänzende Hinweise:
Die Fonts 'Anonymous Pro' und 'Ubuntu Mono' stellen den Text dabei etwas schmaler dar (ggf. diese weglassen).
Abgesehen von der Schriftart 'Andale Mono' handelt es sich nur um frei verfügbare Schriftarten (Open-Source-Schriften).
Möchte man die Schriftarten in einer eigenen Webseite ausliefern, so reicht es völlig aus wenn man nur noch woff2 Schriftarten ausliefert,
da Praktisch alle aktuelle Webbrowser (Systemübergreifend) dieses Format mittlerweile unterstützen.
Um den Seitenaufbau zu beschleunigen sollte man einen möglichst schlanken Quellcode verwenden. Die Einbindung wie hier gezeigt wird daher empfohlen (das reicht wirklich aus).
4.Längere bzw. wechselnden ASCII Text leicht generieren (Empfehlung):
Ich habe lange überlegt, wie man am einfachsten längere ASCII-ART Texte erstellen/gestalten könnte.
Schlussendlich habe ich folgende einfache Lösung entwickelt (technischer Background/Realisierung):
- Die einzelnen ASCII-Zeichen (Buchstaben, Ziffern, Sonderzeichen usw...) werden jeweils in einzelnen div-Container abgelegt.
- Diese div-Container reiht man dann mittels 'float:left' aneinander um mehrere ASCII-Zeichen neben einander darzustellen.
- Mehrere div-Container kann man mittels 'display:inline-block' so zusammenfassen, das diese immer in einem Block dargestellt werden. So werden auch ganze Wörter, Datumsangaben u. ä. nicht am Seitenende umgebrochen.
- Damit jetzt nicht jeder separate div-Container die kompletten ASCII-Zeichen enthält werden diese einmalig zuvor im Stylesheet der Webseite definiert.
- Der Trick ist dabei das die tatsächlichen ASCII-Zeichen über 'content:before' (alternativ ginge auch 'content:after') beim Rendern der Seite eingefügt werden.
- So kann man dann sehr leicht verschiedenste ASCII-Texte erstellen.
Beispiel HTML5-Grundgerüst zum Testen (Copy & Paste):
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- wichtig für eine korrekte mobile Browser Darstellung -->
<title>ASCII-TEXT DESIGN CTAAS.DE</title>
<style>
/*
Einzelne ASCII-ART-Zeichen definieren:
======================================
Beachtet dabei die folgenden Hinweise:
#1. Alle Backslash's '\' wurde mit einem extra führenden Backslash '\' maskiert. Ein doppelter Backslash '\\' steht also nur einen einzelnen Backslash '\' (ausgenommen ist der den Zeilenumbruch mit '\00000a').
#2. Wenn Backslash '\' maskiert wurde muss man zur sauberen Trennung/Erkennung manchmal ein weiteres 'exta Leerzeichen' eingefügen.
#3. '\00000a' kennzeichnet den Zeilenumbruch (use \A or \00000a to achieve a newline).
#4. Doppelte Leerzeichen ' ' muss man exakt wie hier angegeben übernehmen. Beachtet dies vor allem bei Programmen die den HTML-Code optimieren.
#5. Weitere HTML-Formatierungen wie Farben usw. lassen kann man hier leider nicht einbinden.
*/
/* Buchstaben: */
.char-A:before {content:" ___\00000a / _ \\\00000a |: _ :|\00000a |_| |_|"} /* A */
.char-B:before {content:" ____\00000a|: _ \\\00000a|: _ (\00000a|____/"} /* B */
.char-C:before {content:" ___\00000a /.__)\00000a(.(__ \00000a \\___)\00000a"} /* C */
.char-D:before {content:" ____\00000a|: _ \\\00000a|:|_) )\00000a|____/"} /* D */
.char-E:before {content:" ____\00000a|:___)\00000a|:__)\00000a|____)"} /* E */
.char-F:before {content:" _____\00000a|: ___)\00000a|: __)\00000a|_|\00000a"} /* F */
.char-G:before {content:" ______\00000a/ .___/\00000a|:(_\\ \\\00000a \\_____/"} /* G */
.char-H:before {content:" _ _\00000a|.|_|.|\00000a|: _ :|\00000a|_| |_|"} /* H */
.char-I:before {content:" _\00000a|.|\00000a|:|\00000a|_|"} /* I */
.char-J:before {content:" _\00000a |.|\00000a /|_|:|\00000a|_____|"} /* J */
.char-K:before {content:" _ _\00000a|:|/ )\00000a|: (\00000a|_|\\_)"} /* K */
.char-L:before {content:" _\00000a|:|\00000a|:|__\00000a|____|"} /* L */
.char-M:before {content:" _ _\00000a / \\/ \\\00000a|:/\\/\\:|\00000a|_| |_|"} /* M */
.char-N:before {content:" _ _\00000a|:\\|:|\00000a|:\\ :|\00000a|_|\\_|"} /* N */
.char-O:before {content:" _____\00000a|. _ .|\00000a|:|_|:|\00000a|_____|"} /* O */
.char-P:before {content:" ____\00000a|: _ \\\00000a|:___/\00000a|_|"} /* P */
.char-Q:before {content:" _____\00000a|. _ .|\00000a|:|_|:|\00000a|____\\|"} /* Q */
.char-R:before {content:" ____\00000a|: _ \\\00000a|: /\00000a|_|\\_\\"} /* R */
.char-S:before {content:" ___\00000a/.__)\00000a\\__.\\\00000a(___/"} /* S */
.char-T:before {content:" _____\00000a|_ . _|\00000a |:|\00000a |_|"} /* T */
.char-U:before {content:" _ _\00000a|:| |:|\00000a|:|_|:|\00000a|_____|"} /* U */
.char-V:before {content:" _ _\00000a( \\/ )\00000a \\::/\00000a \\/"} /* V */
.char-W:before {content:" _ _\00000a|.| |.|\00000a|:\\/\\/:|\00000a \\_/\\_/ "} /* W */
.char-X:before {content:" _ _\00000a(.\\/.)\00000a )::(\00000a(_/\\_)"} /* X */
.char-Y:before {content:" _ _\00000a|.\\_/.|\00000a \\ : /\00000a |_|"} /* Y */
.char-Z:before {content:" ____\00000a \\.._|\00000a _\\.\\\00000a|____\\"} /* Z */
/* Umlaute und ß: */
.char-AE:before {content:" o_o\00000a / _ \\\00000a|: _ :|\00000a|_| |_|"} /* Ä */
.char-OE:before {content:" _o_o_\00000a|. _ .|\00000a|:|_|:|\00000a|_____|"} /* Ö */
.char-UE:before {content:" _o o_\00000a|:| |:|\00000a|:|_|:|\00000a|_____|"} /* Ü */
.char-SS:before {content:" ____\00000a|:_ \\\00000a|:|( (\00000a|_|/_/"} /* ß */
/* Ziffern: */
.char-1:before {content:" __\00000a / |\00000a(/|.|\00000a |_|"} /* 1 */
.char-1-alt:before {content:" __\00000a /_ |\00000a |.|\00000a |_|"} /* 1 = alternative Version mit abweichender Zeichenbreite */
.char-2:before {content:" __\00000a(_ \\\00000a /:/\00000a(___)"} /* 2 */
.char-3:before {content:" ___\00000a(__ )\00000a (_ \\\00000a(___/"} /* 3 */
.char-4:before {content:" __\00000a /:/_\00000a(_:_|\00000a |_|"} /* 4 */
.char-4-alt:before {content:" __\00000a /:/_\00000a(_ :_|\00000a |_|"} /* 4 = alternative Version mit abweichender Zeichenbreite */
.char-5:before {content:" ___\00000a|.__)\00000a|__.\\\00000a(___/"} /* 5 */
.char-6:before {content:" __\00000a /:/\00000a/ _ \\\00000a\\___/"} /* 6 */
.char-7:before {content:" ___\00000a(_ :)\00000a / /\00000a(_/"} /* 7 */
.char-8:before {content:" ___\00000a( - )\00000a/ _ \\\00000a\\___/"} /* 8 */
.char-9:before {content:" ___\00000a/ _ \\\00000a\\_ ./\00000a (_/"} /* 9 */
.char-0:before {content:" _\00000a /.\\\00000a( O )\00000a \\_/"} /* 0 */
.char-0-alt:before {content:" ___\00000a / _ \\\00000a(:(_):)\00000a \\___/"} /* 0 = alternative Version mit abweichender zeichenbreite */
/* Sonderzeichen: */
.char-space:before {content:" \00000a\00000a\00000a\00000a"} /* Leerzeichen ' ' = Für das Einfügen von Leerzeichen zwischen den einzelnen ASCII-Wörtern. Hinweis: Die ersten Leerzeichen bestimmt den Abstand. */
.char-dot:before {content:"\00000a\00000a _\00000a(_)\00000a"} /* Punkt '.' = z. B. am Ende eines Satzes */
.char-colon:before {content:"\00000a _\00000a(_)\00000a(_)"} /* Doppelpunkt ':' = z. B. am Überschriften Ende */
.char-comma:before {content:"\00000a\00000a _\00000a/_/"} /* Komma ',' = z. B. bei Aufzählungen */
/* Fließtext Formatierungen: */
.word {display:inline-block} /* Die folgende Buchstaben am Seitenende nicht umbrechen (ganze Wörter/Zeichenblöcke zusammenfassen) */
.line-break {clear:both} /* Zeilenumbruch = Fließtext unterberechen, weiter in der nächsten freien Zeile */
/* einzelne ASCII-Zeichen (div-Container) formatieren: */
.ascii-char {
white-space:pre; /* Leerzeichen exakt übernehmen */
float:left; /* links fließender Fließtext (mehrer Zeichen nebeneinander) */
font-size:6.5px; /* dynamische Alternativen: 'font-size:1.75vw;' oder 'font-size:calc(7px + .5vw);' */
font-weight:400;line-height:1.2;
letter-spacing:-0.015em;
-webkit-text-stroke:0.15px #aaa;
color:#111;
font-family:'DejaVu Sans Mono', Hack, 'Fira Mono', 'Courier Prime Code', Cousine, 'Liberation Mono', 'Andale Mono', 'Office Code Pro', 'Roboto Mono', 'Anonymous Pro', 'Ubuntu Mono', monospace;
}
</style></head><body>
Den ASCII-Text bildet man in der Webseite dann so:<br>
<div class="word"><!-- gesamtes Wort -->
<div class="ascii-char char-D"></div
><div class="ascii-char char-A"></div
><div class="ascii-char char-S"></div
><div class="ascii-char char-space"></div
></div
><div class="word"><!-- gesamtes Wort -->
<div class="ascii-char char-I"></div
><div class="ascii-char char-S"></div
><div class="ascii-char char-T"></div
><div class="ascii-char char-space"></div
></div
><div class="word"><!-- gesamtes Wort -->
<div class="ascii-char char-E"></div
><div class="ascii-char char-I"></div
><div class="ascii-char char-N"></div
><div class="ascii-char char-space"></div
></div
><div class="word"><!-- gesamtes Wort -->
<div class="ascii-char char-A"></div
><div class="ascii-char char-S"></div
><div class="ascii-char char-C"></div
><div class="ascii-char char-I"></div
><div class="ascii-char char-I"></div
><div class="ascii-char char-space"></div
></div
><div class="word"><!-- gesamtes Wort -->
<div class="ascii-char char-T"></div
><div class="ascii-char char-E"></div
><div class="ascii-char char-X"></div
><div class="ascii-char char-T"></div
><div class="ascii-char char-dot"></div
></div>
</body></html>
Beachtet in dem Zusammenhang noch folgende Punkte:
- Alle ASCII-Zeichen (Buchstaben, Zahlen ...) werden nicht einzeln erzeugt, sondern aus einfachen vorgefertigten div-Containern zusammengesetzt.
- Daher kann man damit dynamische bzw. sich schnell verändernde Text-Darstellung wie z. B.: einen Counter, Preise, Termine usw. relativ leicht realisieren.
- Zusammenhängende Wörter und Zeichengruppen wie z. B. Datumsangaben bleiben auch bei einem Zeilenumbruch zusammen.
- Das Design ist responsive/flexibel, es passt sich dynamisch verschiedensten Webbrowsern und Bildschirmdarstellungen an.
- Durch die vorgefertigten div-Container wird auch bei viel Text kaum Ressourcen verbraucht.
Durch die sich wiederholenden Formatierungseinträge lässt sich ein Text auch fast 1:1 wie ein Normaltext beim Übertragen, wenn die HTML-Seite während der Übertragung komprimiert wird.
- Die so erstellten ASCII-Texte werden in allen aktuellen gängigen Webbrowsern: Mozilla Firefox (auch mobil), Google Chrome (auch mobil), Microsoft Edge (alte und neue Chomium basierende Version), Internet Explorer, Android ... immer korrekt dargestellt.
- Einzelne Zeichen eines ASCII-ART Zeichens (wie z. B. die Punkte) kann man nicht unterschiedlich formatieren. Man kann nur den div-Container als Ganzes mit Formatierungen gestalten.
Schaut euch bei Interesse den HTML-Code von dieser Seite an.
5.ASCII-ART Textbeispiele für den Font - CTAAS-DOT-ASCII:
Alle nun folgenden ASCII-Text Beispiele sind vom Webbrowser gerenderte Buchstaben und keine Grafiken. Auch wenn die einzelnen Zeichen vom ASCII-Text nicht im Webbrowser markierbar sind.
Die Darstellung erfolgt hier nur mittels der zuvor definierten div-Containern (siehe Punkt 4) die nur Standard-Zeichen enthalten. Wer es nicht glaubt schaut am besten in den Quellcode. :)
ASCII-Alphabet: A-Z und Leerzeichen:
UMLAUTE Ä, Ö, Ü und ß:
Ziffern: 0 - 9 (mit alternativen Darstellungen):
Hier folgt nun ein Beispieltext zur Verdeutlichung:
Dieser Beispieltext wird hier noch mit Rahmen um die einzelnen ASCII-Zeichen ausgeben. So erkennt man leichter das die einzelnen ASCII-Zeichen aus einzelnen div-Containern bestehen.
Einzelne ASCII-Zeichen (div-Container) kann man entsprechend stylen, hier z. B. mit unterschiedlichen Farben.
praktische Anwendungen ohne Rahmen:
Beispielwörter mit Umlauten und ß:
Durch das einfache Aneinanderreihen von div-Containern (einzelnen ASCII-Zeichen) kann man auch längere ASCII-Texte schnell und einfach erstellen.
Tipp:
Verkleinern sie das Browserfenster und testen Sie das responsive/flexible Design von dieser Seite.
❑ Abschließende Infos:
IP-Adressen, E-Mailadressen, Namen u. ä. wurden für die Dokumentation geändert, hacken ist also zwecklos.
Die Nutzung der Anleitung erfolgt auf eigene Gefahr, für jegliche Schäden wird keine Garantie/Haftung übernommen.
Die Dokumentation entstand aus verschiedenen Tests, sowie produktiven Installationen und stellt eine Zusammenfassung wichtiger und empfohlener Schritte dar.
Bevor sie eventuell Fragen stellen bitte ich sie die Dokumentation komplett zu lesen.
Hinweise auf Fehler, Anregungen, Danksagungen oder ähnliches sind immer willkommen.
Design:
© ctaas.de, A. Schröder - Kahla, Impressum
