Last modified: 2014-04-11 08:24:52 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.
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
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?
Created attachment 14947 [details] Screenshot of testcase in Firefox 28.0 on Windows 7
Created attachment 14948 [details] Screenshot of testcase in Internet Explorer 11 on Windows 7
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 [details] Opera 21 Next on Windows 7
Created attachment 14973 [details] IE 11 on Windows 7
Created attachment 14974 [details] Opera 12 on Windows 7
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. :)