The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CODE example text styling
Christian J
post Aug 28 2006, 02:06 PM
Post #1


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Maybe it's just me, but I think the CODE examples are hard to read:

CODE
window.onload=function()
{
    var a=document.getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        a[i].style.color='#0f0';
    }
}


due to the font (Verdana? which uses too much letter-spacing) and line-height (too high).

My personal preference is Courier New with 1em line-height. wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 28 2006, 02:10 PM
Post #2


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I suck at font recognition, but that ain't Verdana. Looks fixed width to me. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Aug 28 2006, 02:20 PM
Post #3


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



Yes Courier would be better imo, it's more illustrative of code, and it stands out better from message test. Same for HTML and SQL BBcode.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 28 2006, 02:24 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE
I suck at font recognition, but that ain't Verdana. Looks fixed width to me.


You're right. And I even confirmed that it was monospaced a few days ago. blush.gif

Must be Courier then (i.e. not Courier New, which is much nicer). Anyway, the annoying things are the letter-spacing and line-height. Especially in HTML tags the < and > look stretched-out:

CODE
<table width="717" height="231"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post Aug 28 2006, 02:33 PM
Post #5


WDG Founder
******

Group: Root Admin
Posts: 529
Joined: 3-August 06
From: Magnolia, TX
Member No.: 2



I've made a couple of changes. This is the current applicable CSS:
CODE
.codemain,
.sqlmain,
.htmlmain
{
    background: #FAFCFE;
    border: 1px dotted #000;
    color: #465584;
    font-family: Courier, Courier New, Verdana, Arial;
    margin: 0 auto 0 auto;
       line-height: 1em;
    padding: 0px;
    width: 98%;
}


Anything else we want changed?

John
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 28 2006, 03:04 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(John Pozadzides @ Aug 28 2006, 09:33 PM) *

I've made a couple of changes. This is the current applicable CSS:


CODE
font-family: Courier, Courier New, Verdana, Arial;


I'd much prefer "courier new" before "courier" in the list, possibly ending with the generic "monospace":

CODE
font-family: "Courier New", Courier, monospace;


And maybe you could use the same padding as in the QUOTE boxes?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post Aug 28 2006, 03:18 PM
Post #7


WDG Founder
******

Group: Root Admin
Posts: 529
Joined: 3-August 06
From: Magnolia, TX
Member No.: 2



Done.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 28 2006, 03:26 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Thank you. smile.gif

If someone complains about the line-height being too small, I guess it's OK if you increase just a little (but it's fine with me now, mind you). As long as you don't remove the Courier New font...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 28 2006, 06:29 PM
Post #9


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



How about "Lucida Console"?

For that matter, it might make more sense to use <pre class="codemain"> than <div class="codemain">.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 28 2006, 06:53 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Darin McGrew @ Aug 29 2006, 01:29 AM) *

How about "Lucida Console"?


First impression is a bit odd, with the uneven letter heights:

look how small lower-case "t" is: <table>, same thing with UPPERCASE text

Which fonts do you use in your text editors?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post Aug 28 2006, 07:07 PM
Post #11


WDG Founder
******

Group: Root Admin
Posts: 529
Joined: 3-August 06
From: Magnolia, TX
Member No.: 2



QUOTE(Christian J @ Aug 28 2006, 06:53 PM) *

Which fonts do you use in your text editors?

I try not to use Text editors. smile.gif
But Lucidia Console is the default.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 28 2006, 07:51 PM
Post #12


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I use Bitsream Vera Sans Mono, but I've yet to find one I really like.

QUOTE(Darin McGrew @ Aug 29 2006, 01:29 AM) *

For that matter, it might make more sense to use <pre class="codemain"> than <div class="codemain">.


Yeah, it must be PRE so whitespace isn't collapsed. mellow.gif
Or is the DIV styled that way?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 29 2006, 06:34 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(John Pozadzides @ Aug 29 2006, 02:07 AM) *

I try not to use Text editors. smile.gif


You mean you use WYSIWYG-editors? ohmy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post Aug 29 2006, 06:42 PM
Post #14


WDG Founder
******

Group: Root Admin
Posts: 529
Joined: 3-August 06
From: Magnolia, TX
Member No.: 2



QUOTE(Christian J @ Aug 29 2006, 06:34 PM) *

QUOTE(John Pozadzides @ Aug 29 2006, 02:07 AM) *

I try not to use Text editors. smile.gif


You mean you use WYSIWYG-editors? ohmy.gif

Hell no! I actually use Homesite most often, and stay away from notepad when possible. I've got all my little shortcuts memorized in Homesite and I can display the text in any font I please. Not that notepad won't do it also... but let's face it. Notepad just sucks and I equate it with Text editors in general.

John
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 29 2006, 07:17 PM
Post #15


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Notepad sucks but you would be surprised how much text editors have evolved since the days Notepad was new and hot. tongue.gif

I've only tried the old HomeSite. And TopStyle.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:30 AM