A Couple of CSS Questions For Displaying ASCII Art |
A Couple of CSS Questions For Displaying ASCII Art |
sgtscott |
Dec 4 2023, 09:03 AM
Post
#1
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
Can I remove this gap at the top of the page?
I have tried margin: 0; padding: 0; border: 0; outline: 0; and more but nothing I do seems to be able to get rid of it. It is there in Chrome, Edge and Brave. and also, 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): CODE <html> <head> <body bgcolor = "#000000"> <pre><font face = "Courier New" size ="1"> <font color = "#660099">F</font><font color = "#660066">v</font><font color = "#660066">v</font>... and then end the file with: ...<font color = "#002B00">:</font><font color = "#660066">v</font><font color = "#660099">F</font> </pre> </body> </html> 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 |
sgtscott |
Dec 4 2023, 09:19 AM
Post
#2
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
I have tried several services and cannot share my image. It's an image of ASCII art but there is a black gap about 1/2" tall right above the top of the browser window and the image. I want this to go away if possible.
|
pandy |
Dec 4 2023, 11:37 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Yeah. Browsers add margin or padding to BODY. So remove that, at lest at top. You can put this in a style block in HEAD.
CODE body { margin-top: 0; padding-top: 0 } But you would still have a little space at top because of the line breaks between the FONT tags. That's what PRE does, preserves whitespace. But what's worse, you cannot have FONT inside PRE. It may work in practice - or it may not. Better use CSS for all formatting and you can then use SPAN instead of FONT, since SPAN is allowed inside PRE. And FONT is very old school. See https://htmlhelp.com/reference/html40/block/pre.html Footnote: I haven't checked if this has changed with HTML 5. |
Christian J |
Dec 4 2023, 03:54 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
The PRE element itself also has a default margin that needs to be removed with CSS.
|
pandy |
Dec 4 2023, 04:12 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
What browser? I didn't remember if it has amargin and sloppy as I am I only checked in k-mel and there it was none.
|
pandy |
Dec 4 2023, 04:20 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
What the heck do you use? Opera?
Checked in FF and Edge. No margin. Was going to try IE and then I got this: CODE The future of Internet Explorer is in Microsoft Edge. Internet Explorer (IE) has been retired and is no longer supported. If any site you visit needs Internet Explorer, you can reload it with IE mode in Microsoft Edge. Select "Continue" to get started with Microsoft Edge, the fast and secure browser built for Windows. Your favorites, passwords, history, cookies, and other browser data will be automatically brought over to Microsoft Edge so you can seamlessly continue browsing. No choices here. I don't think I have any personal bookmarks in IE but they usually add a bunch by default and I don't want them transferred. But there is no way to say no, not even to close the window, just the Continue button. So Ctrl+Alt+Delete. No EI. Took a while to realize it was one of the Edge processes... Sigh. |
coothead |
Dec 4 2023, 06:17 PM
Post
#7
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
pandy |
Dec 4 2023, 11:47 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Yeah. Sloppy again. I just checked there was no margin at top of the page with the margin/padding on BODY removed. Must be a case of collapsing margins then.
|
Christian J |
Dec 5 2023, 06:13 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
sgtscott |
Dec 5 2023, 09:03 AM
Post
#10
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
Thank you. That helped me reduce that margin.
|
sgtscott |
Dec 5 2023, 09:04 AM
Post
#11
|
Group: Members Posts: 6 Joined: 4-December 23 Member No.: 29,094 |
I'm not sure how to mark this Resolved?
|
Christian J |
Dec 5 2023, 10:26 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Dec 5 2023, 10:53 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 25th September 2024 - 09:46 AM |