Last modified: 2014-04-11 08:24:52 UTC

Wikimedia Bugzilla is closed!

Wikimedia has migrated from Bugzilla to Phabricator. Bug reports should be created and updated in Wikimedia Phabricator instead. Please create an account in Phabricator and add your Bugzilla email address to it.
Wikimedia Bugzilla is read-only. If you try to edit or create any bug report in Bugzilla you will be shown an intentional error message.
In order to access the Phabricator task corresponding to a Bugzilla report, just remove "static-" from its URL.
You could still run searches in Bugzilla or access your list of votes but bug reports will obviously not be up-to-date in Bugzilla.
Bug 49965 - Superscripts and subscripts change line height
Superscripts and subscripts change line height
Status: RESOLVED FIXED
Product: MediaWiki
Classification: Unclassified
Interface (Other open bugs)
1.22.0
All All
: Low minor with 1 vote (vote)
: 1.23.0 release
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks: typography-refresh
  Show dependency treegraph
 
Reported: 2013-06-21 15:56 UTC by Eduard Braun
Modified: 2014-04-11 08:24 UTC (History)
9 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Screenshot of testcase in Firefox 28.0 on Windows 7 (5.08 KB, image/png)
2014-03-27 23:07 UTC, Eduard Braun
Details
Screenshot of testcase in Internet Explorer 11 on Windows 7 (7.76 KB, image/png)
2014-03-27 23:07 UTC, Eduard Braun
Details
Opera 21 Next on Windows 7 (18.19 KB, image/png)
2014-03-29 15:03 UTC, Bartosz Dziewoński
Details
IE 11 on Windows 7 (24.69 KB, image/png)
2014-03-29 15:04 UTC, Bartosz Dziewoński
Details
Opera 12 on Windows 7 (17.81 KB, image/png)
2014-03-29 15:05 UTC, Bartosz Dziewoński
Details

Description Eduard Braun 2013-06-21 15:56:11 UTC
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.
Comment 1 Andre Klapper 2013-06-21 21:16:31 UTC
Can you please provide a minimal testcase?
Comment 2 Eduard Braun 2013-06-21 22:25:31 UTC
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.
Comment 3 Gerrit Notification Bot 2014-03-27 21:57:41 UTC
Change 121419 had a related patch set uploaded by Kaldari:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121419
Comment 4 Gerrit Notification Bot 2014-03-27 22:21:34 UTC
Change 121419 merged by Swalling:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121419
Comment 5 Steven Walling 2014-03-27 22:22:27 UTC
Should be fixed now. Will roll in to prod soon.
Comment 6 Eduard Braun 2014-03-27 22:44:06 UTC
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
Comment 7 Ryan Kaldari 2014-03-27 23:05:09 UTC
line-height: 1 fixes it for me. Could you provide your browser details and a screenshot?
Comment 8 Eduard Braun 2014-03-27 23:07:26 UTC
Created attachment 14947 [details]
Screenshot of testcase in Firefox 28.0 on Windows 7
Comment 9 Eduard Braun 2014-03-27 23:07:49 UTC
Created attachment 14948 [details]
Screenshot of testcase in Internet Explorer 11 on Windows 7
Comment 10 Gerrit Notification Bot 2014-03-27 23:09:53 UTC
Change 121554 had a related patch set uploaded by Mwalker:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121554
Comment 11 Gerrit Notification Bot 2014-03-27 23:16:48 UTC
Change 121554 merged by Mwalker:
Follow-up to typography changes to Vector

https://gerrit.wikimedia.org/r/121554
Comment 12 Ryan Kaldari 2014-03-27 23:29:33 UTC
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)?
Comment 13 Eduard Braun 2014-03-27 23:38:43 UTC
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.
Comment 14 Derk-Jan Hartman 2014-03-27 23:56:25 UTC
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.
Comment 15 Bartosz Dziewoński 2014-03-29 15:02:47 UTC
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?
Comment 16 Bartosz Dziewoński 2014-03-29 15:03:48 UTC
Created attachment 14972 [details]
Opera 21 Next on Windows 7
Comment 17 Bartosz Dziewoński 2014-03-29 15:04:16 UTC
Created attachment 14973 [details]
IE 11 on Windows 7
Comment 18 Bartosz Dziewoński 2014-03-29 15:05:20 UTC
Created attachment 14974 [details]
Opera 12 on Windows 7
Comment 19 Gerrit Notification Bot 2014-03-29 15:09:12 UTC
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
Comment 20 Gerrit Notification Bot 2014-03-29 19:59:11 UTC
Change 121953 merged by TheDJ:
commonElements: Move sup, sub styling from Vector's CSS to common styles

https://gerrit.wikimedia.org/r/121953
Comment 21 Eduard Braun 2014-03-30 01:47:17 UTC
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/
Comment 22 entlinkt 2014-03-30 22:27:45 UTC
(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).
Comment 23 Bartosz Dziewoński 2014-04-03 15:04:25 UTC
(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.
Comment 24 Gerrit Notification Bot 2014-04-03 17:43:11 UTC
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
Comment 25 Gerrit Notification Bot 2014-04-06 08:53:06 UTC
Change 123677 merged by TheDJ:
shared.css: Move sup, sub styling from commonElements to shared styles

https://gerrit.wikimedia.org/r/123677
Comment 26 Bartosz Dziewoński 2014-04-06 11:09:30 UTC
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. :)

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links