golem
/
Math
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SVG images should not be loaded when MathML is used 

- Use span with a background-image instead of <img> for the fallback SVG so
  that they don't load in Gecko.
- Make the image fallback a span inline-block so that it can have a dimension.

Bug: 71929
Change-Id: I7f820cd5766db1fece452ebfc72915a55e42c82e
This commit is contained in:
Frédéric Wang 2014-10-12 17:03:13 +02:00 committed by Physikerwelt
parent 209f3218ad
commit d4e928a486
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
MathMathML.php
View File

@ -379,12 +379,12 @@ class MathMathML extends MathRenderer {
$class = $classOverride;
}
$style = '';
$style = 'background-image: url(\''. $url. '\'); background-repeat: no-repeat; background-size: contain;';
$this->correctSvgStyle( $this->getSvg(), $style );
if ( $class ) { $attribs['class'] = $class; }
if ( $style ) { $attribs['style'] = $style; }
// an alternative for svg might be an object with type="image/svg+xml"
return Xml::element( 'img', $this->getAttributes( 'img', $attribs , array( 'src' => $url, 'aria-hidden' => 'true' ) ) );
return Xml::element( 'span', $this->getAttributes( 'span', $attribs , array( 'aria-hidden' => 'true' ) ) );
}

2
modules/ext.math.css
View File

@ -36,7 +36,7 @@ m|math {
/* Default style for the image fallback. */
/* Note: We had to use !important rules because of conflicts with the style
generated by Mathoid. See https://gerrit.wikimedia.org/r/#/c/166213/ */
.mwe-math-fallback-image-inline { display: inline; vertical-align: middle; }
.mwe-math-fallback-image-inline { display: inline-block; vertical-align: middle; }
.mwe-math-fallback-image-display { display: block; margin-left: auto !important; margin-right: auto !important; }
/* Default style for the source fallback. */

5
modules/ext.math.js
View File

@ -1,7 +1,7 @@
( function ( $ ) {
'use strict';
// The MW_MATH_PNG and MW_MATH_MATHML constants are taken from Math.php
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5, img;
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5, img, url;
// If MathPlayer is installed we show the MathML rendering.
if (navigator.userAgent.indexOf('MathPlayer') > -1) {
@ -16,7 +16,8 @@
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).each(function() {
// Create a new PNG image to use as the fallback.
img = document.createElement('img');
img.setAttribute( 'src', this.src.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
url = this.style.backgroundImage.match(/url\('?([^']*)'?\)/)[1];
img.setAttribute( 'src', url.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
img.setAttribute( 'class', 'tex mwe-math-fallback-image-' + ($( this ).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display') );
img.setAttribute( 'aria-hidden', 'true' );
this.parentNode.insertBefore( img, this );