web-dev-qa-db-fra.com

ASCII art en HTML

Que puis-je faire pour l'imprimer comme il apparaît dans le document HTML du navigateur Web?

<!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>

Donne:

# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ### # # #> ## ### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######
htmlascii-art
35
Mladek

Utilisez le <pre> tag! Mettez-le avant et après votre EXEMPLE.

<!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>
75
John Fiala

Le HTML est conçu pour réduire les espaces blancs par défaut. Dans l'ordre des mots, toutes les séries de caractères d'espaces blancs (espaces, tabulations, sauts de ligne ...) sont remplacées par un seul espace lors du rendu. Vous pouvez contrôler ce comportement avec la propriété CSS white-space :

Le white-space La propriété CSS est utilisée pour décrire comment les espaces blancs à l'intérieur de l'élément sont gérés.

Valeurs

  • normal Les séquences d'espaces sont réduites. Les caractères de nouvelle ligne dans la source sont traités comme d'autres espaces blancs. Coupe les lignes si nécessaire pour remplir les zones de ligne.
  • pre Les séquences d'espaces sont préservées, les lignes ne sont interrompues qu'au niveau des caractères de nouvelle ligne dans la source.
  • nowrap Réduit les espaces comme d'habitude, mais supprime les sauts de ligne (habillage de texte) dans le texte.
  • pre-wrap Les séquences d'espaces sont conservées. Les lignes ne sont coupées qu'au niveau des caractères de nouvelle ligne dans la source et, si nécessaire, pour remplir les zones de ligne.
  • pre-line Les séquences d'espaces sont réduites. Les lignes sont interrompues aux sauts de ligne dans la source et, si nécessaire, pour remplir les zones de ligne.

Dans le cas ASCII art, vous souhaitez également appliquer une largeur fixe font-family .

.ascii-art {
    font-family: monospace;
    white-space: pre;
}
<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>
12
Álvaro González