w3org - Arte ASCII en HTML
html specification w3c (2)
¿Qué podría hacer para que se imprima como se ve en el documento HTML en el navegador 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>
Da:
# # ## # # ##### # ###### # # # # # ## ## ## # # # ##### ## # # # ## # # # # # # # # # ### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # ###### ######
HTML está diseñado para colapsar espacios en blanco por defecto. En palabras de orden, todas las series de caracteres de espacios en blanco (espacios, tabulaciones, saltos de línea ...) se reemplazan por un solo espacio en la representación. Puedes controlar este comportamiento con la propiedad CSS de white-space :
La propiedad CSS de espacios en blanco se usa para describir cómo se manejan los espacios en blanco dentro del elemento.
Valores
- Se colapsan
normalsecuenciasnormalde espacios en blanco. Los caracteres de nueva línea en la fuente se manejan como otros espacios en blanco. Rompe las líneas según sea necesario para llenar las cajas de línea.- Se conservan
presecuenciasprede espacios en blanco, las líneas solo se dividen en los caracteres de nueva línea en la fuente.nowrapespacios en blanco como para normal, pero suprime los saltos de línea (ajuste de texto) dentro del texto.pre-wrapSe conservan las secuencias de espacios en blanco. Las líneas solo se dividen en los caracteres de nueva línea en la fuente y según sea necesario para rellenar los cuadros de línea.- Se colapsan las secuencias de
pre-linede espacios en blanco. Las líneas se rompen en las líneas nuevas en la fuente y, según sea necesario, para rellenar los cuadros de línea.
En el caso del arte ASCII, también desea imponer una font-family ancho fijo.
.ascii-art {
font-family: monospace;
white-space: pre;
}
<div class="ascii-art">
###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######
</div>
Use la etiqueta <pre> Ponlo antes y después de tu EJEMPLO.
<!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>