Jump to content

User:Hyacinth/monobook.css

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
; The problem: In Safari 2.03 and Opera 8.51 (and possibly other browsers), superscript and subscript text forces a taller line-height on a line of text.  Making the superscript or subscript text smaller helps a bit, but doesn't eliminate the problem.  The result is a taller leading space above or below the line, which looks like a paragraph break, and slows reading down.

; The solution: A fix is to use relative positioning instead of normal superscript or subscript styling to move the superscript text up or down.  Put the following code into your [[Help:User style |user style]] (at user:<em style="font-style:normal; color:#666;">[you]</em>/monobook.css).  Then force the updated style sheet to reload, by clicking shift-reload, or alt-refresh on any Wikipedia page.

<pre>
/* keep superscript and subscript text from breaking the line-spacing */
#bodyContent sup {
    font-size: smaller;
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
}
#bodyContent sub {
    font-size: smaller;
    vertical-align: baseline;
    position: relative;
    bottom: -0.25em;
}
</pre>

; [[Cascading Style Sheets |CSS]] details
{| style="background-color:transparent;" summary="line-by-line explanation"
|-
| /* ... */
| comment
|-
| <code>#bodyContent sup { }</code>
| selector, chooses superscripts in the page body
|-
| <code>font-size: smaller;</code>
| make it smaller
|-
| <code>vertical-align: baseline;</code>
| neutralize the superscript formatting
|-
| <code>position: relative;</code>
| allow relative positioning
|-
| <code>bottom: 0.33em;</code>
| move it up a third of a line
|}