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

makeSvgsAndCss: Add missing semi-colons to CSS, tweak symbol alignment formula

Browse Source 
Sub-pixel alignment errors are unavoidable as the browser will rasterise
the SVG then round percentage offsets to the pixel grid.

Change-Id: I704db755d49be189db9670594e2ae2f193e6052d
This commit is contained in:
Ed Sanders 2016-02-01 22:03:10 +00:00 committed by Physikerwelt
parent fd6f963504
commit 2b9bce4a0b
2 changed files with 128 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modules/ve-math/tools/makeSvgsAndCss.js
View File

@ -28,7 +28,7 @@
// CSS rule to shift the baseline of the SVG to be a certain proportion of the way up the // CSS rule to shift the baseline of the SVG to be a certain proportion of the way up the
// button. // button.
singleButtonHeight = 1.8, // Height of the single-height math dialog buttons in em singleButtonHeight = 1.8, // Height of the single-height math dialog buttons in em
baseline = 0.4; // Proportion of the way up the button the baseline should be baseline = 0.65; // Proportion of the way down the button the baseline should be
symbolsData = fs.readFileSync( symbolsFile ).toString(); symbolsData = fs.readFileSync( symbolsFile ).toString();
try { try {
@ -92,12 +92,16 @@
var xmlObject = xml.svg.$, var xmlObject = xml.svg.$,
// Convert buttonHeight from em to ex, because SVG height is given in ex. (This is an // Convert buttonHeight from em to ex, because SVG height is given in ex. (This is an
// approximation, since the em:ex ratio differs from font to font.) // approximation, since the em:ex ratio differs from font to font.)
buttonHeight = symbol.largeLayout ? singleButtonHeight * 4 : singleButtonHeight * 2, buttonHeight = symbol.largeLayout ? singleButtonHeight * 4 : singleButtonHeight * 1.9931,
// height and verticalAlign rely on the format of the SVG parameters // height and verticalAlign rely on the format of the SVG parameters
height = parseFloat( xmlObject.height.slice( 0, -2 ) ), // HACK: Adjust these by a factor of 0.8 to match VE's default font size of 0.8em
verticalAlign = parseFloat( xmlObject.style.match( /vertical-align\:\s*(.*)ex/ )[ 1 ] ), height = parseFloat( xmlObject.height.slice( 0, -2 ) ) * 0.8,
offset = 50 - 100 * ( baseline - 0.5 * ( 1 - height / buttonHeight - verticalAlign ) ); verticalAlign = -parseFloat( xmlObject.style.match( /vertical-align\:\s*(.*)ex/ )[ 1 ] ) * 0.8,
cssRule += '\tbackground-position: 50% ' + offset + '%\n' + // CSS percentage positioning is based on the difference between the image and container sizes
heightDifference = buttonHeight - height,
offset = 100 * ( verticalAlign - height + ( baseline * buttonHeight ) ) / heightDifference;
cssRule += '\tbackground-position: 50% ' + offset + '%;\n' +
'}'; '}';
cssRules.push( cssRule ); cssRules.push( cssRule );
console.log( symbol.tex + ' -> ' + className ); console.log( symbol.tex + ' -> ' + className );

242
modules/ve-math/ve.ui.MWMathSymbols.css
View File

File diff suppressed because one or more lines are too long