The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> ASCII Art Almost There - Please Help With Aspect Ratio
sgtscott
post 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: 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sgtscott
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 6 2023, 10:43 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,661
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2023, 02:49 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2023, 02:44 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 7 2023, 04:15 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2023, 04:37 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Dec 7 2023, 06:48 PM
Post #8


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 09:45 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC