469,271 Members | 1,251 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Setting exact space below baseline


Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below the
descenders. So the actual space between lines is larger than I specified.

Jacob
Jul 20 '05 #1
12 3075
In article <ja*************************@news03.east.earthlink .net>,
Jacob Weber <ja***@jacobweber.com> wrote:
Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below the
descenders. So the actual space between lines is larger than I specified.

Jacob

I should add that I could make it work with line-height, but that would
require me to know the font size in advance.

Jacob
Jul 20 '05 #2
Jacob Weber wrote in
<ja*************************@news03.east.earthlink .net>
In article <ja*************************@news03.east.earthlink .net>,
Jacob Weber <ja***@jacobweber.com> wrote:
Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below
the descenders. So the actual space between lines is larger than I
specified.

Jacob

I should add that I could make it work with line-height, but that
would require me to know the font size in advance.


At a guess, you're setting the font in px - can you get line-height to work
in the way you want if you set the font/line height in % or em?

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Jul 20 '05 #3
Jacob Weber <ja***@jacobweber.com> wrote:
In article <ja*************************@news03.east.earthlink .net>,
Jacob Weber <ja***@jacobweber.com> wrote:
Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below the
descenders. So the actual space between lines is larger than I specified.


I should add that I could make it work with line-height, but that would
require me to know the font size in advance.


Why?
line-height: 1.2; sets the line-height to be 1.2 times the font-size,
doesn't matter what the font size is.

If this isn't enough then I think you're not giving us all the details
of your particular situation.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4
On Fri, 2 Jul 2004 18:31:28 +0100, PeterMcC <pe***@mccourt.org.uk> wrote:
Jacob Weber wrote in
<ja*************************@news03.east.earthlink .net>
In article <ja*************************@news03.east.earthlink .net>,
Jacob Weber <ja***@jacobweber.com> wrote:
Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below
the descenders. So the actual space between lines is larger than I
specified.

Jacob

I should add that I could make it work with line-height, but that
would require me to know the font size in advance.


At a guess, you're setting the font in px - can you get line-height to
work
in the way you want if you set the font/line height in % or em?


*sigh* THIS is why we always request a URL to a test case...
Jul 20 '05 #5
> >> In article <ja*************************@news03.east.earthlink .net>,
Jacob Weber <ja***@jacobweber.com> wrote:

Hello. Is it possible to specify the exact space between two lines,
measured from the baseline of the top line to the ascenders of the
second line?

I tried adding the space with padding-bottom, but it adds it below
the descenders. So the actual space between lines is larger than I
specified.

Jacob
I should add that I could make it work with line-height, but that
would require me to know the font size in advance.


At a guess, you're setting the font in px - can you get line-height to
work
in the way you want if you set the font/line height in % or em?


*sigh* THIS is why we always request a URL to a test case...

Okay, you can stop your sighing. :)

http://www.jacobweber.com/style_test.html

As you can see, the two lines have a certain amount of space between
them. I'd like to be able to specify that, in pixels.

But my fonts are specified as percentages, so I don't know the exact
pixel size. If I set line-height in pixels, I would have to guess. If I
set line-height in %, I wouldn't be able to set the exact number of
pixels between the lines.

Hope that helps,
Jacob
Jul 20 '05 #6
Jacob Weber <ja***@jacobweber.com> wrote:
http://www.jacobweber.com/style_test.html

As you can see, the two lines have a certain amount of space between
them. I'd like to be able to specify that, in pixels.

But my fonts are specified as percentages, so I don't know the exact
pixel size. If I set line-height in pixels, I would have to guess. If I
set line-height in %, I wouldn't be able to set the exact number of
pixels between the lines.


So, for some users the text might be 10px tall and for others it
mightbe 100px tall, but you want the space between the lines of text
to always be, for example, 5px.

Put that way, does it make sense to want such a thing?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7
In article <rc********************************@4ax.com>,
Steve Pugh <st***@pugh.net> wrote:
So, for some users the text might be 10px tall and for others it
mightbe 100px tall, but you want the space between the lines of text
to always be, for example, 5px.

Put that way, does it make sense to want such a thing?


Exactly. I'm implementing a design, and the designers specified the
space between lines in pixels, although the font size itself is
browser-dependent. Is this possible?

Jacob
Jul 20 '05 #8
Jacob Weber <ja***@jacobweber.com> wrote:
In article <rc********************************@4ax.com>,
Steve Pugh <st***@pugh.net> wrote:
So, for some users the text might be 10px tall and for others it
mightbe 100px tall, but you want the space between the lines of text
to always be, for example, 5px.

Put that way, does it make sense to want such a thing?
Exactly.


Does this mean that you agree with me that it doesn't make sense to
want such a thing?
I'm implementing a design, and the designers specified the
space between lines in pixels, although the font size itself is
browser-dependent.
Fake it. Specify the line height so that the space is the desired size
at the designer's font-size (which is likely to be the factory
setting). It will then scale accordingly at other font sizes. Best of
both worlds.

Did the designer really specify percentage font sizes and pixel
spacing between lines? Or did you "translate" his font sizes into
percentages?
Is this possible?


No.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #9
On Fri, 02 Jul 2004 20:31:30 GMT, Jacob Weber <ja***@jacobweber.com>
wrote:
In article <rc********************************@4ax.com>,
Steve Pugh <st***@pugh.net> wrote:
So, for some users the text might be 10px tall and for others it
mightbe 100px tall, but you want the space between the lines of text
to always be, for example, 5px.

Put that way, does it make sense to want such a thing?


Exactly. I'm implementing a design, and the designers specified the
space between lines in pixels, although the font size itself is
browser-dependent. Is this possible?


I think your designers are broken, actually, but assuming you want to
persue this what you really need is a line-spacing property rather
than a line-height.

Unfortunately, line-spacing isn't in CSS Level 2. As far as I recall,
it isn't in CSS Level 3 either, but since it'll be many years before
that's implemented by browsers that's more just a sidenote.

Your only option here is to set your font size in pixels or to give in
and let the line height be dependent on the font-size. I'd pick the
latter, but then I don't tend to allow so-called designers to override
well-considered good practices in web authoring.

Good luck,
-Claire
Jul 20 '05 #10
In article <1g********************************@4ax.com>,
Steve Pugh <st***@pugh.net> wrote:
Does this mean that you agree with me that it doesn't make sense to
want such a thing?
Not entirely, although I can understand your reasoning.

Look at it this way: I assume you'd have no problem with wanting the
second line to always be, say, twenty pixels below the first line. This
is allowed by CSS, and it could be a legitimate design decision. So
what's wrong allowing that twenty pixels to be measured from the
baseline, and not the descenders?
Did the designer really specify percentage font sizes and pixel
spacing between lines? Or did you "translate" his font sizes into
percentages?


That was what they specified; percentage font sizes and pixel spacing
between lines. Anyway, thanks to Steve and Claire; now I won't waste any
more time trying to do this.

Best,
Jacob
Jul 20 '05 #11
Jacob Weber <ja***@jacobweber.com> wrote:
In article <1g********************************@4ax.com>,
Steve Pugh <st***@pugh.net> wrote:
Does this mean that you agree with me that it doesn't make sense to
want such a thing?
Not entirely, although I can understand your reasoning.

Look at it this way: I assume you'd have no problem with wanting the
second line to always be, say, twenty pixels below the first line.


I do have a problem with that. If the font size can vary between zero
and infinity then 20px will be excessively cramped for some users and
excessively spacious for others.
This is allowed by CSS, and it could be a legitimate design decision.
Exactly how do you think it's allowed in CSS? By setting line-height:
20px? line-height has no fixed relationship with the text baseline,
nor with any other part of the text (remember that CSS also applies to
fonts where the concepts of descenders or ascenders doesn't apply).
So what's wrong allowing that twenty pixels to be measured from the
baseline, and not the descenders?
The CSS line box model (and indeed the inline box model) is a very
complex thing. The relationship between the baseline and the height of
the line box is not simple.

But assuming that (a) you're using a Latin font, or similar; and (b)
you're using a single font-family and (c) you're using a single
font-size; and (d) you have no non-text inline elements in your lines
(i.e. no images, no form inputs, etc.) then the CSS
line-height ~= font-size + X above ascender + X below descender
where X = 0.5 * leading in print typography terms.
The rest is simple mathematics.

You can either do the maths yourself or let the browser do it. Letting
the browser do it is more flexible and accessible.
Did the designer really specify percentage font sizes and pixel
spacing between lines? Or did you "translate" his font sizes into
percentages?


That was what they specified; percentage font sizes and pixel spacing
between lines.


Then the design was flawed. I would try to explain why it is flawed
and if that fell on deaf ears I would fake it as previously described.
Anyway, thanks to Steve and Claire; now I won't waste any
more time trying to do this.


You're welcome. Good luck.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #12
Jacob Weber wrote:
I assume you'd have no problem with wanting the second line to always
be, say, twenty pixels below the first line. This is allowed by CSS


I'm not sure what you mean by "allowed" by CSS. But I do wonder how you
would execute this idea. What would the code be to define 20px of space
between lines but use percentage for font-size.

--
Brian (remove ".invalid" to email me)
Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Aaron | last post: by
9 posts views Thread by Olav Tollefsen | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.