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.

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.


___ ___ ___ _ _ ___ ____ _____ _____ _____ _ _ _____ / _ \ /.__) /.__)|.||.| / _ \ |: _ \|_ . _| |: ___)|. _ .||:\|:||_ . _| |: _ :|\__.\(.(__ |:||:| |: _ :||: / |:| |: __) |:|_|:||:\ :| |:| |_| |_|(___/ \___)|_||_| |_| |_||_|\_\ |_| |_| |_____||_|\_| |_|
___ ___ ___ _ _ ___ ____ _____ _____ _____ _ _ _____ / _ \ /.__) /.__)|.||.| / _ \ |: _ \|_ . _| |: ___)|. _ .||:\|:||_ . _| |: _ :|\__.\(.(__ |:||:| |: _ :||: / |:| |: __) |:|_|:||:\ :| |:| |_| |_|(___/ \___)|_||_| |_| |_||_|\_\ |_| |_| |_____||_|\_| |_|

ASCII-ART Schriftarten optimal im Web einbinden
2020-00-03 © ctaas.de, Arno Schröder § Impressum



Nr. ASCII ART WEB Handbuch:
1 ASCII-ART Geschichte
2 mein ASCII-Font: CTAAS-DOT-ASCII
3 perfekte ASCII-ART Einbindung in Blogs, Webauftritten usw.
4 ASCII-Texte dnynamisch (leicht änderbar) erstellen
5 ASCII-ART Text Beispiele

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, das 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):

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:

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 leichert 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 schell 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