What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

CSS To Fix Font Aspect Ratio to 1:1


New member
I wrote a VB.Net program that lets you load any small image and then converts that image to ASCII art as HTML. I currently write the HTML as (for example):

<body bgcolor = "#000000">
<pre><font face = "Courier New" size ="1">
<font color = "#660099">&#70;</font><font color = "#660066">&#118;</font><font color = "#660066">&#118;</font>...

and then end the file with:

...<font color = "#002B00">&#58;</font><font color = "#660066">&#118;</font><font color = "#660099">&#70;</font>

It simply copies the color image loaded and makes a grayscale copy and then based on that value, picks an ASCII character (I have 92 characters all weighted from darkest to lightest) mapped to a gray shade value 0 to 255.

Then with the original color image I take the RGB and convert it to <font color = "#RRGGBB>&#ASC Value</font>.

and this works well EXCEPT Courier New is slightly taller that it is wide so my ASCII art looks a bit stretched. I could change my code to "squash" the image before rendering the HTML, but I wondered if instead there was a CSS statement that could make Courier New (or any fixed width font) to have a 1 to 1 aspect ratio when displayed?

Thank you