ASCII-Grafik in HTML [duplicate]

Lesezeit: 3 Minuten

Benutzer-Avatar
Mladek

Was kann ich tun, damit es so gedruckt wird, wie es im HTML-Dokument im Webbrowser aussieht?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        ###### #    #   ##   #    # #####  #      ######
        #       #  #   #  #  ##  ## #    # #      #      
        #####    ##   #    # # ## # #    # #      ##### 
        #        ##   ###### #    # #####  #      #      
        #       #  #  #    # #    # #      #      #      
        ###### #    # #    # #    # #      ###### ######
    </body>
</html>

Gibt:

# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # # > ## ### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######

  • stackoverflow.com/questions/9492249/…

    – Ciro Santilli Путлер Капут 六四事

    15. Juni 2015 um 14:01 Uhr

Benutzer-Avatar
Johannes Fiala

Verwenden Sie die <pre> Schild! Setzen Sie es vor und nach Ihrem BEISPIEL.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        <pre>
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
        </pre>
    </body>
</html>

  • Obwohl Sie technisch wahrscheinlich

    # ... #

    (ohne Zeilenumbruch) oder Kommentare () verwenden möchten, um Leerzeichen zu eliminieren, möchten Sie wahrscheinlich nicht.

    – Jan Kyu Peblik

    10. Februar 2018 um 3:47 Uhr


  • Dies scheint nicht für Grafiken zu funktionieren, die Escape-Zeichen enthalten (z. B. newline '\'). Sehen Sie sich die hier gefundenen Kätzchen an: user.xmission.com/~emailbox/ascii_cats.htm – irgendwie kompensieren?

    – HappyHands31

    23. September 2019 um 19:44 Uhr


  • Sie müssen Zeilenumbrüche mit ‘\’ maskieren. Geben Sie zum Beispiel ‘\\’ für einen einzelnen Schrägstrich (‘\’) in art.

    – das ist jaymehta

    22. Juni 2020 um 5:11 Uhr


HTML ist so konzipiert, dass Leerraum standardmäßig ausgeblendet wird. Mit anderen Worten, alle Reihen von Leerzeichen (Leerzeichen, Tabulatoren, Zeilenvorschübe …) werden beim Rendern durch ein einzelnes Leerzeichen ersetzt. Sie können dieses Verhalten mit steuern Leerraum CSS-Eigenschaft:

Das white-space Die CSS-Eigenschaft wird verwendet, um zu beschreiben, wie Leerzeichen innerhalb des Elements gehandhabt werden.

Werte

  • normal Sequenzen von Leerzeichen werden reduziert. Zeilenumbruchzeichen in der Quelle werden wie andere Leerzeichen behandelt. Unterbricht Linien nach Bedarf, um Linienfelder zu füllen.
  • pre Leerzeichenfolgen bleiben erhalten, Zeilenumbrüche werden nur bei Zeilenumbrüchen in der Quelle vorgenommen.
  • nowrap Blendet Leerzeichen wie normal ein, unterdrückt jedoch Zeilenumbrüche (Textumbruch) innerhalb von Text.
  • pre-wrap Sequenzen von Leerzeichen bleiben erhalten. Zeilen werden nur bei Zeilenumbrüchen in der Quelle und bei Bedarf zum Füllen von Zeilenfeldern unterbrochen.
  • pre-line Sequenzen von Leerzeichen werden reduziert. Zeilen werden an Zeilenumbrüchen in der Quelle und nach Bedarf umbrochen, um Zeilenfelder zu füllen.

Im Fall von ASCII-Art möchten Sie auch eine feste Breite erzwingen Schriftfamilie.

.ascii-art {
    font-family: monospace;
    white-space: pre;
}
<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>

  • Obwohl ich mich über all die Repräsentanten freue, die meine Antwort geschaffen hat, ist Alvaros Antwort möglicherweise noch richtiger, da heutzutage eine Klasse so definiert wird, wie sie es getan hat.

    – Johannes Fiala

    10. Januar 2018 um 17:57 Uhr

  • @JohnFiala Trotzdem kann man das argumentieren <pre> ist semantischer als <div>. Nehmen wir an, dass beide Antworten das vollständige Bild liefern 😉

    – Alvaro González

    11. Januar 2018 um 8:06 Uhr

1257530cookie-checkASCII-Grafik in HTML [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy