I don’t care if it’s the exact same appearance. I just don’t think it’s very readable in Firefox. My goal is to have a readable font in Firefox in some way that doesn’t break it for other browsers.
Turning text into images doesn’t work b/c then visitors can’t cut and paste examples into their own code.
I’ve seen other software blogs that look a lot better and consistently readable across different browsers - how do they do it? Do we have any software bloggers here?
No, I said I “tried” it - past tense. Courier New was worse than the default monofont on Firefox - the characters were too wide so it made my code samples run off their background in Firefox.
But I’ll try some of the other suggestions here today (Monday) and Tuesday. So it may be changing over the next few days.
Good advice… except the px size for font![/QUOTE]
I’ve seen other software blogs that look a lot better and consistently readable across different browsers - how do they do it? Do we have any software bloggers here?
Hey, next time you run into one of those, look at their CSS! Or paste a url here and we can look. Then you’ll see whatever it is they’re doing.
I notice on a lot of pages the code gets cut off. When I turn on Javascript, everything fits. Possibly some of these bloggers are using Javascript.
Maybe this link will help? They’ve got a font stack builder for you, with samples.
When I do this the characters run off the margin after 64 characters in Firefox, but 79 characters in IE8. 64 is really not enough to show much XML. Dropping it to 11px for some reason only adds 1 more character to FF before falling off the margin, but adds 11 characters (total of 90) to IE before going off the margin!! Dropping it to 10px looks like the original image I posted, with a huge difference between FF and IE.
I don’t care if IE and FF look identical, but I’d like to at least get similar line length, so, say, 80 lines of source code don’t end up looking too narrow on one browser and run off the margin on the other.
I’ve noticed this too. (although I do have Javascript enabled) Just last night I was on a programming blog (I ferget which) where it was all cut off and I couldn’t read it but if I highlighted it and pasted it into a text editor everything was there including the cut off parts! Weird.
I added this font stack and it’s the best result I’ve gotten so far, regarding consistency. (thanks!)
With a font size of 11px I can show 64 characters before running off the margin in FF and 71 in IE8, so the disparity is reduced, compared to before. The default browser on my Android phone shows 70.
64 characters is really too small for source code it makes you use too many line breaks - so I’m using a font size 10px but that results in pretty small text.
I think the next thing I need to do is play around with the Wordpress theme - I’m just using their default 3.xx theme - if I twiddle with it I can probably make the margins narrower so I can fit more content across and then up the font size to 11px.
I have no further comments or questions. Thanks to everybody!
You may be interested in this article from Eric Meyer which backs up my findings from earlier in this thread except that he explains it more clearly 