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:
parent
877a0b447b
commit
382454a979
|
@ -353,7 +353,7 @@ class MathMathML extends MathRenderer {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets img tag for math image
|
* 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 $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
|
* @param boolean|string $classOverride if classOverride is false the class name will be calculated by getClassName
|
||||||
* @return string XML the image html tag
|
* @return string XML the image html tag
|
||||||
|
@ -368,11 +368,10 @@ class MathMathML extends MathRenderer {
|
||||||
$attribs = array();
|
$attribs = array();
|
||||||
if ( $classOverride === false ) { // $class = '' suppresses class attribute
|
if ( $classOverride === false ) { // $class = '' suppresses class attribute
|
||||||
$class = $this->getClassName( true, $png );
|
$class = $this->getClassName( true, $png );
|
||||||
$style = $png ? 'display: none;' : '';
|
|
||||||
} else {
|
} else {
|
||||||
$class = $classOverride;
|
$class = $classOverride;
|
||||||
$style = '';
|
|
||||||
}
|
}
|
||||||
|
$style = '';
|
||||||
if ( !$png ) {
|
if ( !$png ) {
|
||||||
$this->correctSvgStyle( $this->getSvg(), $style );
|
$this->correctSvgStyle( $this->getSvg(), $style );
|
||||||
}
|
}
|
||||||
|
@ -434,7 +433,7 @@ class MathMathML extends MathRenderer {
|
||||||
} else {
|
} else {
|
||||||
$mml = $this->getMathml();
|
$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( $this->getMode() ) . "\n";
|
||||||
$output .= $this->getFallbackImage( MW_MATH_PNG ) . "\n";
|
$output .= $this->getFallbackImage( MW_MATH_PNG ) . "\n";
|
||||||
$output .= HTML::closeElement( $element );
|
$output .= HTML::closeElement( $element );
|
||||||
|
|
|
@ -6,23 +6,9 @@
|
||||||
Shows browser-dependent math output.
|
Shows browser-dependent math output.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mwe-math-mathml-inline,
|
/* Default style for MathML. */
|
||||||
.mwe-math-mathml-display { display: none; }
|
.mwe-math-mathml-inline { display: none; }
|
||||||
.mwe-math-fallback-png-inline { display: inline; vertical-align: middle}
|
.mwe-math-mathml-display { display: none; margin-left: auto; margin-right: auto; }
|
||||||
.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 */
|
|
||||||
@namespace m url('http://www.w3.org/1998/Math/MathML');
|
@namespace m url('http://www.w3.org/1998/Math/MathML');
|
||||||
m|math {
|
m|math {
|
||||||
/* Try OpenType MATH fonts, the WOFF fallback and the old math fonts */
|
/* Try OpenType MATH fonts, the WOFF fallback and the old math fonts */
|
||||||
|
@ -34,3 +20,35 @@ m|math {
|
||||||
font-family: LatinModernMathWOFF;
|
font-family: LatinModernMathWOFF;
|
||||||
src: url(./LatinModern/latinmodern-math.woff);
|
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; }
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue