ASCII Art Almost There - Please Help With Aspect Ratio |
ASCII Art Almost There - Please Help With Aspect Ratio |
sgtscott |
Dec 5 2023, 09:21 AM
Post
#1
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
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 |
sgtscott |
Dec 5 2023, 10:12 AM
Post
#2
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
Oops: I meant to say above:
QUOTE I tried CODE line-height:0.5; and it does help...This post has been edited by sgtscott: Dec 5 2023, 10:13 AM |
Christian J |
Dec 6 2023, 10:43 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,730 Joined: 10-August 06 Member No.: 7 |
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 |
pandy |
Dec 7 2023, 02:49 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,759 Joined: 9-August 06 Member No.: 6 |
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 . |
pandy |
Dec 7 2023, 02:44 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,759 Joined: 9-August 06 Member No.: 6 |
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. |
Christian J |
Dec 7 2023, 04:15 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,730 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Dec 7 2023, 04:37 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,759 Joined: 9-August 06 Member No.: 6 |
Yes, you do. Unless you use 'normal'. And I didn't read past the first bit that kills the whole thing.
|
coothead |
Dec 7 2023, 06:48 PM
Post
#8
|
Advanced Member Group: Members Posts: 227 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lo-Fi Version | Time is now: 19th October 2024 - 03:09 PM |