[WSG] Relative font sizes without relative dimension units
Hi Folks,
I was wondering if anyone has ideas for a simpler way of dealing with this issue than
I have.
The issue:
I like to set my font sizes in ems. I also use ems a lot to position block elements so
that my designs work better as people expand contract their text sizes. The problem
is for example if I have body with font-size 1em and h1 with font-size 1.5em, then a
10em margin on a div (within body) renders at 2/3 the size of the same 10em margin on
an h1.
The solution I've come up with is to enclose non-1em sized text in a span tag and
assign font size values with a contextual selector (e.g. h1 span {font-size:1.5em}).
The problem with this solution is that it means adding quite a few semantically
meaningless tags.
Anybody got a better idea?
--
Bill McAvinney
Massachusetts Institute of Technology
Web Services
Administrative Computing, IST
617-258-6023
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Relative font sizes without relative dimension units
What I'm looking for is a way to have a consistent em based measuring unit across all block elements in a site so that a width of say 10em will be the same no matter what the font size of the text in that block is. Here's a little demo using your example with each element given a left margin of 10em, and similar headers with my typical use of spans: http://hurricane.mit.edu/erp_manuals/test.html As you can see the way you're suggesting still gives an effective margin of 12em when the font size is 1.2em and 15em when the font size is 1.5em. -- Bill McAvinney Massachusetts Institute of Technology Web Services Administrative Computing, IST 617-258-6023 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Relative font sizes without relative dimension units
On Fri, 4 Jun 2004 19:50:54 -0400, Bill McAvinney wrote: What I'm looking for is a way to have a consistent em based measuring unit across all block elements in a site so that a width of say 10em will be the same no matter what the font size of the text in that block is. Unfortunately, this doesn't even make sense. If you want a consistently absolutely-sized block, then you'll need to use a fixed size font-size unit (errr...) such as px. em is a relative unit, so it doesn't make any sense to measure it other than relative to the current size. I don't think I've made any sense either, but it is Saturday :) Lea -- Lea de Groot Elysian Systems - I Understand the Internet http://elysiansystems.com/ Web Design, Usability, Information Architecture, Search Engine Optimisation Brisbane, Australia * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Relative font sizes without relative dimension units
so it doesn't make any sense to measure it other than relative to the current size actually, it does make a lot of sense, as the original poster wants the whole measurements to be relative, but all based on a unified measure, not the current size of the current element. P winmail.dat
[WSG] Relative font sizes without relative dimension units
Hi Folks,
I was wondering if anyone has ideas for a simpler way of dealing with
this issue than I have.
The issue:
I like to set my font sizes in ems. I also use ems a lot to position
block elements so that my designs work better as people expand
contract their text sizes. The problem is for example if I have body
with font-size 1em and h1 with font-size 1.5em, then a 10em margin on
a div (within body) renders at 2/3 the size of the same 10em margin
on an h1.
The solution I've come up with is to enclose non-1em sized text in a
span tag and assign font size values with a contextual selector (e.g.
h1 span {font-size:1.5em}). The problem with this solution is that it
means adding quite a few semantically meaningless tags.
Anybody got a better idea?
--
Bill McAvinney
Massachusetts Institute of Technology
Web Services
Administrative Computing, IST
617-258-6023
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Relative font sizes without relative dimension units
I could be wrong here but don't you just need to use descendant
selectors here?
#header h1{font-size: 1.5em;}
#content h1{font-size1.2 em; font-color: red;}
On 05/06/2004, at 1:13 AM, Bill McAvinney wrote:
The solution I've come up with is to enclose non-1em sized text in a
span tag and assign font size values with a contextual selector (e.g.
h1 span {font-size:1.5em}). The problem with this solution is that it
means adding quite a few semantically meaningless tags.
Anybody got a better idea?
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
RE: [WSG] Relative font sizes without relative dimension units
Bill,
funnily enough, this is a problem I've come across recently myself.
The only way around it that I can think of is to do the calculation
of padding/margin based on your font size by hand.
In your example, if you want a 10em margin around your h1, but
you've already set your h1 to 1.5em font size, then set the margin
to 6.66em.
e.g.
#content p { font-size: 1em; margin: 10em; }
#content h1 { font-size: 1.5em; margin: 6.66em; }
Tedious, but the only clean way I can see without cluttering the
markup with extra non-semantic containers...
Patrick
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
N.X+i nZv+hymjl.f.wq(b(,)azX)i
