From c33e0f06b809277c2cda75e73437571fee720c9e Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Wed, 9 Apr 2014 16:00:10 -0400 Subject: [PATCH] Fix scaling for SVG (similar to HTML-CSS fixes). Issue #703 --- unpacked/jax/output/SVG/autoload/menclose.js | 7 +- .../jax/output/SVG/autoload/mmultiscripts.js | 3 +- unpacked/jax/output/SVG/autoload/mtable.js | 4 +- unpacked/jax/output/SVG/autoload/multiline.js | 2 +- unpacked/jax/output/SVG/jax.js | 75 +++++++++---------- 5 files changed, 45 insertions(+), 46 deletions(-) diff --git a/unpacked/jax/output/SVG/autoload/menclose.js b/unpacked/jax/output/SVG/autoload/menclose.js index 82e0f3e9c..0833a1aa9 100644 --- a/unpacked/jax/output/SVG/autoload/menclose.js +++ b/unpacked/jax/output/SVG/autoload/menclose.js @@ -99,7 +99,7 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { toSVG: function (HW,DD) { this.SVGgetStyles(); - var svg = this.SVG(); + var svg = this.SVG(), scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); var base = this.SVGdataStretched(0,HW,DD); @@ -107,9 +107,10 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { if (values.color && !this.mathcolor) {values.mathcolor = values.color} if (values.thickness == null) {values.thickness = ".075em"} if (values.padding == null) {values.padding = ".2em"} - var mu = this.SVGgetMu(svg), scale = this.SVGgetScale(); + var mu = this.SVGgetMu(svg); var p = SVG.length2em(values.padding,mu,1/SVG.em) * scale; // padding for enclosure - var t = SVG.length2em(values.thickness,mu,1/SVG.em); // thickness of lines (not scaled, see issue #414) + var t = SVG.length2em(values.thickness,mu,1/SVG.em); // thickness of lines + t = Math.max(1/SVG.em,t); // see issue #414 var H = base.h+p+t, D = base.d+p+t, W = base.w+2*(p+t); var dx = 0, w, h, i, m, borders = [false,false,false,false]; if (!values.mathcolor) {values.mathcolor = "black"} diff --git a/unpacked/jax/output/SVG/autoload/mmultiscripts.js b/unpacked/jax/output/SVG/autoload/mmultiscripts.js index f7914ffd3..090bc7d8c 100644 --- a/unpacked/jax/output/SVG/autoload/mmultiscripts.js +++ b/unpacked/jax/output/SVG/autoload/mmultiscripts.js @@ -32,8 +32,7 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { MML.mmultiscripts.Augment({ toSVG: function (HW,D) { this.SVGgetStyles(); - var svg = this.SVG(); this.SVGhandleSpace(svg); - var scale = this.SVGgetScale(); + var svg = this.SVG(), scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); var base = (this.data[this.base] ? this.SVGdataStretched(this.base,HW,D) : SVG.BBOX.G().Clean()); var x_height = SVG.TeX.x_height * scale, s = SVG.TeX.scriptspace * scale * .75; // FIXME: .75 can be removed when IC is right? diff --git a/unpacked/jax/output/SVG/autoload/mtable.js b/unpacked/jax/output/SVG/autoload/mtable.js index 91f3a9e55..08d8c82af 100644 --- a/unpacked/jax/output/SVG/autoload/mtable.js +++ b/unpacked/jax/output/SVG/autoload/mtable.js @@ -33,7 +33,7 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { MML.mtable.Augment({ toSVG: function (span) { this.SVGgetStyles(); - var svg = this.SVG(); + var svg = this.SVG(), scale = this.SVGgetScale(svg); if (this.data.length === 0) {this.SVGsaveData(svg);return svg} var values = this.getValues("columnalign","rowalign","columnspacing","rowspacing", "columnwidth","equalcolumns","equalrows", @@ -42,7 +42,7 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { // Handle relative width as fixed width in relation to container if (values.width.match(/%$/)) {svg.width = values.width = Math.floor(SVG.cwidth*parseFloat(values.width)/100)+"px"} - var scale = this.SVGgetScale(), mu = this.SVGgetMu(svg); + var mu = this.SVGgetMu(svg); var LABEL = -1; var H = [], D = [], W = [], A = [], C = [], i, j, J = -1, diff --git a/unpacked/jax/output/SVG/autoload/multiline.js b/unpacked/jax/output/SVG/autoload/multiline.js index 7fb753e19..b5b81683f 100644 --- a/unpacked/jax/output/SVG/autoload/multiline.js +++ b/unpacked/jax/output/SVG/autoload/multiline.js @@ -96,7 +96,7 @@ MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () { var state = { n: 0, Y: 0, - scale: this.SVGgetScale(), + scale: this.scale, isTop: isTop, values: {}, VALUES: VALUES diff --git a/unpacked/jax/output/SVG/jax.js b/unpacked/jax/output/SVG/jax.js index 38bf72a86..15af6b081 100644 --- a/unpacked/jax/output/SVG/jax.js +++ b/unpacked/jax/output/SVG/jax.js @@ -1019,8 +1019,8 @@ toSVG: function () { this.SVGgetStyles(); var variant = this.SVGgetVariant(); - var svg = this.SVG(); - svg.scale = this.SVGgetScale(); this.SVGhandleSpace(svg); + var svg = this.SVG(); this.SVGgetScale(svg); + this.SVGhandleSpace(svg); for (var i = 0, m = this.data.length; i < m; i++) { if (this.data[i]) { var child = svg.Add(this.data[i].toSVG(variant,svg.scale),svg.w,0,true); @@ -1136,7 +1136,8 @@ } } else { var space = this.texSpacing(); - if (space !== "") {svg.x += SVG.length2em(space,this.SVGgetScale())/svg.scale} + this.SVGgetScale(); + if (space !== "") {svg.x += SVG.length2em(space,this.scale)*this.mscale} } }, @@ -1259,7 +1260,8 @@ return SVG.FONTDATA.VARIANT[variant]; }, - SVGgetScale: function () { + SVGgetScale: function (svg) { + if (this.mscale) {return this.scale * this.mscale} var scale = 1, values = this.getValues("mathsize","scriptlevel","fontsize"); if ((this.styles||{}).fontSize && !values.fontsize) {values.fontsize = this.styles.fontSize} @@ -1270,8 +1272,9 @@ values.scriptminsize = SVG.length2em(this.Get("scriptminsize"))/1000; if (scale < values.scriptminsize) {scale = values.scriptminsize} } - if (this.isToken) {scale *= SVG.length2em(values.mathsize)/1000} - return scale; + this.scale = scale; this.mscale = SVG.length2em(values.mathsize)/1000; + if (svg) {svg.scale = scale; if (this.isToken) {svg.scale *= this.mscale}} + return scale * this.mscale; }, SVGgetMu: function (svg) { var mu = 1, values = this.getValues("scriptlevel","scriptsizemultiplier"); @@ -1330,7 +1333,9 @@ MML.mo.Augment({ toSVG: function (HW,D) { this.SVGgetStyles(); - var svg = this.svg = this.SVG(); this.SVGhandleSpace(svg); + var svg = this.svg = this.SVG(); + var scale = this.SVGgetScale(svg); + this.SVGhandleSpace(svg); if (this.data.length == 0) {svg.Clean(); this.SVGsaveData(svg); return svg} // // Stretch the operator, if that is requested @@ -1340,7 +1345,7 @@ // // Get the variant, and check for operator size // - var scale = svg.scale = this.SVGgetScale(), variant = this.SVGgetVariant(); + var variant = this.SVGgetVariant(); var values = this.getValues("largeop","displaystyle"); if (values.largeop) {variant = SVG.FONTDATA.VARIANT[values.displaystyle ? "-largeOp" : "-smallOp"]} @@ -1474,10 +1479,10 @@ MML.mtext.Augment({ toSVG: function () { this.SVGgetStyles(); - var svg, text, scale = this.SVGgetScale(); + var svg, text, scale; if (this.Parent().type === "merror") { + svg = this.SVG(); scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); // *** FIXME: Make color, style, scale configurable - svg = this.SVG(); this.SVGhandleSpace(svg); text = BBOX.G(); text.Add(BBOX.TEXT(.9*scale,this.data.join(""),{fill:"#C00",direction:this.Get("dir")})); svg.Add(BBOX.RECT(text.h+100,text.d+100,text.w+200,{fill:"#FF8",stroke:"#C00","stroke-width":50}),0,0); svg.Add(text,150,0); svg.H += 150; svg.D += 50; @@ -1485,7 +1490,7 @@ this.SVGsaveData(svg); return svg; } else if (SVG.config.mtextFontInherit) { - svg = this.SVG(); this.SVGhandleSpace(svg); + svg = this.SVG(); scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); var variant = this.SVGgetVariant(), def = {direction:this.Get("dir")}; if (variant.bold) {def["font-weight"] = "bold"} if (variant.italic) {def["font-style"] = "italic"} @@ -1512,10 +1517,10 @@ var values = this.getValues("height","depth","width"); values.mathbackground = this.mathbackground; if (this.background && !this.mathbackground) {values.mathbackground = this.background} - var svg = this.SVG(), mu = this.SVGgetMu(svg); - svg.h = SVG.length2em(values.height,mu) / svg.scale; - svg.d = SVG.length2em(values.depth,mu) / svg.scale; - svg.w = svg.r = SVG.length2em(values.width,mu) / svg.scale; + var svg = this.SVG(), scale = this.SVGgetScale(svg), mu = this.SVGgetMu(svg); + svg.h = SVG.length2em(values.height,mu) * scale; + svg.d = SVG.length2em(values.depth,mu) * scale; + svg.w = svg.r = SVG.length2em(values.width,mu) * scale; if (svg.w < 0) {svg.x = svg.w; svg.w = svg.r = 0} if (svg.h < -svg.d) {svg.d = -svg.h} svg.l = 0; svg.Clean(); @@ -1528,7 +1533,7 @@ MML.mphantom.Augment({ toSVG: function (HW,D) { this.SVGgetStyles(); - var svg = this.SVG(); + var svg = this.SVG(); this.SVGgetScale(svg); if (this.data[0] != null) { this.SVGhandleSpace(svg); svg.Add(this.SVGdataStretched(0,HW,D)); svg.Clean(); while (svg.element.firstChild) {svg.element.removeChild(svg.element.firstChild)} @@ -1545,7 +1550,7 @@ this.SVGgetStyles(); var svg = this.SVG(); if (this.data[0] != null) { - this.SVGhandleSpace(svg); + this.SVGgetScale(svg); this.SVGhandleSpace(svg); var pad = this.SVGdataStretched(0,HW,D), mu = this.SVGgetMu(svg); var values = this.getValues("height","depth","width","lspace","voffset"), x = 0, y = 0; if (values.lspace) {x = this.SVGlength2em(pad,values.lspace,mu)} @@ -1566,7 +1571,7 @@ if (m == null) {m = -SVG.BIGDIMEN} var match = String(length).match(/width|height|depth/); var size = (match ? svg[match[0].charAt(0)] : (d ? svg[d] : 0)); - var v = SVG.length2em(length,mu,size); + var v = SVG.length2em(length,mu,size/this.mscale)*this.mscale; if (d && String(length).match(/^\s*[-+]/)) {return Math.max(m,svg[d]+v)} else {return v} } @@ -1630,12 +1635,11 @@ MML.mfrac.Augment({ toSVG: function () { this.SVGgetStyles(); - var svg = this.SVG(); - var frac = BBOX(); this.SVGhandleSpace(frac); + var svg = this.SVG(), scale = this.SVGgetScale(svg); + var frac = BBOX(); frac.scale = svg.scale; this.SVGhandleSpace(frac); var num = this.SVGchildSVG(0), den = this.SVGchildSVG(1); var values = this.getValues("displaystyle","linethickness","numalign","denomalign","bevelled"); - var scale = svg.scale = frac.scale = this.SVGgetScale(), - isDisplay = values.displaystyle; + var isDisplay = values.displaystyle; var a = SVG.TeX.axis_height * scale; if (values.bevelled) { var delta = (isDisplay ? 400 : 150); @@ -1646,7 +1650,7 @@ frac.Add(den,num.w+bevel.w-delta,(den.d-den.h)/2+a-delta); } else { var W = Math.max(num.w,den.w); - var t = SVG.thickness2em(values.linethickness,scale), p,q, u,v; + var t = SVG.thickness2em(values.linethickness,this.scale)*this.mscale, p,q, u,v; var mt = SVG.TeX.min_rule_thickness/SVG.em * 1000; if (isDisplay) {u = SVG.TeX.num1; v = SVG.TeX.denom1} else {u = (t === 0 ? SVG.TeX.num3 : SVG.TeX.num2); v = SVG.TeX.denom2} @@ -1677,17 +1681,17 @@ // Add nulldelimiterspace around the fraction // (TeXBook pg 150 and Appendix G rule 15e) // - svg.x = svg.X = SVG.TeX.nulldelimiterspace; + svg.x = svg.X = SVG.TeX.nulldelimiterspace * this.mscale; } + this.SUPER(arguments).SVGhandleSpace.call(this,svg); } }); MML.msqrt.Augment({ toSVG: function () { this.SVGgetStyles(); - var svg = this.SVG(); this.SVGhandleSpace(svg); + var svg = this.SVG(), scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); var base = this.SVGchildSVG(0), rule, surd; - var scale = this.SVGgetScale(); var t = SVG.TeX.rule_thickness * scale, p,q, H, x = 0; if (this.Get("displaystyle")) {p = SVG.TeX.x_height * scale} else {p = t} q = Math.max(t + p/4,1000*SVG.TeX.min_root_space/SVG.em); @@ -1778,9 +1782,7 @@ if (!values.displaystyle && this.data[this.base] != null && this.data[this.base].CoreMO().Get("movablelimits")) {return MML.msubsup.prototype.toSVG.call(this)} - var svg = this.SVG(); - this.SVGhandleSpace(svg); - var scale = svg.scale = this.SVGgetScale(); + var svg = this.SVG(), scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); var boxes = [], stretch = [], box, i, m, W = -SVG.BIGDIMEN, WW = W; for (i = 0, m = this.data.length; i < m; i++) { if (this.data[i] != null) { @@ -1800,7 +1802,7 @@ if (stretch[i]) {boxes[i] = this.data[i].SVGstretchH(W)} if (boxes[i].w > WW) {WW = boxes[i].w} }} - var t = SVG.TeX.rule_thickness; + var t = SVG.TeX.rule_thickness * this.mscale; var base = boxes[this.base] || {w:0, h:0, d:0, H:0, D:0, l:0, r:0, y:0, scale:scale}; var x, y, z1, z2, z3, dw, k, delta = 0; if (base.ic) {delta = 1.3*base.ic + .05} // adjust faked IC to be more in line with expeted results @@ -1854,9 +1856,8 @@ MML.msubsup.Augment({ toSVG: function (HW,D) { this.SVGgetStyles(); - var svg = this.SVG(); - this.SVGhandleSpace(svg); - var scale = svg.scale = this.SVGgetScale(), mu = this.SVGgetMu(svg); + var svg = this.SVG(), scale = this.SVGgetScale(svg); this.SVGhandleSpace(svg); + var mu = this.SVGgetMu(svg); var base = svg.Add(this.SVGdataStretched(this.base,HW,D)); var sscale = (this.data[this.sup] || this.data[this.sub] || this).SVGgetScale(); var x_height = SVG.TeX.x_height * scale, s = SVG.TeX.scriptspace * scale; @@ -2007,11 +2008,9 @@ var svg = this.SVG(); this.SVGhandleSpace(svg); if (this.data[0] != null) { - var box = this.data[0].SVGdataStretched(0,HW,D), y = 0; - if (this.texClass === MML.TEXCLASS.VCENTER) { - // FIXME: should the axis height be scaled? - y = SVG.TeX.axis_height - (box.h+box.d)/2 + box.d; - } + var box = this.SVGdataStretched(0,HW,D), y = 0; + if (this.texClass === MML.TEXCLASS.VCENTER) + {y = SVG.TeX.axis_height - (box.h+box.d)/2 + box.d} svg.Add(box,0,y); svg.ic = box.ic; }