Update modules/ext.math.css

Currently, the PNG fallback is hidden in the MathML mode and the MathML & SVG
are respectively hidden and visible by default; the visibility of the
SVG/MathML output is only changed for Gecko. This does not work well for
IE < 9, which does not support SVG. This commit tries to improve the selection
of PNG, SVG or MathML according to the browser capatibility.

Change-Id: Ie9b0fdb66c51fbf6be98df092ce4de29fbba6068
This commit is contained in:
Frédéric Wang 2014-06-18 16:53:50 +02:00 committed by Physikerwelt
parent 877a0b447b
commit 382454a979
2 changed files with 38 additions and 21 deletions

View file

@ -353,7 +353,7 @@ class MathMathML extends MathRenderer {
/**
* Gets img tag for math image
* @param int $mode if MW_MATH_MATHML a png is used instead of an svg image
* @param int $mode if MW_MATH_PNG a png is used instead of an svg image
* @param boolean $noRender if true no rendering will be performed if the image is not stored in the database
* @param boolean|string $classOverride if classOverride is false the class name will be calculated by getClassName
* @return string XML the image html tag
@ -368,11 +368,10 @@ class MathMathML extends MathRenderer {
$attribs = array();
if ( $classOverride === false ) { // $class = '' suppresses class attribute
$class = $this->getClassName( true, $png );
$style = $png ? 'display: none;' : '';
} else {
$class = $classOverride;
$style = '';
}
$style = '';
if ( !$png ) {
$this->correctSvgStyle( $this->getSvg(), $style );
}
@ -434,7 +433,7 @@ class MathMathML extends MathRenderer {
} else {
$mml = $this->getMathml();
}
$output .= Xml::tags( $element, array( 'class' => $this->getClassName(), 'style' => 'display: none;' ), $mml );
$output .= Xml::tags( $element, array( 'class' => $this->getClassName() ), $mml );
$output .= $this->getFallbackImage( $this->getMode() ) . "\n";
$output .= $this->getFallbackImage( MW_MATH_PNG ) . "\n";
$output .= HTML::closeElement( $element );

View file

@ -6,23 +6,9 @@
Shows browser-dependent math output.
*/
.mwe-math-mathml-inline,
.mwe-math-mathml-display { display: none; }
.mwe-math-fallback-png-inline { display: inline; vertical-align: middle}
.mwe-math-fallback-png-display { display: block; margin-left: auto; margin-right: auto;}
.mwe-math-fallback-source-inline { display: inline; vertical-align: middle}
.mwe-math-fallback-source-display { display: block; margin-left: auto; margin-right: auto;}
@-moz-document url-prefix() {
span.mwe-math-mathml-inline { display: inline !important; }
span.mwe-math-mathml-display { display: block !important; margin: auto !important; }
span.mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
span.mwe-math-mathml-display + img.mwe-math-fallback-svg-display,
img.mwe-math-fallback-svg-inline + img.mwe-math-fallback-png-inline,
img.mwe-math-fallback-svg-display + img.mwe-math-fallback-png-display { display: none !important; }
}
/* Set the fonts to use for the MathML rendering */
/* Default style for MathML. */
.mwe-math-mathml-inline { display: none; }
.mwe-math-mathml-display { display: none; margin-left: auto; margin-right: auto; }
@namespace m url('http://www.w3.org/1998/Math/MathML');
m|math {
/* Try OpenType MATH fonts, the WOFF fallback and the old math fonts */
@ -34,3 +20,35 @@ m|math {
font-family: LatinModernMathWOFF;
src: url(./LatinModern/latinmodern-math.woff);
}
/* Default style for SVG. */
img.mwe-math-fallback-svg-inline { display: none; }
img.mwe-math-fallback-svg-display { display: none; margin-left: auto; margin-right: auto; }
/* Default style for the PNG fallback. */
img.mwe-math-fallback-png-inline { display: inline; vertical-align: middle; }
img.mwe-math-fallback-png-display { display: block; }
/* Default style for the source fallback. */
.mwe-math-fallback-source-inline { display: inline; vertical-align: middle; }
.mwe-math-fallback-source-display { display: block; margin-left: auto; margin-right: auto; }
/******************************************************************************/
/* Browser-specific hacks are bad but let's use that for now...
See http://browserhacks.com/ */
/* For all browsers but IE < 9, hide the PNG fallback and show the SVG instead.
We override the default style for PNG and SVG above */
:root * > img.mwe-math-fallback-svg-inline { display: inline; }
:root * > img.mwe-math-fallback-svg-display { display: block; }
:root * > img.mwe-math-fallback-svg-inline + img.mwe-math-fallback-png-inline,
:root * > img.mwe-math-fallback-svg-display + img.mwe-math-fallback-png-display { display: none; }
@-moz-document url-prefix() {
/* For Gecko browsers, hide the SVG fallback and show the MathML instead.
We override the style for SVG and MathML above */
.mwe-math-mathml-inline { display: inline; }
.mwe-math-mathml-display { display: block; }
:root * > .mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
:root * > .mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none; }
}