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:
ASCII Art Image:
Source Code:
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:
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.
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.
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.
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