ASCII искусство в HTML - PullRequest
Новая
       14

ASCII искусство в HTML

31 голосов
/ 09 ноября 2009

Что я могу сделать, чтобы он печатался так, как он выглядит в HTML-документе в веб-браузере? 

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

Дает:

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

Ответы [ 2 ]

66 голосов
/ 09 ноября 2009

Используйте тег <pre>! Поместите его до и после вашего ПРИМЕРА. 

<code><!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>
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
9 голосов
/ 19 июня 2017

HTML по умолчанию предназначен для сжатия пробелов. Другими словами, при рендеринге все серии символов пробелов (пробелы, табуляции, переводы строк ...) заменяются одним пробелом. Вы можете контролировать это поведение с помощью свойства white-space CSS:

CSS-свойство white-space используется для описания того, как обрабатываются пробелы внутри элемента.

Значение

  • normal Последовательности пробелов свернуты. Символы новой строки в источнике обрабатываются как другие пробелы. Разрывает строки по мере необходимости, чтобы заполнить линейные блоки.
  • pre Последовательности пробелов сохраняются, строки разбиваются только на символах новой строки в источнике.
  • nowrap Свертывает пробелы, как и в обычном режиме, но подавляет разрывы строк (перенос текста) внутри текста.
  • pre-wrap Последовательности пробелов сохраняются. Строки разбиваются только на символах новой строки в источнике и при необходимости заполняют поля строк.
  • pre-line Последовательности пробелов свернуты. Строки разбиваются на новых строках в источнике и по мере необходимости заполняют строки.

В случае с ASCII art вы также хотите использовать font-family фиксированной ширины . 

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