Wrong rendering of ^{in table with valign=top in Chrome and Safari}

Question

I have the following HTML:

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>

The problem is that in the second

the <sup> is no longer positioned above the text but a few pixels lower. In essence the vertical-align:top raises all text except the superscripted to the top:

Chrome 23 Windows

This doesn't happen in Firefox, Opera but in Chrome and Safari (all Windows) and not with some fonts (like Times New Roman).

Do you think this is a problem with the font or actually a bug in Webkit? There is already a bug reported and I attached my test case but I don't know how quickly it'll be solved since that bug has been reported over three years ago...

Do you have an idea for a workaround? If possible with only CSS changes.

UPDATE

I tried the suggested solutions and most of them display the same as using a sup tag.

I created a fiddle to show the different implementations.

The Chrome bug report: http://code.google.com/p/chromium/issues/detail?id=23634

Jukka K. Korpela · Accepted Answer · 2012-12-07T14:56:18.503

5

Avoid using the sup element, since it causes various problems and never really produces a typographically correct superscript.

If you only need superscript 2 in your document, just use the SUPERSCRIPT TWO character either as such, “²”, or using the entity reference ². This means using a text character designed by a typographer to suit the font design.

If you need superscripts of various kinds and cannot represent all of them as superscript characters, it is better to use span elements and styling that reduces font size and raises the characters – using relative positioning rather than vertical-align (which tends to cause uneven line spacing and may sometimes interfere with vertical alignment set elsewhere). Example:

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}

edited Dec 07 '12 at 14:56

answered Dec 06 '12 at 12:17

Jukka K. Korpela

195,524
37
270
390

Using an entity is no option for me since a) it's displayed the same as `sup` and I can't/don't want to change the HTML. But styling it with CSS did work. Even when used with the `sup` tag. I just updated my question and added a fiddle. – Thomas Dec 07 '12 at 08:59
1

The entity, or the character, is displayed quite differently from `sup`. If you cannot change the markup, consider using JavaScript to replace the `sup` elements by characters. – Jukka K. Korpela Dec 07 '12 at 09:37
What I meant is that the problem I described also exists when using entities (see fiddle in question). Also I primarily need it for copyright and registered trademark signs which don't have a "superscript" entity as far as I know. – Thomas Dec 07 '12 at 12:55
The jsfiddle still uses `vertical-align` on block elements. Conforming browsers ignore it. Besides, even on Chrome with such code, or with `display: inline`, there is no problem with vertical placement when using the SUPERSCRIPT TWO character. And if you are actually using special characters as superscripts, unlike in the original question, then consider using relative positioning as suggested. – Jukka K. Korpela Dec 07 '12 at 14:22
The actual use case is a table cell so the vertical-align is rather important. I simplified it to try and find the root of this Webkit problem/inconsistency. Since there are no superscript versions of the characters I need superscripted I will use relative positioning. Thanks for your help – Thomas Dec 07 '12 at 14:42

score 1 · Answer 2 · answered May 28 '13 at 12:53

1

I found it much simpler especially if you already have everything added as elements to to set a global style for all sup elements in your .css file. like so.

sup {font-size: 80%; position: relative;bottom: .8ex;}

answered May 28 '13 at 12:53

user2428593

51
1

score 0 · Answer 3 · answered Feb 25 '14 at 14:59

0

On my opinion, it is better to use ² entity than css styling because of semantical meaning.

answered Feb 25 '14 at 14:59

UbiQue

1,521
1
12
10

The problem is I need other characters like Copyright, Registered Trademark, other numbers (for footnotes) and Greek letters. – Thomas Feb 25 '14 at 22:10
I meant I need those characters in superscript ;) Thanks anyway. – Thomas Feb 26 '14 at 20:12
Well, for CSS you can use @user2428593 solution. To HTML paste entity code which you need. Then in HTML just type: `^©`. – UbiQue Feb 28 '14 at 16:06

Wrong rendering of ^{in table with valign=top in Chrome and Safari}

3 Answers3

Linked

Wrong rendering of in table with valign=top in Chrome and Safari

3 Answers3

Linked

Wrong rendering of ^{in table with valign=top in Chrome and Safari}