web-dev-qa-db-ja.com

ASCII HTMLのアート

Webブラウザーの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>

与える：

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

使用 <pre> 鬼ごっこ！あなたのEXAMPLEの前後に置いてください。

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

HTMLはデフォルトで空白を折りたたむように設計されています。つまり、一連の空白文字（スペース、タブ、改行...）はすべて、レンダリング時に1つのスペースに置き換えられます。この動作は white-space CSSプロパティで制御できます。

white-space CSSプロパティは、要素内の空白がどのように処理されるかを説明するために使用されます。

値

  • normal空白のシーケンスは折りたたまれています。ソース内の改行文字は、他の空白として扱われます。行ボックスを埋めるために必要に応じて行を分割します。
  • pre空白のシーケンスが保持され、ソース内の改行文字でのみ改行されます。
  • nowrap通常どおり空白を折りたたみますが、テキスト内の改行（テキストの折り返し）を抑制します。
  • pre-wrap空白のシーケンスが保持されます。改行は、ソースの改行文字でのみ改行され、必要に応じて行ボックスを埋めます。
  • pre-line空白のシーケンスは折りたたまれています。ソースの改行で、および必要に応じて行ボックスを埋めるために、行が分割されます。

ASCII artの場合、固定幅 font-family も強制したいとします。

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