Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ ASCII Art Almost There - Please Help With Aspect Ratio

Posted by: sgtscott Dec 5 2023, 09:21 AM

So my ASCII Art Maker program is close but my CSS is not perfect. The font is just slightly taller than it is wide, making the final ASCII Art look a little vertically stretch. Here is the before image, the ASCII Art and the CSS source.

Before Image: IPB Image

ASCII Art Image: IPB Image

Source Code: IPB Image

or the CSS part of the code:

CODE
<html>
<code><span class="asciiart" style=" background: black;
body  { margin-top: 0; padding-top: 0 };
display:inline-block;
line-height:0.8;
letter-spacing:.8;
white-space:pre;
font-family:'Consolas','BitstreamVeraSansMono','CourierNew',Courier,monospace;
font-size:10px;">
<body bgcolor = #000000>
<span style="color:#010000;"> </span><span style="color:#010000;"> </span>


Can anyone help make each font be square (like a pixel). I tried
CODE
line-height:0.8;
and it does help the aspect ratio, but it also makes the lines of font overlap each other. I like the fact that people can see that the final image is made up of fonts and not a bunch of characters mashed together.

BTW: this program is great if you have a ton of thumbnails of photos. For regular sized photos, it takes too long to process and the final image is huge.

Thank you

Posted by: sgtscott Dec 5 2023, 10:12 AM

Oops: I meant to say above:

QUOTE
I tried
CODE
line-height:0.5;
and it does help...

Posted by: Christian J Dec 6 2023, 10:43 AM

Maybe some fonts are more square than others?

Or maybe you could use CSS letter-spacing to separate each character a little more: https://www.w3.org/TR/css-text-3/#letter-spacing-property

Posted by: pandy Dec 7 2023, 02:49 AM

QUOTE(sgtscott @ Dec 5 2023, 03:21 PM) *

Source Code: IPB Image

or the CSS part of the code:
CODE
<html>
<code><span class="asciiart" style=" background: black;
body  { margin-top: 0; padding-top: 0 };
display:inline-block;
line-height:0.8;
letter-spacing:.8;
white-space:pre;
font-family:'Consolas','BitstreamVeraSansMono','CourierNew',Courier,monospace;
font-size:10px;">
<body bgcolor = #000000>
<span style="color:#010000;"> </span><span style="color:#010000;"> </span>




Is that how you really have it? If so none of your CSS should be read. It's, well, as wrong as can be. unsure.gif

You've put all the CSS as part of a start tag for SPAN. And what's CODE doing there? You need to put it in a style block in HEAD. See here: https://htmlhelp.com/reference/css/style-html.html#embedding .

Posted by: pandy Dec 7 2023, 02:44 PM

QUOTE(Christian J @ Dec 6 2023, 04:43 PM) *

Maybe some fonts are more square than others?

Or maybe you could use CSS letter-spacing to separate each character a little more: https://www.w3.org/TR/css-text-3/#letter-spacing-property


My guess is that both a little lower line-height and a little more letter-spacing would be the best. To avoid overlapping.

Posted by: Christian J Dec 7 2023, 04:15 PM

QUOTE(pandy @ Dec 7 2023, 08:49 AM) *

Is that how you really have it? If so none of your CSS should be read.

I completely missed that part, and that the OP already used letter-spacing. blush.gif But don't you need units for letter-spacing values?

Posted by: pandy Dec 7 2023, 04:37 PM

Yes, you do. Unless you use 'normal'. And I didn't read past the first bit that kills the whole thing. smile.gif

Posted by: coothead Dec 7 2023, 06:48 PM

QUOTE(sgtscott @ Dec 5 2023, 03:21 PM) *


Can anyone help make each font be square (like a pixel).



Does this help...

Full Page View
https://codepen.io/coothead/full/mdvvoGr

Editor View
https://codepen.io/coothead/pen/mdvvoGr


coothead

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)