Como definir el estilo, color y posición de los dibujos y figuras del arte ASCII

Al crear cualquier dibujo, figura o composición e insertarla en una página web se mostrará usando la fuente y el estilo predeterminado en el navegador que se emplee, en ocasiones puede ser decepcionante comprobar que una composición creada con mucho tiempo y esfuerzo no se ve de la manera correcta.
Es posible si se tiene acceso al código fuente de la página donde se inserte la composición, controlar y establecer exactamente la forma en que el navegador debe representarlo. Esto puede hacerse si se posee una página web personal, pero también un blog creado en Wordpress o Blogger, e inclusive en páginas hechas en sitios sociales como MySpace. En Facebook es completamente imposible.

Como modificar el estilo de los dibujos ASCII

Generalmente los caracteres que componen una figura ASCII se insertan en el código HTML encerrados entre dos etiquetas o tags: <pre></pre>, se usa esta etiqueta porque lo que se encuentre entre ellas se mostrará con la posición exacta, es decir no es necesario emplear los tags <br> para los saltos de línea ni caracteres en el espacio entre los caracteres.
Para controlar el estilo de una figura insertada dentro cualquier bloque o contenedor, ya sea: <pre>, <div>, <span> podemos usar los estilos CSS, en este caso en línea. Consiste en establecer dentro de la etiqueta del bloque el estilo, que afectará a todo el texto comprendido en el bloque. Esto se logra con el uso del atributo STYLE, que posee a su vez una serie de sub-atributos y parámetros, cada uno de los cuales define una propiedad del estilo del texto, se usa de la siguiente forma:

<pre style="parametro:valor;">
ELEMENTOS ASCII
</pre>

Se pueden emplear una multitud de parámetros con el atributo STYLE, para controlar y definir exactamente el estilo de cualquier elemento, solo trataremos los más utilizados, que son los siguientes: color, font-size, font-family y line-height.
La información sobre todos los parámetros que se pueden usar, puedes leerla en la página: Tutorial y manual básico de los estilos CSS

Parámetros más utilizados para controlar el estilo

Usar el parámetro color

Usar el parámetro font-size

Usar el parámetro font-family

Usar el parámetro line-height

Como habrás observado entre el parámetro y el valor se usan : (dos puntos) y al terminar el valor siempre se inserta el carácter ; (punto y coma).

Ejemplos prácticos de la modificación del estilo en figuras ASCII

1- En el siguiente ejemplo se muestra una sencilla figura representada con los valores predeterminados del navegador y a continuación modificando algunos de los valores en la etiqueta del estilo.
Se han usado los siguientes códigos:
2- En el siguiente ejemplo se muestra como la reducción de la fuente y del espaciado aumenta la nitidez de un dibujo.

                                          _
                                         / )
                                    .--.; |    _...,-"""-,
                     .-""-.-""""-. /   _`'-._.'   /`      \
                    /'     \      \|  (/'-._/     )        ;
            .-""""-;       (       '--' /-'    _           |
          .'       |        ;    e     /       a  ,       ;
         /          \       |      __.'`-.__,    ;       /
        /            `._     ;    .-'     `--.,__.\    /`
       //|              \     \,-'                /\_.'
      // |               `;.___>              /,-'.
    /`|  /                |`\      _..---\    |    \
    |/  /     _,.-----\   |  \   /`|      |   |\    \
       /    .;   |    |   |   \ /  |      |   | \    )
      |    / |   \    /   |\..' \   \     |   \  \..'
       \../  \.../    \.../ \.../---'     \.../

                                          _
                                         / )
                                    .--.; |    _...,-"""-,
                     .-""-.-""""-. /   _`'-._.'   /`      \
                    /'     \      \|  (/'-._/     )        ;
            .-""""-;       (       '--' /-'    _           |
          .'       |        ;    e     /       a  ,       ;
         /          \       |      __.'`-.__,    ;       /
        /            `._     ;    .-'     `--.,__.\    /`
       //|              \     \,-'                /\_.'
      // |               `;.___>              /,-'.
    /`|  /                |`\      _..---\    |    \
    |/  /     _,.-----\   |  \   /`|      |   |\    \
       /    .;   |    |   |   \ /  |      |   | \    )
      |    / |   \    /   |\..' \   \     |   \  \..'
       \../  \.../    \.../ \.../---'     \.../

3- En el siguiente ejemplo se muestra tres figuras representadas por fuentes diferentes, en este caso: Arial, Tahoma y Verdana respectivamente, como se observa existen diferencias.


4- Un último ejemplo, se usa adicionalmente el parámetro background-color para dar el color de fondo y se emplean caracteres Unicode.

╔╗
║║╔═╦╦╦═╗
║╚╣║║║║╩╣
╚═╩═╩═╩═╝

El código usado es:
<pre style="padding-left:260px;color:white;font-size:32px;line-height:26px;background-color:blue;margin:6px 0 6px 0;"> &#9556;&#9559; &#9553;&#9553;&#9556;&#9552;&#9574;&#9574;&#9574;&#9552;&#9559; &#9553;&#9562;&#9571;&#9553;&#9553;&#9553;&#9553;&#9577;&#9571; &#9562;&#9552;&#9577;&#9552;&#9577;&#9552;&#9577;&#9552;&#9565; </pre>
Puedes conocer cómo usar los caracteres Unicode para crear hermosas composiciones en varias páginas de este sitio:

---

Como insertar la composición ASCII en el código fuente o HTML de una página web

Si publicas tus dibujos o figuras en un blog en Wordpress o Blogger, lo ideal es probarlos en tu equipo local antes de subirlo a la red.
Para eso crea una pequeña plantilla con la que podrás comprobar de forma exacta la forma en que se mostrarán e ir modificando los valores del estilo en caso de ser necesario.
Utiliza el siguiente código para crear la plantilla o descarga el archivo HTML en el link mas abajo. <html> <head> <title>Plantilla ASCII</title> </head> <body> <pre style='color:black;font-size:18px;line-height:18px;font-family:monospace;'> FIGURA ASCII </pre> </body> </html>
Descarga plantilla para dibujos ASCII

A continuación haz lo siguiente:

Páginas relacionadas