473,569 Members | 2,775 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Adjusting position of sup and sub text?

Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor <sub></sub>,
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!
Jun 27 '08 #1
14 36976
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 <sub></sub>,
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
Jun 27 '08 #2
David C. Stone wrote:
Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor <sub></sub>,
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.
Jun 27 '08 #3
In article <no************ **************@ news1.chem.utor onto.ca>,
"David C. Stone" <no****@domain. invalidwrote:
Is there a way in CSS to adjust the baseline position of
text marked up with either <sup></supor <sub></sub>,
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
Jun 27 '08 #4
In article
<Pi************ *************** ****@s5b004.rrz n.uni-hannover.de>,
Andreas Prilop <pr********@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 <sub></sub>,
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!
Jun 27 '08 #5
In article <no************ **************@ news1.chem.utor onto.ca>,
"David C. Stone" <no****@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
Jun 27 '08 #6
On 2008-05-24, Jukka K. Korpela <jk******@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 <sub></sub>,
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).
Jun 27 '08 #7
On 2008-05-24, Ben C <sp******@spam. eggswrote:
On 2008-05-24, Jukka K. Korpela <jk******@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 <sub></sub>,
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.
Jun 27 '08 #8
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.h...ef-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.h...e-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/

Jun 27 '08 #9
On 2008-05-24, Jukka K. Korpela <jk******@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.h...ef-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.
Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
2806
by: Michael Boyle | last post by:
Hi, Can anyone tell me if there is a command to position text in the Win32 Console project application like there was in the Borland C++ 5.5 i.e. gotoxy(x,y). Cheers, Michael
3
7934
by: Joseph Suprenant | last post by:
Hello all, I have a simple problem but can't find the answer. I want to move the text cursor in a xterm window. I actually just want to keep writing over the same spot over and over again with out clearing the screen. So i look up stuff on the internet and i see mvcur() and move that are included in curses.h and ncurses.h I include the...
11
2564
by: michael | last post by:
I have a group of links prefixed with the arrow as follows: »link1 »link2 »link3 I would like the arrows to be vertically aligned middle of the text, like as if they were bullets of list item, but without linebreaks. The text would be quite large and set to a percentage, eg. 200%, so there's no way of knowing the exact pixel height. ...
0
1297
by: Helge Moulding | last post by:
I'd like to make neat little pushbuttons (<input type="button" value="+">) but when I try to shrink them down to a "neat" size (height: 1em; width: 1em;) the "+" disappears out of the visible area of the button. I tried various things. Setting padding:0 seems to help a little, but not nearly enough. I'm testing this on the Firefox browser....
2
4104
by: Dan Jacobson | last post by:
Gentlemen, often HTML tables meant for regular monitors become hard to keep one's place reading when viewed on small handheld devices. So let's insert visual clues -- letters or numbers indicating what column we are looking at -- right into the text of the table, so the user is sure to know what column an item was in, no matter how jumbled the...
2
1868
by: Laphan | last post by:
Hi All I have developed a site whereby it uses the contents of a folder (incs gifs, jpgs and css files) to display the web 'skin' of the site. This is OK, but each button on the site is an individual pic (I didn't want to use diff colour INPUT boxes because I wanted to display graphical buttons, rounded edges, etc - can you do this !?!?!)...
2
4543
by: Steve Macleod | last post by:
Hi, I am attempting to write a generic class for a warning box. The class looks like this: ..warningBox { background-image:url(images/co_images/warning_flag.gif); background-repeat:no-repeat; text-indent:15px; border: solid 1px silver; background-color:rgb(255,255,225); background-color:rgb(255,255,225); background-position:2px 2px;
1
1617
by: AA Arens | last post by:
On the main form I choosed a position (like manager, secretary...) from a combo box. The field in the footer form of another form mentioned the ID of the position. How to have the position TEXT mentioned in this field? I do have a 97 version database (but works with Acc 2003). There is no Row Source in the field properties. The field is...
12
2834
by: Boris Borcic | last post by:
Hello, I am trying to use UI Automation to drive an MS Windows app (with pywinauto). I need to scrape the app's window contents and use some form of OCR to get at the texts (pywinauto can't get at them). As an alternative to integrating an OCR engine, and since I know the fonts and sizes used to write on the app's windows, I reasoned...
0
7620
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8139
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7684
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6298
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5234
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3659
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2120
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1230
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
959
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.