Font Sizes in 1.5+ Themes

Font Sizes in 1.5+ Themes

by Erlyn Baack -
Number of replies: 5

Since 1.5+, I have had problems with the themes because they do not display the font sizes correctly (or proportionally).  For example, I like Andrea Giardina's new e-socrates theme a lot.  When I went into his site at http://e-socrates.org and browsed around, everything looked great for all the reasons others mentioned in that thread.  When I uploaded the theme to my own site, however, many of the font sizes appear "normal" size, but others appear too small to read.  I must adjust the font size in IE6 to at least "medium" or "larger," but when I do, the large fonts are too large.

I've tried viewing my site in Firefox 1.5, and the font changes are "less bad,"-) but I don't understand the origin of the problem or the solution to the way font sizes change.  Generally, I use the theme "formal_white" because the font sizes always appear proportionally "correct" (and I like that theme as well), but I can't use cornflower, ocean blue, or metal at all because of font size irregularities.

My trial site with the new e-socrates theme is at http://phlurns.com/iwrite, and to me it looks like the text in the right column is too small.  Is this a problem with my site host, a browser problem, a setting problem, or what?  Thanks!

Average of ratings: -
In reply to Erlyn Baack

Re: Font Sizes in 1.5+ Themes

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Erlyn,

The matter of font size display in browsers is fairly complicated and if you browse around on the Net you will find scores of sites giving (often contradictory) advice about this problem.

This is what I have discovered so far:

  • It is usually better for css stylesheets to state font sizes using relative values (%, em, etc) rather than absolute (pixels). That way, if the end-user resizes font sizes in his browser, all parts of text displayed will be resized proportionally.
  • However, Mozilla-family browsers (such as the excellent Firefox) will resize text even if its size has been given in absolute (pixels) values in the css, which MS IE 6 will not be able to do.

Consequently, in order to make text a) look approximately the same whether viewed in FF or MSIE, and b) to be harmoniously and proportionally resized when the end-user modifies the text-size in his browser, most webmasters, theme and css designers now use a mixture of %, em and px font sizes. The themes introduced from Moodle 1.5 follow these conventions, which was not the case of themes such as cornflower in Moodle 1.4, which broke completely when resized in MSIE (text appeared either huge or tiny when resized at other sized than "medium").

Now, to me, the e-socrates theme appears exactly the same in FF and MSIE6, on the condition of course that FF is set at text-size = 100% and MSIE at text size = medium.

You say that you have to adjust font size in MSIE6 to medium in order to view your site the same as in FF, and this is perfectly normal, it is as it is meant to work.smile

I do not understand what you mean by "large fonts are too large". When I view either Andrea's e-socrates.org site or your phlunrs.com/iwrite site in either FF or MSIE6, they look exactly the same (which is as it should be). Can you please tell us where (in Andrea's or in your own) site you find that text appears too big?

Finally, if you want to have text in the right sideblock on your own site look bigger, change this in esocratesorg, file styles_font.css

.sideblock {
  font-size:0.7em 0.8em
}

Hope that helps,

Joseph


Average of ratings: Useful (1)
In reply to Joseph Rézeau

Re: Font Sizes in 1.5+ Themes

by Erlyn Baack -

Hi Joseph,

Thanks a lot for the tips!  This is going to take a little bit of investigation on my part.  I changed the size of the font as you indicated 0.7 to 0.8, and it made a difference in Firefox but not in IE.  I prefer the original 0.7 size in Firefox.

However, the fonts sizes in the sideblocks of IE are simply too small in my site (even with text size set at medium), but not in the e-socrates.org site.  At this point I want to try a computer at school tomorrow, and then I'll come back and take a couple of screenshots of (1) the e-socrates site where font sizes are excellent in my IE and of (2) my site where the font sizes appear too small in IE.  This is just going to take some time to understand a little bit better.

Thanks again!

Erlyn

In reply to Erlyn Baack

Re: Font Sizes in 1.5+ Themes

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Erlyn,


>I changed the size of the font as you indicated 0.7 to 0.8, and it made a difference in Firefox but not in IE.

This is strange, it should make a difference.wide eyes

Just some thoughts: I hope you are using MSIE on Windows, not on a Mac, where it is notoriously misbehaving. Is it the latest version 6? Are you sure you have not changed any of the internet parameters/settings in MSIE on your machine? Have you emptied the cache and forced a refresh (Ctrl-F5) after you modified the point size from 0.7 to 0.8 ?

Yes, try both sites and different settings on different machines and come back.

Joseph

In reply to Joseph Rézeau

Re: Font Sizes in 1.5+ Themes

by Erlyn Baack -

Hi Joseph,

You see, my ignorance here is showing.  I never knew about the control F5. 

THAT made the difference as you said it would, and now I can check out some of those other themes too, the ones that have been giving me problems! smile

Thanks a lot! 

Erlyn

In reply to Erlyn Baack

Re: Font Sizes in 1.5+ Themes

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Real knowledge is to know the extent of one's ignorance. attributed to Confucius.

Have a nice day.
Joseph