Page MenuHomePhabricator

Superscripts and subscripts change line height
Closed, ResolvedPublic

Description

When adding superscripts and/or subscripts to a text, the line height of the line increases.

This leads to uneven line spacing between lines which

  1. is very bad typographic style
  2. makes it hard (if not impossible) to distinguish between spacing produced by new paragraphs and spacing produced because of the reported issue.
  3. simply looks ugly

Especially point 2) is detrimental for all Wikipedia projects since it conceals the intended structure of the text and therefore makes texts and content harder to understand and to follow.

I know, that this is basically a browser issue (I tested Firefox 21 as well as Internet Explorer 10 on Windows 7 with Vector skin) and not MediaWiki's fault. However I think we should consider adding some workaround to fix the bad rendering of sub- and supscripts in modern browsers.

A quick fix I tested would be changing the <sup> and <sub> tags style to include "line-height:0;". This makes texts look reasonable, with the downside that (with the current default line height of the surrounding text) subscripts would touch superscripts of the following line if they happened to be at the same position (very unlikely though). This could be easily fixed by increasing the default line-height, though.

However, I'm no specialist with CSS, so it's likely there could be a better solution around.

I hope we can find a solution for this issue. It's especially annoying in scientific articles on chemical, physical or mathematical topics, where many super- and subscript are used. In some articles there are fewer lines with the intended line height than there are with increased line height.


Version: 1.22.0
Severity: minor
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=41442

Details

Reference
bz49965

Event Timeline

bzimport raised the priority of this task from to Low.
bzimport set Reference to bz49965.
bzimport added a subscriber: Unknown Object (MLST).

Can you please provide a minimal testcase?

Sure, see http://de.wikipedia.org/wiki/Benutzer:Patrick87/lineheight for some basic testcase which compares normal text, text with sub/superscripts and text with sub/superscripts with my CSS suggestion applied.

Change 121419 had a related patch set uploaded by Kaldari:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121419

Change 121419 merged by Swalling:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121419

swalling wrote:

Should be fixed now. Will roll in to prod soon.

This is *not* fixed by "line-height:1" as apparent from the testcase I supplied initially.

It would be fixed by "line-height:0" though as was used in the initial patch set linked.

[1] https://de.wikipedia.org/wiki/Benutzer:Patrick87/lineheight

line-height: 1 fixes it for me. Could you provide your browser details and a screenshot?

Screenshot of testcase in Firefox 28.0 on Windows 7

Attached:

Screenshot of testcase in Internet Explorer 11 on Windows 7

Attached:

Change 121554 had a related patch set uploaded by Mwalker:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121554

Change 121554 merged by Mwalker:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121554

Eduard Braun: How does it look if you change the line-height of the <p> tags to "1.6" instead of "1.5em" (as we are eventually planning to do)?

If I change line height and/or try vector beta it's lees noticeable for <sup>s (although still not solved) whereas the problem persists for <sub>s.

It's also not truly avoidable. The browser gives space where needed. In the example it is needed. The reason why it is needed ? Well that is the note "Possible (but unlikely) issue".

Try that and then nest the sup/subs a couple of times, play with your browser zoom levels and the chance for overlaps become more and more likely.

I expanded the test case part about "Possible issue with overlapping sub/superscripts on following lines".

The difference between line-height:0, line-height:1 and line-height:1em is unnoticeable for me on Opera 21 and IE 11 on Windows 7, and very minor on Opera 12 (where the line-height is for some reason larger to prevent the overlap in the special case). (I'll upload screenshots in a second.)

Given the above, and given that line-height:0 apparently causes some problems on old IE (https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_4#Space_between_paragraphs_please_.28References.29), I suggest keeping line-height:1 and closing this bug. Thoughts?

Created attachment 14972
Opera 21 Next on Windows 7

Attached:

Created attachment 14973
IE 11 on Windows 7

Attached:

Created attachment 14974
Opera 12 on Windows 7

Attached:

Change 121953 had a related patch set uploaded by Bartosz Dziewoński:
commonElements: Move sup, sub styling from Vector's CSS to common styles

https://gerrit.wikimedia.org/r/121953

Change 121953 merged by TheDJ:
commonElements: Move sup, sub styling from Vector's CSS to common styles

https://gerrit.wikimedia.org/r/121953

As it seems where not really able to fix this issue only by adjusting the line-height of the subs/sups since especially Firefox uses different positioning:

What if we take a completely different approach and set the position of subs and sups manually? This way we could potentially synchronize the positioning across browsers and therfore produce a pleasing display on all systems.

Similar to [1] I tested the following CSS in IE 11 and FF 28 and it seems to work really nicely:

sup, sub {

vertical-align: baseline;
position: relative;

}
sup { top: -0.6em; }
sub { top: 0.4em; }

Would this be a reasonable approach?

[1] http://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/

(In reply to Gerrit Notification Bot from comment #20)

Change 121953 merged by TheDJ:
commonElements: Move sup, sub styling from Vector's CSS to common styles

https://gerrit.wikimedia.org/r/121953

This rule should be moved further from commonElements.css to shared.css so that *all* skins will get the fix (commonElements.css is not loaded in Modern and CologneBlue).

(In reply to Eduard Braun from comment #21)

As it seems where not really able to fix this issue only by adjusting the
line-height of the subs/sups since especially Firefox uses different
positioning:

<snip>

Honestly I think that what we have right now is the best solution to this; the real line height with sub/superscripts is only different from real line height of regular lines when it's necessary to prevent overlaps.

(In reply to entlinkt from comment #22)

This rule should be moved further from commonElements.css to shared.css so
that *all* skins will get the fix (commonElements.css is not loaded in
Modern and CologneBlue).

Ugh, right, it looks like this should have been done this way.

Change 123677 had a related patch set uploaded by Bartosz Dziewoński:
shared.css: Move sup, sub styling from commonElements to shared styles

https://gerrit.wikimedia.org/r/123677

Change 123677 merged by TheDJ:
shared.css: Move sup, sub styling from commonElements to shared styles

https://gerrit.wikimedia.org/r/123677

I'm going to tentatively close this bug.

If anybody still feels this can be done better, feel free to submit patches
– but with *lots* of before-and-after screenshots, especially on problematic browsers. :)