Adjusting position of sup and sub text?

[David C. Stone]

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor ,
relative to the surrounding text?

Reason for asking is that the default rendering in most
browsers always increases the spacing between the line
of text containing these elements and those above/below
that lack it.

I can easily reduce the size of the subscript or superscript
text relative to the surrounding text, but can only reduce
this line spacing shift by reducing subscripts and superscripts
to ridiculously small - and completely illegible - sizes.

Thanks!

[Andreas Prilop]

Re: Adjusting position of sup and sub text?

On Fri, 23 May 2008, David C. Stone wrote:

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor ,
relative to the surrounding text?

For example:
p { line-height: 125% }
sup { line-height: 80% }

--
¹ superscript 1 ¼ fraction 1/4 Ð D stroke ð d stroke
² superscript 2 ½ fraction 1/2 Þ Thorn þ thorn
³ superscript 3 ¾ fraction 3/4 Ý Y acute ý y acute
× multiply sign ¦ broken bar

[C A Upsdell]

Re: Adjusting position of sup and sub text?

David C. Stone wrote:

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor ,
relative to the surrounding text?
>
Reason for asking is that the default rendering in most
browsers always increases the spacing between the line
of text containing these elements and those above/below
that lack it.
>
I can easily reduce the size of the subscript or superscript
text relative to the surrounding text, but can only reduce
this line spacing shift by reducing subscripts and superscripts
to ridiculously small - and completely illegible - sizes.

I always do this:

sub { vertical-align:text-bottom; font-size:75%; }
sup { vertical-align:text-top; font-size:75%; }

This ensures that the line spacing never changes.

[dorayme]

Re: Adjusting position of sup and sub text?

In article <nomail-E4EA9F.11581123 052008@news1.ch em.utoronto.ca> ,
"David C. Stone" <nomail@domain. invalidwrote:

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor ,
relative to the surrounding text?
>
Reason for asking is that the default rendering in most
browsers always increases the spacing between the line
of text containing these elements and those above/below
that lack it.
>
I can easily reduce the size of the subscript or superscript
text relative to the surrounding text, but can only reduce
this line spacing shift by reducing subscripts and superscripts
to ridiculously small - and completely illegible - sizes.
>

Take a look at:

<http://www.xs4all.nl/~sbpoley/webmatters/superscripts.ht ml>

--
dorayme

[David C. Stone]

Re: Adjusting position of sup and sub text?

In article
<Pine.GSO.4.63. 0805231826040.2 4736@s5b004.rrz n.uni-hannover.de>,
Andreas Prilop <prilop2008@tra shmail.netwrote :

On Fri, 23 May 2008, David C. Stone wrote:
>

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor ,
relative to the surrounding text?

>
For example:
p { line-height: 125% }
sup { line-height: 80% }

Thanks to all for the suggestions and link; time to go and
do some testing!

[dorayme]

Re: Adjusting position of sup and sub text?

In article <nomail-B40741.20295323 052008@news1.ch em.utoronto.ca> ,
"David C. Stone" <nomail@domain. invalidwrote:

Thanks to all for the suggestions and link; time to go and
do some testing!

You might find that Opera does not like Upsdell's (which appeared to me
otherwise very straightforward ) unless you add a small line-height (not
a happy situation). Quite often, with super and subscripting, for
obvious reasons, one wants a bigger than normal line spacing.

p {line-height: 1;}
sup { vertical-align:text-top; font-size:75%; }
sub { vertical-align:bottom; font-size:75%; }

But Prilop's seems fine in Opera as in other browsers I have tested on
Mac.

--
dorayme

[Jukka K. Korpela]

Re: Adjusting position of sup and sub text?

Scripsit Andreas Prilop:

On Fri, 23 May 2008, David C. Stone wrote:
>

>Is there a way in CSS to adjust the baseline position of
>text marked up with either <sup></supor ,
>relative to the surrounding text?

>
For example:
p { line-height: 125% }
sup { line-height: 80% }

I'm afraid that won't help, since the height of a line containing a
superscript or a subscript still tends to be larger than line height
elsewhere in the paragraph. This is probably mostly due to flaws in
implementations , since for an inline element like sup and sub,
line-height by definition sets the exact height of the line box. Yet, it
does not work that way popular browsers.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Re: Adjusting position of sup and sub text?

Scripsit C A Upsdell:

I always do this:
>
sub { vertical-align:text-bottom; font-size:75%; }
sup { vertical-align:text-top; font-size:75%; }
>
This ensures that the line spacing never changes.

No, CSS cannot ensure anything; see

http://www.cs.tut.fi/~jkorpela/css-caveats.html

Note the specific caveat that browser settings may prevent font size
change or may set a minimum for font size.

But the main problem is that such vertical alignment is not suitable in
all contexts, and in particular the subscript will usually be placed in
too high a position, almost on the baseline. Moreover, font size
reduction to 75%, though acceptable for superscripts in most situations,
is inadequate for characters with complex glyphs as well to characters
like the minus sign (not to mention its surrogate "-").

There is no satisfactory general solution to this problem. Vertical
alignment, font size, and line height all have an impact, and so does
the font face and the specific relationship between adjacent normal
characters and superscripts or subscripts. For example, if vertical
alignment is OK for c², then it's probably too low for
T^a.

In specific cases, acceptable solutions can be found, though they
generally involve setting several properties (including font face) and
possibly different rendering of superscripts and subscripts in different
contexts. And it gets fairly complex, since of course you cannot know
that your suggested font face will be used.

See some additional notes on the problem at

http://www.cs.tut.fi/~jkorpela/math/#linespacing

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Ben C]

Re: Adjusting position of sup and sub text?

On 2008-05-24, Jukka K. Korpela <jkorpela@cs.tu t.fiwrote:

Scripsit Andreas Prilop:
>

>On Fri, 23 May 2008, David C. Stone wrote:
>>

>>Is there a way in CSS to adjust the baseline position of
>>text marked up with either <sup></supor ,
>>relative to the surrounding text?

>>
>For example:
> p { line-height: 125% }
> sup { line-height: 80% }

>
I'm afraid that won't help, since the height of a line containing a
superscript or a subscript still tends to be larger than line height
elsewhere in the paragraph. This is probably mostly due to flaws in
implementations , since for an inline element like sup and sub,
line-height by definition sets the exact height of the line box.

Where's that definition? I wish it did work like that-- it would be more
logical to my way of thinking.

In fact it works like this (unless I got it wrong, which is quite
possible, as it is quite diabolical):

Each inline box has its own height and "line-height" (bizarrely, since
an inline box is not a line). Its height is based on its font-size (it
usually is equal to its font-size) and its line-height is what the
styles say-- if set to "normal" it's a value conjured up by the browser
usually out of the font's metadata which is typically about 1.1 or 1.2
times the font-size. Note also that line-height is inherited, so inline
boxes often do have computed values of line-height other than normal.

Leading = line-height - font-size. It can be negative. Each inline box
has its _own_ leading. Put half the leading above and half below each
inline box segment, and draw an imaginary box around the lot.

Now move some of the inline box segments up or down according to their
values of vertical-align. Each inline box segment's leading and
therefore its imaginary box moves with it.

Finally, draw the bounding box of all the imaginary boxes. That is the
line box.

This means that the vertical alignment of things on a line affects the
line box height, and may make it greater than what you thought you set
it to.

By "inline box segment" I mean part of an inline box that is all on the
same line (the spec talks about inline boxes "breaking" across lines. Of
course a box can't literally break across a line-- it becomes two or
more boxes when that happens).

[Ben C]

Re: Adjusting position of sup and sub text?

On 2008-05-24, Ben C <spamspam@spam. eggswrote:

On 2008-05-24, Jukka K. Korpela <jkorpela@cs.tu t.fiwrote:

>Scripsit Andreas Prilop:
>>

>>On Fri, 23 May 2008, David C. Stone wrote:
>>>
>>>Is there a way in CSS to adjust the baseline position of
>>>text marked up with either <sup></supor ,
>>>relative to the surrounding text?
>>>
>>For example:
>> p { line-height: 125% }
>> sup { line-height: 80% }

>>
>I'm afraid that won't help, since the height of a line containing a
>superscript or a subscript still tends to be larger than line height
>elsewhere in the paragraph. This is probably mostly due to flaws in
>implementation s, since for an inline element like sup and sub,
>line-height by definition sets the exact height of the line box.

>
Where's that definition? I wish it did work like that-- it would be more
logical to my way of thinking.

[...]

Leading = line-height - font-size. It can be negative. Each inline box
has its _own_ leading. Put half the leading above and half below each
inline box segment, and draw an imaginary box around the lot.
>
Now move some of the inline box segments up or down according to their
values of vertical-align. Each inline box segment's leading and
therefore its imaginary box moves with it.
>
Finally, draw the bounding box of all the imaginary boxes. That is the
line box.
>
This means that the vertical alignment of things on a line affects the
line box height, and may make it greater than what you thought you set
it to.

[...]

Sorry for following up to myself, but the problem of <suband <sup>
affecting line height ought to be solved in practically all cases by

sup, sub { line-height: 0 }

This gives them plenty of negative leading and should keep them clear of
the other inline boxes with they result that they don't affect line box
height. It's really just a more extreme version of Andreas Prilop's
suggestion.

Setting line-height on the p to ensure a sensible minimum is a good idea
too (IIRC only works in strict mode).

--
Might not work in IE.

[Jukka K. Korpela]

Re: Adjusting position of sup and sub text?

Scripsit Ben C:

>[...] for an inline element like sup and sub,
>line-height by definition sets the exact height of the line box.

>
Where's that definition?

"On an inline-level element, 'line-height' specifies the height that is
used in the calculation of the line box height (except for inline
replaced elements [...])."

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

I wish it did work like that-- it would be
more logical to my way of thinking.

Well I'm afraid even the specifications aren't as clear as I thought. It
_looks_ clear, but then "used in the calculation of" introduces
obscurity, especially since this calculation is not defined: regarding
the height of an inline (non-replaced) element,

"The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
[...]" etc., lots of babbling, with references to "using" line-height
but not saying how.

http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced

This means that the vertical alignment of things on a line affects the
line box height, and may make it greater than what you thought you set
it to.

Quite right, but setting line-height: 80% for <supas opposite to 125%
for <p>, _should_ handle the situation for any reasonable vertical
alignment, as far as I can see, but it doesn't. But wait... there's a
catch. The percentage relates, by definition, to the font size of the
enclosing element. Anyway, this doesn't change the basic point. You
can't fix these things just by setting line-height, since it won't be
honored well enough.

This is so frustrating. Things are easier even in MS Word, where uneven
line spacing easily occurs if you just mix fonts, but it is curable by
setting the line height of a block ("paragraph" ) to a fixed value.

This gave me an idea... how about this:

sup, sub { position: relative;
vertical-align: 0; }
sup { bottom: 0.4em; }
sub { top: 0.4em; }

That is, kill the vertical alignment, then re-establish it with relative
positioning. The point is that this way, the lines will be formatted
without considering the position of the superscripts and subscripts, so
the line spacing is even. Then the positioning moves them to proper
places. There's a risk of hitting characters on other lines, but this
risk always exists when we want even line spacing _and_ raised or
lowered characters.

Of course, the specific bottom and top values are to be tuned according
to the particular situation and might even be different in different
contexts in a single document.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Ben C]

Re: Adjusting position of sup and sub text?

On 2008-05-24, Jukka K. Korpela <jkorpela@cs.tu t.fiwrote:

Scripsit Ben C:
>

>>[...] for an inline element like sup and sub,
>>line-height by definition sets the exact height of the line box.

>>
>Where's that definition?

>
"On an inline-level element, 'line-height' specifies the height that is
used in the calculation of the line box height (except for inline
replaced elements [...])."
>

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

>

>I wish it did work like that-- it would be
>more logical to my way of thinking.

>
Well I'm afraid even the specifications aren't as clear as I thought. It
_looks_ clear, but then "used in the calculation of" introduces
obscurity, especially since this calculation is not defined: regarding
the height of an inline (non-replaced) element,

Yes exactly: "used in" is covering up a lot here. The specifications are
very unclear on this although not necessarily ambiguous.

Some more explanation here:
http://meyerweb.com/eric/css/inline-format.html.

"The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
[...]" etc., lots of babbling, with references to "using" line-height
but not saying how.
>
http://www.w3.org/TR/CSS21/visudet.h...e-non-replaced

Indeed. 10.8 explains that the line box is the bounding box of the
inline boxes on a line. The inline boxes' heights _for that purpose_ are
given by their line-heights. That's what it means in 10.6.1 which is the
part you're quoting.

So it says how you use line-height in 10.8.

But for the purposes of drawing a background-color or a border on an
inline box, its height is not its line-height, but something that's
usually a bit smaller (the height of the em-box etc., which is roughly
what most browsers seem to use).

This seems to be the interpretation Firefox, Opera etc. are putting on
this, and they behave pretty consistently with this.

>This means that the vertical alignment of things on a line affects the
>line box height, and may make it greater than what you thought you set
>it to.

>
Quite right, but setting line-height: 80% for <supas opposite to 125%
for <p>, _should_ handle the situation for any reasonable vertical
alignment, as far as I can see, but it doesn't. But wait... there's a
catch. The percentage relates, by definition, to the font size of the
enclosing element.

It's a percentage of the element's own computed font-size.

Anyway, this doesn't change the basic point. You can't fix these
things just by setting line-height, since it won't be honored well
enough.

Well 80% might not be shaving off enough to compensate for the box's
vertical alignment. That's why 0 might be a better choice. But I prefer
your relative positioning suggestion.

This is so frustrating.

I agree. Why would anyone ever want uneven line spacing?

Things are easier even in MS Word, where uneven line spacing easily
occurs if you just mix fonts, but it is curable by setting the line
height of a block ("paragraph" ) to a fixed value.

If you set a fairly high line height for a block in CSS that should set
a minimum for each line box (and does in strict mode). Provided it's
high enough you'll get even line spacing.

This gave me an idea... how about this:
>
sup, sub { position: relative;
vertical-align: 0; }
sup { bottom: 0.4em; }
sub { top: 0.4em; }
>
That is, kill the vertical alignment, then re-establish it with relative
positioning. The point is that this way, the lines will be formatted
without considering the position of the superscripts and subscripts, so
the line spacing is even. Then the positioning moves them to proper
places. There's a risk of hitting characters on other lines, but this
risk always exists when we want even line spacing _and_ raised or
lowered characters.

That is an excellent idea.

[Jukka K. Korpela]

Re: Adjusting position of sup and sub text?

Scripsit Ben C:

>This gave me an idea... how about this:
>>
>sup, sub { position: relative;
> vertical-align: 0; }
>sup { bottom: 0.4em; }
>sub { top: 0.4em; }
>>
>That is, kill the vertical alignment, then re-establish it with
>relative positioning. The point is that this way, the lines will be
>formatted without considering the position of the superscripts and
>subscripts, so the line spacing is even. Then the positioning moves
>them to proper places. There's a risk of hitting characters on other
>lines, but this risk always exists when we want even line spacing
>_and_ raised or lowered characters.

>
That is an excellent idea.

I haven't found problems with it, so I'm considering a move to using it
as part of by basic stylesheet, but I have learned to be suspicious
about great-looking ideas (especially my own)...

I souped up a page that explains the idea (though it's basically just as
above, with a little illustrations):

http://www.cs.tut.fi/~jkorpela/www/linespacing.html

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Ben C]

Re: Adjusting position of sup and sub text?

On 2008-05-26, Jukka K. Korpela <jkorpela@cs.tu t.fiwrote:

Scripsit Ben C:
>

>>This gave me an idea... how about this:
>>>
>>sup, sub { position: relative;
>> vertical-align: 0; }
>>sup { bottom: 0.4em; }
>>sub { top: 0.4em; }
>>>
>>That is, kill the vertical alignment, then re-establish it with
>>relative positioning. The point is that this way, the lines will be
>>formatted without considering the position of the superscripts and
>>subscripts, so the line spacing is even. Then the positioning moves
>>them to proper places. There's a risk of hitting characters on other
>>lines, but this risk always exists when we want even line spacing
>>_and_ raised or lowered characters.

>>
>That is an excellent idea.

>
I haven't found problems with it, so I'm considering a move to using it
as part of by basic stylesheet, but I have learned to be suspicious
about great-looking ideas (especially my own)...

One minor caveat which I didn't mention is that if a paragraph has a
bottom border and there are subscripts in the last line they may
intersect the border (and the subscripts should be drawn on top of the
border). But this will only happen if line-height is too small.

The same goes for superscripts on the top line.

I don't think it's a major problem. You can't have your cake and eat it.
Either super and subscripts increase line box height, which is annoying,
or they don't, which is less annoying.

You would notice it if you had something like the example below. A bit
of top and bottom padding on the div would easily rectify the situation.

sub
{
vertical-align: baseline;
position: relative;
top: 0.8em;
}
div
{
background-color: yellow;
border: 1px dashed gray;
color: black;
font-size: 5em;
}

....

<div>
H₂O
</div>

[dorayme]

Re: Adjusting position of sup and sub text?

In article <lHu_j.6978$_03 .2911@reader1.n ews.saunalahti. fi>,
"Jukka K. Korpela" <jkorpela@cs.tu t.fiwrote:

Scripsit Ben C:
>

This gave me an idea... how about this:
>
sup, sub { position: relative;
vertical-align: 0; }
sup { bottom: 0.4em; }
sub { top: 0.4em; }
>
That is, kill the vertical alignment, then re-establish it with
relative positioning. The point is that this way, the lines will be
formatted without considering the position of the superscripts and
subscripts, so the line spacing is even. Then the positioning moves
them to proper places. There's a risk of hitting characters on other
lines, but this risk always exists when we want even line spacing
_and_ raised or lowered characters.

That is an excellent idea.

>
I haven't found problems with it, so I'm considering a move to using it
as part of by basic stylesheet, but I have learned to be suspicious
about great-looking ideas (especially my own)...

It was not a great-looking idea. It was too obvious for that. But that
is what was so great about it, it was nice and simple and looks obvious
in hindsight like many very good ideas.

There is no need to test it further. Trust me. It works well and cures a
pesky problem I have always found, namely that the sub is not sub enough.

--
dorayme