A question about 'relative' and 'absolute' in HTML/CSS
The question is basically - what do they actually mean? I have just been playing with setting some font sizes to various 'relative' sizes and the results don't seem to make sense to me. OK, I *think* I know what the 'absolute' sizes mean. If I set a size to "1cm" (yes, I know the quotes aren't necessary in the CSS) I get something that is 1cm high and if I set it to "1in" I get text one inch high. However I'm not at all clear how the system knows how big my display is, if I connect a smaller display to the same output then the text will be smaller even though I have changed nothing. Is the correct absolute size dependent on me having set up my display correctly at some point? Anyway, on to the bit I understand less well, what do relative sizes mean? For font-size we have:- * em (ems, the height of the element's font) * ex (x-height, the height of the letter "x") * px (pixels, relative to the canvas resolution) So what is meant by "the height of the element's font"? It can't be an absolute value (in cm or in) because that would mean the result would be absolute. I can see that there could be a relation between everything and, say, the default BODY text size so that if you change the BODY text size everything else changes in proportion but where does that BODY text size come from? Is it what I set in my browser as the font size? If that is right I sort of follow, everything is relative to the default font size set in the browser. Sizes set in em or ex are then relative to that size. However that leaves pixels, what on earth does "pixels, relative to the canvas resolution" mean? Does it mean a size related to the screen size, but how does one interpret 'pixels' in this context? If I say the font size is to be 16 pixels what does that really mean? If it really means 16 pixels of my screen then surely it's an absolute size. Certainly none of the relative sizes are relative to the browser window size which in many ways would make most sense. If they *were* relative to the window size a web page would (if it used relative sizes) just scale as you grow and shrink the window. As it is, even with relative sizes for things, when you grow and shrink the window the text stays the same size and is re-laid out to fit. Whatever, there's surely a web site somewhere that explains all this, can someone point me at it please. http://www.htmlhelp.com/ is an excellent site for the details of writing HTML and CSS but doesn't really explain the sizing (not for me anyway). -- Chris Green
On 9/15/07, Chris G <cl@isbd.net> wrote:
However I'm not at all clear how the system knows how big my display is, if I connect a smaller display to the same output then the text will be smaller even though I have changed nothing. Is the correct absolute size dependent on me having set up my display correctly at some point?
In fonts and printing there are always 72 points per inch. In theory monitors report their horizontal and vertical image sizes in millimetres via EDID. Windows ignores this and usually assumes 96 dots/pixels per inch, resulting in a 3pt to 4px conversion. Unfortunately I can't remember if X-Windows on Linux takes a similar approach (more consistent) or the correct approach. Hope this helps, Tim.
On Sun, Sep 16, 2007 at 01:07:14AM +0100, Tim Green wrote:
On 9/15/07, Chris G <cl@isbd.net> wrote:
However I'm not at all clear how the system knows how big my display is, if I connect a smaller display to the same output then the text will be smaller even though I have changed nothing. Is the correct absolute size dependent on me having set up my display correctly at some point?
In fonts and printing there are always 72 points per inch. In theory monitors report their horizontal and vertical image sizes in millimetres via EDID. Windows ignores this and usually assumes 96 dots/pixels per inch, resulting in a 3pt to 4px conversion.
Unfortunately I can't remember if X-Windows on Linux takes a similar approach (more consistent) or the correct approach.
Hope this helps,
Ah, thank you, at least that clears up the "point size" question. -- Chris Green
On 15/09/2007, Chris G <cl@isbd.net> wrote:
The question is basically - what do they actually mean?
There are four ways to set a font size using CSS. An "absolute size" is one of xx-small, x-small, small, medium, large, x-large, xx-large. Despite the name, these are relative to the browsers default font size, but absolute to that browser config - i.e. a "font-size: small" will be the same size wherever it appears on your page. Typically each step in/decreasing by 20% IIRC from "medium". A "relative size" is "smaller" or "larger" (again, 20% IIRC). This is relative to the inherited font size for that element. A "percentage size" is a percentage of the inherited font size, so font-size: 80% is equivalent to font-size: smaller, though there are (were?) some nasties with different browsers in this area (different browsers have different definitions as to what the size is a percentage of, though things may be better nowadays). A "length" is either relative to something (em, ex, px) or fixed (pt, mm, in, etc.). There's a good explanation of lengths at http://www.bigbaer.com/css_tutorials/css_font_size.htm but TBH I disagree with their conclusions (but then it's an old reference). I wouldn't use relative lengths for fonts, though they are OK for things like DIVs or IMGs, and I see no purpose for fixed lengths on screen at all (they do of course come in to their own for hard copies). In an ideal world, I much prefer using the relative size measurements "smaller" or "larger". In an ideal world, that is. For example: == Example begin <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> p { font-size: medium; } /* Redundant */ .smallprint { font-size: smaller; } </style> </head> <body> <p>This is medium (default)</p> <p class="smallprint">This is smaller</p> <p class="smallprint"><span style="font-size: smaller">This is smaller still</span></p> == Example end In the above, there's no way that I'm aware of to have a single class that has a "smaller smaller" font size - achieved above by nesting a "font-size: smaller" span in a <p> of class "smallprint". One way around this is to revert to %ages, though this relies on knowing what "smaller" actually means: .smallestprint { font-size: 60%; } /* Or is it 64%? */ One last thing: always always always validate your CSS - the Web Developer Toolbar for Firefox allows you to do that at the click of a button (you'll need the "Validate local CSS/HTML" option if you're behind a firewall). Greg
On Sun, Sep 16, 2007 at 01:32:13AM +0100, Greg Thomas wrote:
On 15/09/2007, Chris G <cl@isbd.net> wrote:
The question is basically - what do they actually mean?
There are four ways to set a font size using CSS.
An "absolute size" is one of xx-small, x-small, small, medium, large, x-large, xx-large. Despite the name, these are relative to the browsers default font size, but absolute to that browser config - i.e. a "font-size: small" will be the same size wherever it appears on your page. Typically each step in/decreasing by 20% IIRC from "medium".
The browser's default font size being the one set in 'preferences' or wherever presumably? I.e. I have my default font in Firefox set to Sans Serif size 14 so that means that all font sizes set in what CSS calls 'absolute' will be a fixed amount smaller or larger than my default 14 pt.
A "relative size" is "smaller" or "larger" (again, 20% IIRC). This is relative to the inherited font size for that element.
A "percentage size" is a percentage of the inherited font size, so font-size: 80% is equivalent to font-size: smaller, though there are (were?) some nasties with different browsers in this area (different browsers have different definitions as to what the size is a percentage of, though things may be better nowadays).
What is the 'inherited' font size? I think this is the essential bit that I haven't grasped yet. [snip detailed further explanation, thank you]
One last thing: always always always validate your CSS - the Web Developer Toolbar for Firefox allows you to do that at the click of a button (you'll need the "Validate local CSS/HTML" option if you're behind a firewall).
I have the Web Developer Toolbar installed already. Thanks for taking so much trouble to answer my rambling questions. -- Chris Green
On 16/09/2007, Chris G <cl@isbd.net> wrote:
On Sun, Sep 16, 2007 at 01:32:13AM +0100, Greg Thomas wrote:
The browser's default font size being the one set in 'preferences' or wherever presumably? I.e. I have my default font in Firefox set to Sans Serif size 14 so that means that all font sizes set in what CSS calls 'absolute' will be a fixed amount smaller or larger than my default 14 pt.
That's right, yes.
A "relative size" is "smaller" or "larger" (again, 20% IIRC). This is relative to the inherited font size for that element.
What is the 'inherited' font size? I think this is the essential bit that I haven't grasped yet.
In any particular part of the page, the font will have a size. The 'inherited' size is the size of that font. For example, if you have a <TH> class defined with a "large" font, the font size (for you) will be 14x1.2, i.e. 16.8pt. This is the size that is 'inherited'. So if you then have a span in that TH with a "larger" font, that will be larger than the inherited size, or larger than 16.8, or 16.8x1.2 or 20.16pt - i.e. it's "larger" relative to the rest of the text in the <TH>. Greg
On Tue, Sep 18, 2007 at 09:34:07AM +0100, Greg Thomas wrote:
On 16/09/2007, Chris G <cl@isbd.net> wrote:
On Sun, Sep 16, 2007 at 01:32:13AM +0100, Greg Thomas wrote:
The browser's default font size being the one set in 'preferences' or wherever presumably? I.e. I have my default font in Firefox set to Sans Serif size 14 so that means that all font sizes set in what CSS calls 'absolute' will be a fixed amount smaller or larger than my default 14 pt.
That's right, yes.
A "relative size" is "smaller" or "larger" (again, 20% IIRC). This is relative to the inherited font size for that element.
What is the 'inherited' font size? I think this is the essential bit that I haven't grasped yet.
In any particular part of the page, the font will have a size. The 'inherited' size is the size of that font. For example, if you have a <TH> class defined with a "large" font, the font size (for you) will be 14x1.2, i.e. 16.8pt.
If I understand you correctly this 'inherited' size is fixed relative to my default, so any font size relative to this inherited size will also have a fixed relation to my default font. How does this differ from using an absolute size?
This is the size that is 'inherited'. So if you then have a span in that TH with a "larger" font, that will be larger than the inherited size, or larger than 16.8, or 16.8x1.2 or 20.16pt - i.e. it's "larger" relative to the rest of the text in the <TH>.
Greg
_______________________________________________ main@lists.alug.org.uk http://www.alug.org.uk/ http://lists.alug.org.uk/mailman/listinfo/main Unsubscribe? See message headers or the web site above!
-- Chris Green
On 18/09/2007, Chris G <cl@isbd.net> wrote:
On Tue, Sep 18, 2007 at 09:34:07AM +0100, Greg Thomas wrote:
On 16/09/2007, Chris G <cl@isbd.net> wrote:
What is the 'inherited' font size? I think this is the essential bit that I haven't grasped yet.
In any particular part of the page, the font will have a size. The 'inherited' size is the size of that font. For example, if you have a <TH> class defined with a "large" font, the font size (for you) will be 14x1.2, i.e. 16.8pt.
If I understand you correctly this 'inherited' size is fixed relative to my default, so any font size relative to this inherited size will also have a fixed relation to my default font. How does this differ from using an absolute size?
In display, it won't differ. However, the advantage comes when you make subsequent changes. If you had an "small" instead of "smaller" smallprint in a <TH> and you subsequently change the size of the <TH> class to xx-large <TH>, the "small" smallprint may need changing to "medium" to stop it looking ridiculous compared with other text in the <TH> - whereas if you used the relative "smaller", the size of the smallprint would be relative to the size of the rest of the text, and you would only need to change the <TH>. It would also stop you having to define thsmallprint and tdsmallprint, if you <TH> and <TD> have different size fonts. Considering my "smallprint" and <TH> examples earlier which used a relative size, "smallprint" text in a "larger" <TH> would be larger than "smallprint" text in a <TD>. This is typically what you want, as you generally want to de-emphasis the small print with respect to the rest of the text around it. Greg
participants (4)
-
Chris G -
Greg Thomas -
Greg Thomas -
Tim Green