Add option to adjust SVG baseline on math dialog buttons

If a symbol has "backgroundPosition" set to true, adjust
its vertical position in the button, according to the
vertical-align property on the SVG, by adding a
background-position property on its CSS rule.

Also set "backgroundPosition" to true for a number of
symbols and generate a new CSS file.

Bug: T123397
Change-Id: Ic9bbb65d2bedf38f569d8922599a2e3d2575f153
This commit is contained in:
Thalia 2016-01-30 18:09:42 +00:00
parent c77118d37d
commit 2b9e3307ac
4 changed files with 530 additions and 257 deletions

View File

@ -6,7 +6,8 @@
"pre": "\\dot{", "pre": "\\dot{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\ddot{a}", "tex": "\\ddot{a}",
@ -14,7 +15,8 @@
"pre": "\\ddot{", "pre": "\\ddot{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\acute{a}", "tex": "\\acute{a}",
@ -22,7 +24,8 @@
"pre": "\\acute{", "pre": "\\acute{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\grave{a}", "tex": "\\grave{a}",
@ -30,7 +33,8 @@
"pre": "\\grave{", "pre": "\\grave{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\check{a}", "tex": "\\check{a}",
@ -38,7 +42,8 @@
"pre": "\\check{", "pre": "\\check{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\breve{a}", "tex": "\\breve{a}",
@ -46,7 +51,8 @@
"pre": "\\breve{", "pre": "\\breve{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\tilde{a}", "tex": "\\tilde{a}",
@ -54,7 +60,8 @@
"pre": "\\tilde{", "pre": "\\tilde{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\bar{a}", "tex": "\\bar{a}",
@ -62,7 +69,8 @@
"pre": "\\bar{", "pre": "\\bar{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\hat{a}", "tex": "\\hat{a}",
@ -70,7 +78,8 @@
"pre": "\\hat{", "pre": "\\hat{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\widehat{a}", "tex": "\\widehat{a}",
@ -78,7 +87,8 @@
"pre": "\\widehat{", "pre": "\\widehat{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\vec{a}", "tex": "\\vec{a}",
@ -86,13 +96,15 @@
"pre": "\\vec{", "pre": "\\vec{",
"placeholder": "a", "placeholder": "a",
"post": "}" "post": "}"
} },
"alignBaseline": true
} }
], ],
"math-visualeditor-symbol-group-functions": [ "math-visualeditor-symbol-group-functions": [
{ {
"insert": "\\exp", "insert": "\\exp",
"tex": "\\exp" "tex": "\\exp",
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -101,19 +113,23 @@
"pre": "\\exp_", "pre": "\\exp_",
"placeholder": "a", "placeholder": "a",
"post": "" "post": ""
} },
"alignBaseline": true
}, },
{ {
"insert": "\\ln", "insert": "\\ln",
"tex": "\\ln" "tex": "\\ln",
"alignBaseline": true
}, },
{ {
"insert": "\\lg", "insert": "\\lg",
"tex": "\\lg" "tex": "\\lg",
"alignBaseline": true
}, },
{ {
"insert": "\\log", "insert": "\\log",
"tex": "\\log" "tex": "\\log",
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -122,112 +138,137 @@
"pre": "\\log_{", "pre": "\\log_{",
"placeholder": "10", "placeholder": "10",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"insert": "\\sin", "insert": "\\sin",
"tex": "\\sin" "tex": "\\sin",
"alignBaseline": true
}, },
{ {
"insert": "\\cos", "insert": "\\cos",
"tex": "\\cos" "tex": "\\cos",
"alignBaseline": true
}, },
{ {
"insert": "\\tan", "insert": "\\tan",
"tex": "\\tan" "tex": "\\tan",
"alignBaseline": true
}, },
{ {
"insert": "\\cot", "insert": "\\cot",
"tex": "\\cot" "tex": "\\cot",
"alignBaseline": true
}, },
{ {
"insert": "\\sec", "insert": "\\sec",
"tex": "\\sec" "tex": "\\sec",
"alignBaseline": true
}, },
{ {
"insert": "\\csc", "insert": "\\csc",
"tex": "\\csc" "tex": "\\csc",
"alignBaseline": true
}, },
{ {
"insert": "\\arcsin", "insert": "\\arcsin",
"wide": true, "wide": true,
"tex": "\\arcsin" "tex": "\\arcsin",
"alignBaseline": true
}, },
{ {
"insert": "\\arccos", "insert": "\\arccos",
"wide": true, "wide": true,
"tex": "\\arccos" "tex": "\\arccos",
"alignBaseline": true
}, },
{ {
"insert": "\\arctan", "insert": "\\arctan",
"wide": true, "wide": true,
"tex": "\\arctan" "tex": "\\arctan",
"alignBaseline": true
}, },
{ {
"insert": "\\arccot", "insert": "\\arccot",
"wide": true, "wide": true,
"tex": "\\arccot" "tex": "\\arccot",
"alignBaseline": true
}, },
{ {
"insert": "\\arcsec", "insert": "\\arcsec",
"wide": true, "wide": true,
"tex": "\\arcsec" "tex": "\\arcsec",
"alignBaseline": true
}, },
{ {
"insert": "\\arccsc", "insert": "\\arccsc",
"wide": true, "wide": true,
"tex": "\\arccsc" "tex": "\\arccsc",
"alignBaseline": true
}, },
{ {
"insert": "\\sinh", "insert": "\\sinh",
"tex": "\\sinh" "tex": "\\sinh",
"alignBaseline": true
}, },
{ {
"insert": "\\cosh", "insert": "\\cosh",
"tex": "\\cosh" "tex": "\\cosh",
"alignBaseline": true
}, },
{ {
"insert": "\\tanh", "insert": "\\tanh",
"tex": "\\tanh" "tex": "\\tanh",
"alignBaseline": true
}, },
{ {
"insert": "\\coth", "insert": "\\coth",
"tex": "\\coth" "tex": "\\coth",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{sh}", "insert": "\\operatorname{sh}",
"tex": "\\operatorname{sh}" "tex": "\\operatorname{sh}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{ch}", "insert": "\\operatorname{ch}",
"tex": "\\operatorname{ch}" "tex": "\\operatorname{ch}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{th}", "insert": "\\operatorname{th}",
"tex": "\\operatorname{th}" "tex": "\\operatorname{th}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{coth}", "insert": "\\operatorname{coth}",
"tex": "\\operatorname{coth}" "tex": "\\operatorname{coth}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{argsh}", "insert": "\\operatorname{argsh}",
"wide": true, "wide": true,
"tex": "\\operatorname{argsh}" "tex": "\\operatorname{argsh}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{argch}", "insert": "\\operatorname{argch}",
"wide": true, "wide": true,
"tex": "\\operatorname{argch}" "tex": "\\operatorname{argch}",
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{argth}", "insert": "\\operatorname{argth}",
"wide": true, "wide": true,
"tex": "\\operatorname{argth}" "tex": "\\operatorname{argth}",
"alignBaseline": true
}, },
{ {
"insert": "\\sgn", "insert": "\\sgn",
"tex": "\\sgn" "tex": "\\sgn",
"alignBaseline": true
}, },
{ {
"tex": "\\left\\vert s \\right\\vert", "tex": "\\left\\vert s \\right\\vert",
@ -235,7 +276,8 @@
"pre": "\\left\\vert ", "pre": "\\left\\vert ",
"placeholder": "s", "placeholder": "s",
"post": " \\right\\vert" "post": " \\right\\vert"
} },
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -244,7 +286,8 @@
"pre": "\\min(", "pre": "\\min(",
"placeholder": "x", "placeholder": "x",
"post": ",y)" "post": ",y)"
} },
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -253,65 +296,79 @@
"pre": "\\max(", "pre": "\\max(",
"placeholder": "x", "placeholder": "x",
"post": ",y)" "post": ",y)"
} },
"alignBaseline": true
} }
], ],
"math-visualeditor-symbol-group-bounds": [ "math-visualeditor-symbol-group-bounds": [
{ {
"insert": "\\min", "insert": "\\min",
"tex": "\\min" "tex": "\\min",
"alignBaseline": true
}, },
{ {
"insert": "\\max", "insert": "\\max",
"tex": "\\max" "tex": "\\max",
"alignBaseline": true
}, },
{ {
"insert": "\\inf", "insert": "\\inf",
"tex": "\\inf" "tex": "\\inf",
"alignBaseline": true
}, },
{ {
"insert": "\\sup", "insert": "\\sup",
"tex": "\\sup" "tex": "\\sup",
"alignBaseline": true
}, },
{ {
"insert": "\\lim", "insert": "\\lim",
"tex": "\\lim" "tex": "\\lim",
"alignBaseline": true
}, },
{ {
"insert": "\\liminf", "insert": "\\liminf",
"wide": true, "wide": true,
"tex": "\\liminf" "tex": "\\liminf",
"alignBaseline": true
}, },
{ {
"insert": "\\limsup", "insert": "\\limsup",
"wide": true, "wide": true,
"tex": "\\limsup" "tex": "\\limsup",
"alignBaseline": true
}, },
{ {
"insert": "\\dim", "insert": "\\dim",
"tex": "\\dim" "tex": "\\dim",
"alignBaseline": true
}, },
{ {
"insert": "\\deg", "insert": "\\deg",
"tex": "\\deg" "tex": "\\deg",
"alignBaseline": true
}, },
{ {
"insert": "\\det", "insert": "\\det",
"tex": "\\det" "tex": "\\det",
"alignBaseline": true
}, },
{ {
"insert": "\\ker", "insert": "\\ker",
"tex": "\\ker" "tex": "\\ker",
"alignBaseline": true
} }
], ],
"math-visualeditor-symbol-group-projections": [ "math-visualeditor-symbol-group-projections": [
{ {
"insert": "\\Pr", "insert": "\\Pr",
"tex": "\\Pr" "tex": "\\Pr",
"alignBaseline": true
}, },
{ {
"insert": "\\hom", "insert": "\\hom",
"tex": "\\hom" "tex": "\\hom",
"alignBaseline": true
}, },
{ {
"tex": "\\lVert z \\rVert", "tex": "\\lVert z \\rVert",
@ -319,11 +376,13 @@
"pre": "\\lVert ", "pre": "\\lVert ",
"placeholder": "z", "placeholder": "z",
"post": " \\rVert" "post": " \\rVert"
} },
"alignBaseline": true
}, },
{ {
"insert": "\\arg", "insert": "\\arg",
"tex": "\\arg" "tex": "\\arg",
"alignBaseline": true
} }
], ],
"math-visualeditor-symbol-group-derivatives": [ "math-visualeditor-symbol-group-derivatives": [
@ -379,11 +438,13 @@
}, },
{ {
"insert": "f'", "insert": "f'",
"tex": "f'" "tex": "f'",
"alignBaseline": true
}, },
{ {
"insert": "f''", "insert": "f''",
"tex": "f''" "tex": "f''",
"alignBaseline": true
}, },
{ {
"tex": "f^{(3)}", "tex": "f^{(3)}",
@ -391,7 +452,8 @@
"pre": "f^{(", "pre": "f^{(",
"placeholder": "3", "placeholder": "3",
"post": ")}" "post": ")}"
} },
"alignBaseline": true
}, },
{ {
"insert": "\\dot y", "insert": "\\dot y",
@ -476,7 +538,8 @@
"pre": "\\pmod{", "pre": "\\pmod{",
"placeholder": "m", "placeholder": "m",
"post": "}" "post": "}"
} },
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -485,7 +548,8 @@
"pre": "", "pre": "",
"placeholder": "a", "placeholder": "a",
"post": "\\bmod b" "post": "\\bmod b"
} },
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -494,7 +558,8 @@
"pre": "\\gcd(", "pre": "\\gcd(",
"placeholder": "m", "placeholder": "m",
"post": ", n)" "post": ", n)"
} },
"alignBaseline": true
}, },
{ {
"insert": "\\operatorname{lcm}(m, n)", "insert": "\\operatorname{lcm}(m, n)",
@ -504,7 +569,8 @@
"pre": "\\operatorname{lcm}(", "pre": "\\operatorname{lcm}(",
"placeholder": "m", "placeholder": "m",
"post": ", n)" "post": ", n)"
} },
"alignBaseline": true
}, },
{ {
"insert": "\\mid", "insert": "\\mid",
@ -1805,7 +1871,8 @@
}, },
{ {
"insert": "\\ldots", "insert": "\\ldots",
"tex": "\\ldots" "tex": "\\ldots",
"alignBaseline": true
}, },
{ {
"insert": "\\cdots", "insert": "\\cdots",
@ -1985,95 +2052,118 @@
"math-visualeditor-symbol-group-greek": [ "math-visualeditor-symbol-group-greek": [
{ {
"insert": "\\alpha", "insert": "\\alpha",
"tex": "\\alpha" "tex": "\\alpha",
"alignBaseline": true
}, },
{ {
"insert": "\\beta", "insert": "\\beta",
"tex": "\\beta" "tex": "\\beta",
"alignBaseline": true
}, },
{ {
"insert": "\\gamma", "insert": "\\gamma",
"tex": "\\gamma" "tex": "\\gamma",
"alignBaseline": true
}, },
{ {
"insert": "\\delta", "insert": "\\delta",
"tex": "\\delta" "tex": "\\delta",
"alignBaseline": true
}, },
{ {
"insert": "\\epsilon", "insert": "\\epsilon",
"tex": "\\epsilon" "tex": "\\epsilon",
"alignBaseline": true
}, },
{ {
"insert": "\\zeta", "insert": "\\zeta",
"tex": "\\zeta" "tex": "\\zeta",
"alignBaseline": true
}, },
{ {
"insert": "\\eta", "insert": "\\eta",
"tex": "\\eta" "tex": "\\eta",
"alignBaseline": true
}, },
{ {
"insert": "\\theta", "insert": "\\theta",
"tex": "\\theta" "tex": "\\theta",
"alignBaseline": true
}, },
{ {
"insert": "\\iota", "insert": "\\iota",
"tex": "\\iota" "tex": "\\iota",
"alignBaseline": true
}, },
{ {
"insert": "\\kappa", "insert": "\\kappa",
"tex": "\\kappa" "tex": "\\kappa",
"alignBaseline": true
}, },
{ {
"insert": "\\lambda", "insert": "\\lambda",
"tex": "\\lambda" "tex": "\\lambda",
"alignBaseline": true
}, },
{ {
"insert": "\\mu", "insert": "\\mu",
"tex": "\\mu" "tex": "\\mu",
"alignBaseline": true
}, },
{ {
"insert": "\\nu", "insert": "\\nu",
"tex": "\\nu" "tex": "\\nu",
"alignBaseline": true
}, },
{ {
"insert": "\\xi", "insert": "\\xi",
"tex": "\\xi" "tex": "\\xi",
"alignBaseline": true
}, },
{ {
"insert": "\\pi", "insert": "\\pi",
"tex": "\\pi" "tex": "\\pi",
"alignBaseline": true
}, },
{ {
"insert": "\\rho", "insert": "\\rho",
"tex": "\\rho" "tex": "\\rho",
"alignBaseline": true
}, },
{ {
"insert": "\\sigma", "insert": "\\sigma",
"tex": "\\sigma" "tex": "\\sigma",
"alignBaseline": true
}, },
{ {
"insert": "\\tau", "insert": "\\tau",
"tex": "\\tau" "tex": "\\tau",
"alignBaseline": true
}, },
{ {
"insert": "\\upsilon", "insert": "\\upsilon",
"tex": "\\upsilon" "tex": "\\upsilon",
"alignBaseline": true
}, },
{ {
"insert": "\\phi", "insert": "\\phi",
"tex": "\\phi" "tex": "\\phi",
"alignBaseline": true
}, },
{ {
"insert": "\\chi", "insert": "\\chi",
"tex": "\\chi" "tex": "\\chi",
"alignBaseline": true
}, },
{ {
"insert": "\\psi", "insert": "\\psi",
"tex": "\\psi" "tex": "\\psi",
"alignBaseline": true
}, },
{ {
"insert": "\\omega", "insert": "\\omega",
"tex": "\\omega" "tex": "\\omega",
"alignBaseline": true
}, },
{ {
"insert": "\\Alpha", "insert": "\\Alpha",
@ -2169,35 +2259,43 @@
}, },
{ {
"insert": "\\varepsilon", "insert": "\\varepsilon",
"tex": "\\varepsilon" "tex": "\\varepsilon",
"alignBaseline": true
}, },
{ {
"insert": "\\digamma", "insert": "\\digamma",
"tex": "\\digamma" "tex": "\\digamma",
"alignBaseline": true
}, },
{ {
"insert": "\\varkappa", "insert": "\\varkappa",
"tex": "\\varkappa" "tex": "\\varkappa",
"alignBaseline": true
}, },
{ {
"insert": "\\varpi", "insert": "\\varpi",
"tex": "\\varpi" "tex": "\\varpi",
"alignBaseline": true
}, },
{ {
"insert": "\\varrho", "insert": "\\varrho",
"tex": "\\varrho" "tex": "\\varrho",
"alignBaseline": true
}, },
{ {
"insert": "\\varsigma", "insert": "\\varsigma",
"tex": "\\varsigma" "tex": "\\varsigma",
"alignBaseline": true
}, },
{ {
"insert": "\\vartheta", "insert": "\\vartheta",
"tex": "\\vartheta" "tex": "\\vartheta",
"alignBaseline": true
}, },
{ {
"insert": "\\varphi", "insert": "\\varphi",
"tex": "\\varphi" "tex": "\\varphi",
"alignBaseline": true
} }
], ],
"math-visualeditor-symbol-group-hebrew": [ "math-visualeditor-symbol-group-hebrew": [
@ -2652,7 +2750,8 @@
"pre": "", "pre": "",
"placeholder": "a", "placeholder": "a",
"post": "^2" "post": "^2"
} },
"alignBaseline": true
}, },
{ {
"tex": "a_2", "tex": "a_2",
@ -2660,7 +2759,8 @@
"pre": "", "pre": "",
"placeholder": "a", "placeholder": "a",
"post": "_2" "post": "_2"
} },
"alignBaseline": true
}, },
{ {
"tex": "10^{30}", "tex": "10^{30}",
@ -2668,7 +2768,8 @@
"pre": "", "pre": "",
"placeholder": "10", "placeholder": "10",
"post": "^{30}" "post": "^{30}"
} },
"alignBaseline": true
}, },
{ {
"tex": "a^{2+2}", "tex": "a^{2+2}",
@ -2676,7 +2777,8 @@
"pre": "", "pre": "",
"placeholder": "a", "placeholder": "a",
"post": "^{2+2}" "post": "^{2+2}"
} },
"alignBaseline": true
}, },
{ {
"tex": "a_{i,j}", "tex": "a_{i,j}",
@ -2684,7 +2786,8 @@
"pre": "", "pre": "",
"placeholder": "a", "placeholder": "a",
"post": "_{i,j}" "post": "_{i,j}"
} },
"alignBaseline": true
}, },
{ {
"tex": "b_{f'}", "tex": "b_{f'}",
@ -2692,7 +2795,8 @@
"pre": "", "pre": "",
"placeholder": "b", "placeholder": "b",
"post": "_{f'}" "post": "_{f'}"
} },
"alignBaseline": true
}, },
{ {
"tex": "x_2^3", "tex": "x_2^3",
@ -2700,7 +2804,8 @@
"pre": "", "pre": "",
"placeholder": "x", "placeholder": "x",
"post": "_2^3" "post": "_2^3"
} },
"alignBaseline": true
}, },
{ {
"tex": "{x_2}^3", "tex": "{x_2}^3",
@ -2708,7 +2813,8 @@
"pre": "{", "pre": "{",
"placeholder": "x", "placeholder": "x",
"post": "_2}^3" "post": "_2}^3"
} },
"alignBaseline": true
}, },
{ {
"wide": true, "wide": true,
@ -2717,7 +2823,8 @@
"pre": "", "pre": "",
"placeholder": "10", "placeholder": "10",
"post": "^{10^{8}}" "post": "^{10^{8}}"
} },
"alignBaseline": true
}, },
{ {
"contain": true, "contain": true,
@ -2739,7 +2846,8 @@
"pre": "\\overset{", "pre": "\\overset{",
"placeholder": "\\alpha", "placeholder": "\\alpha",
"post": "}{\\omega}" "post": "}{\\omega}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\underset{\\alpha}{\\omega}", "tex": "\\underset{\\alpha}{\\omega}",
@ -2747,7 +2855,8 @@
"pre": "\\underset{", "pre": "\\underset{",
"placeholder": "\\alpha", "placeholder": "\\alpha",
"post": "}{\\omega}" "post": "}{\\omega}"
} },
"alignBaseline": true
}, },
{ {
"tex": "\\overset{\\alpha}{\\underset{\\gamma}{\\omega}}", "tex": "\\overset{\\alpha}{\\underset{\\gamma}{\\omega}}",
@ -2763,23 +2872,28 @@
"pre": "\\stackrel{", "pre": "\\stackrel{",
"placeholder": "\\alpha", "placeholder": "\\alpha",
"post": "}{\\omega}" "post": "}{\\omega}"
} },
"duplicate": true
}, },
{ {
"insert": "x'", "insert": "x'",
"tex": "x'" "tex": "x'",
"alignBaseline": true
}, },
{ {
"insert": "y''", "insert": "y''",
"tex": "y''" "tex": "y''",
"alignBaseline": true
}, },
{ {
"insert": "f'", "insert": "f'",
"tex": "f'" "tex": "f'",
"alignBaseline": true
}, },
{ {
"insert": "f''", "insert": "f''",
"tex": "f''" "tex": "f''",
"alignBaseline": true
}, },
{ {
"tex": "\\overrightarrow{a b}", "tex": "\\overrightarrow{a b}",

View File

@ -3,11 +3,13 @@
/* jshint node: true */ /* jshint node: true */
( function () { ( function () {
var i, count, group, symbol, symbols, symbolObject, var i, count, currentClassName, group, symbol, symbols, symbolObject,
symbolsData, cssData, cssLines, index, symbolsData, cssData, cssLines, alignBaseline,
cssRules = [], unmodifiedClasses = {},
cssClasses = [], cssRules = [], // Whole CSS rules
symbolList = [], cssClasses = {}, // Unique part of class name and whether baseline is shifted
currentRule = [],
symbolList = [], // Symbols whose CSS rules need to be added or adjusted
symbolsFile = '../symbols.json', symbolsFile = '../symbols.json',
cssFile = '../ve.ui.MWMathSymbols.css', cssFile = '../ve.ui.MWMathSymbols.css',
cssPrefix = '.ve-ui-mwMathSymbol-', cssPrefix = '.ve-ui-mwMathSymbol-',
@ -20,7 +22,13 @@
{ convertTransform: false } { convertTransform: false }
] ]
} ), } ),
mathoidMaxConnections = 5; xml2js = require( 'xml2js' ),
mathoidMaxConnections = 5,
// If symbol.alignBaseline is true, a background-position property will be added to the
// CSS rule to shift the baseline of the SVG to be a certain proportion of the way up the
// button.
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
symbolsData = fs.readFileSync( symbolsFile ).toString(); symbolsData = fs.readFileSync( symbolsFile ).toString();
try { try {
@ -44,7 +52,7 @@
function makeRequest( symbol ) { function makeRequest( symbol ) {
var request, var request,
data = querystring.stringify( { data = querystring.stringify( {
q: symbol q: symbol.tex
} ), } ),
// API call to mathoid // API call to mathoid
options = { options = {
@ -57,7 +65,6 @@
'Content-Length': Buffer.byteLength( data ) 'Content-Length': Buffer.byteLength( data )
} }
}; };
// Populate and make the API call // Populate and make the API call
request = http.request( options, function ( res ) { request = http.request( options, function ( res ) {
var body = ''; var body = '';
@ -68,23 +75,38 @@
} ); } );
res.on( 'end', function () { res.on( 'end', function () {
var className = texToClass( symbol ), var className = texToClass( symbol.tex ),
svg = JSON.parse( body ).svg; svg = JSON.parse( body ).svg;
if ( !svg ) { if ( !svg ) {
console.log( symbol + ' FAILED: ' + body ); console.log( symbol.tex + ' FAILED: ' + body );
onEnd(); onEnd();
return; return;
} }
svgo.optimize( svg, function ( result ) { svgo.optimize( svg, function ( result ) {
// write to the css file var cssRule = cssPrefix + className + ' {\n' +
cssRules.push( '\tbackground-image: url(data:image/svg+xml,' + encodeURIComponentForCSS( result.data ) + ');\n';
cssPrefix + className + ' {\n' + if ( symbol.alignBaseline ) {
'\tbackground-image: url(data:image/svg+xml,' + encodeURIComponentForCSS( result.data ) + ');\n' + xml2js.parseString( svg, function ( err, xml ) {
'}' var xmlObject = xml.svg.$,
); // Convert buttonHeight from em to ex, because SVG height is given in ex. (This is an
console.log( symbol + ' -> ' + className ); // approximation, since the em:ex ratio differs from font to font.)
buttonHeight = symbol.largeLayout ? singleButtonHeight * 4 : singleButtonHeight * 2,
// height and verticalAlign rely on the format of the SVG parameters
height = parseFloat( xmlObject.height.slice( 0, -2 ) ),
verticalAlign = parseFloat( xmlObject.style.match( /vertical-align\:\s*(.*)ex/ )[ 1 ] ),
offset = 50 - 100 * ( baseline - 0.5 * ( 1 - height / buttonHeight - verticalAlign ) );
cssRule += '\tbackground-position: 50% ' + offset + '%\n' +
'}';
cssRules.push( cssRule );
console.log( symbol.tex + ' -> ' + className );
} );
} else {
cssRule += '}';
cssRules.push( cssRule );
console.log( symbol.tex + ' -> ' + className );
}
} ); } );
onEnd(); onEnd();
@ -125,8 +147,18 @@
cssLines = cssData.split( '\n' ); cssLines = cssData.split( '\n' );
for ( i = 0; i < cssLines.length; i++ ) { for ( i = 0; i < cssLines.length; i++ ) {
if ( cssLines[ i ].indexOf( cssPrefix ) === 0 ) { if ( cssLines[ i ].indexOf( cssPrefix ) === 0 ) {
cssRules.push( cssLines.slice( i, i + 3 ).join( '\n' ) ); currentClassName = cssLines[ i ].slice( cssPrefix.length, -2 );
cssClasses.push( cssLines[ i ].slice( cssPrefix.length, -2 ) ); currentRule.push( cssLines[ i ] );
cssClasses[ currentClassName ] = false; // Default to false
} else if ( currentRule.length ) {
currentRule.push( cssLines[ i ] );
if ( cssLines[ i ].indexOf( '\tbackground-position' ) === 0 ) {
cssClasses[ currentClassName ] = true;
}
if ( cssLines[ i ].indexOf( '}' ) === 0 ) {
cssRules.push( currentRule.join( '\n' ) );
currentRule.splice( 0, currentRule.length );
}
} }
} }
} }
@ -139,21 +171,32 @@
if ( symbol.duplicate || symbol.notWorking ) { if ( symbol.duplicate || symbol.notWorking ) {
continue; continue;
} }
index = cssClasses.indexOf( texToClass( symbol.tex ) ); currentClassName = texToClass( symbol.tex );
if ( index === -1 ) { alignBaseline = !symbol.alignBaseline;
symbolList.push( symbol.tex ); // If symbol is not in the old CSS file, or its alignBaseline status has changed,
// add it to symbolList. Check to make sure it hasn't already been added.
if ( cssClasses[ currentClassName ] === undefined ||
( unmodifiedClasses[ currentClassName ] !== true &&
cssClasses[ currentClassName ] === alignBaseline ) ) {
symbolList.push( symbol );
} else { } else {
// Remove CSS classes we found in the symbol list so that // At the end of this loop, any CSS class names that aren't in unmodifiedClasses
// and the end of this loop, cssClasses contains classes // will be deleted from cssRules. cssRules will then only contain rules that will
// that have been deleted from the symbol list // stay unmodified.
cssClasses.splice( index, 1 ); unmodifiedClasses[ currentClassName ] = true;
} }
} }
} }
// Remove classes that are no longer in the JSON // Keep only classes that will stay the same. Remove classes that are being adjusted and
// classes of symbols that have been deleted from the JSON.
cssRules = cssRules.filter( function ( rule ) { cssRules = cssRules.filter( function ( rule ) {
return cssClasses.indexOf( rule.split( '\n' )[ 0 ].slice( cssPrefix.length, -2 ) ) === -1; currentClassName = rule.split( '\n' )[ 0 ].slice( cssPrefix.length, -2 );
if ( unmodifiedClasses[ currentClassName ] ) {
return true;
}
console.log( 'Removing or adjusting: ' + currentClassName );
return false;
} ); } );
count = 0; count = 0;

View File

@ -1,6 +1,7 @@
{ {
"name": "math-icons-generator", "name": "math-icons-generator",
"dependencies": { "dependencies": {
"svgo": "^0.6.0" "svgo": "^0.6.0",
"xml2js": "^0.4.16"
} }
} }

File diff suppressed because one or more lines are too long