Skip to content

Commit ccea021

Browse files
dpvcdpvc
authored
Merge pull request #48 from mathjax/mfrac-improvements
Make mfrac use TeX layout.
2 parents ad6c2e3 + 1e45331 commit ccea021

File tree

8 files changed

+754
-40
lines changed

8 files changed

+754
-40
lines changed

‎mathjax3-ts/output/chtml/FontData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export class FontData {
197197
big_op_spacing1: .111,
198198
big_op_spacing2: .167,
199199
big_op_spacing3: .2,
200-
big_op_spacing4: .45, // .6, // better spacing for under arrows and braces
200+
big_op_spacing4: .6,
201201
big_op_spacing5: .1,
202202

203203
surd_height: .075,

‎mathjax3-ts/output/chtml/Wrapper.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ export const FONTSIZE: StringMap = {
5959
'249%': 'HG'
6060
};
6161

62+
export const SPACE: StringMap = {
63+
[LENGTHS.em(3/18)]: '1',
64+
[LENGTHS.em(4/18)]: '2',
65+
[LENGTHS.em(5/18)]: '3',
66+
};
67+
6268
/*
6369
* Needed to access node.style[id] using variable id
6470
*/
@@ -102,6 +108,8 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
102108
'mjx-box': {display: 'inline-block'},
103109
'mjx-block': {display: 'block'},
104110
'mjx-itable': {display: 'inline-table'},
111+
'mjx-row': {display: 'table-row'},
112+
'mjx-row > *': {display: 'table-cell'},
105113

106114
//
107115
// These don't have Wrapper subclasses, so add their styles here
@@ -532,7 +540,12 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
532540
*/
533541
protected handleSpace() {
534542
if (this.bbox.L) {
535-
this.chtml.setAttribute('space', (this.bbox.L * 18 - 2).toString());
543+
const space = this.em(this.bbox.L);
544+
if (SPACE[space]) {
545+
this.chtml.setAttribute('space', SPACE[space]);
546+
} else {
547+
this.chtml.style.marginLeft = space;
548+
}
536549
}
537550
}
538551

‎mathjax3-ts/output/chtml/Wrappers.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import {CHTMLmrow, CHTMLinferredMrow} from './Wrappers/mrow.js';
3030
import {CHTMLmfrac} from './Wrappers/mfrac.js';
3131
import {CHTMLmsqrt} from './Wrappers/msqrt.js';
3232
import {CHTMLmroot} from './Wrappers/mroot.js';
33+
import {CHTMLmsub, CHTMLmsup, CHTMLmsubsup} from './Wrappers/msubsup.js';
34+
import {CHTMLmover, CHTMLmunder, CHTMLmunderover} from './Wrappers/munderover.js';
3335
import {CHTMLmtable} from './Wrappers/mtable.js';
3436
import {CHTMLmtr, CHTMLmlabeledtr} from './Wrappers/mtr.js';
3537
import {CHTMLmtd} from './Wrappers/mtd.js';
@@ -47,6 +49,12 @@ export const CHTMLWrappers: {[kind: string]: typeof CHTMLWrapper} = {
4749
[CHTMLmfrac.kind]: CHTMLmfrac,
4850
[CHTMLmsqrt.kind]: CHTMLmsqrt,
4951
[CHTMLmroot.kind]: CHTMLmroot,
52+
[CHTMLmsub.kind]: CHTMLmsub,
53+
[CHTMLmsup.kind]: CHTMLmsup,
54+
[CHTMLmsubsup.kind]: CHTMLmsubsup,
55+
[CHTMLmunder.kind]: CHTMLmunder,
56+
[CHTMLmover.kind]: CHTMLmover,
57+
[CHTMLmunderover.kind]: CHTMLmunderover,
5058
[CHTMLmtable.kind]: CHTMLmtable,
5159
[CHTMLmtr.kind]: CHTMLmtr,
5260
[CHTMLmlabeledtr.kind]: CHTMLmlabeledtr,

‎mathjax3-ts/output/chtml/Wrappers/mfrac.ts‎

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,16 @@ export class CHTMLmfrac extends CHTMLWrapper {
3737
public static kind = MmlMfrac.prototype.kind;
3838

3939
public static styles: StyleList = {
40-
'mjx-strut': {
41-
display: 'inline-block',
42-
height: '1em',
43-
width: 0,
44-
'vertical-align': '-.25em'
45-
},
46-
'mjx-hstrut': {
40+
'mjx-frac': {
4741
display: 'inline-block',
48-
height: '.75em',
49-
width: 0
42+
'vertical-align': '0.17em', // axis_height - 1.5 * rule_thickness
43+
padding: '0 .22em' // nulldelimiterspace + .1 (for line's -.1em margin)
5044
},
51-
'mjx-dstrut': {
52-
display: 'inline-block',
53-
height: '.25em',
54-
width: 0,
55-
'vertical-align': '-.25em'
45+
'mjx-frac[type="d"]': {
46+
'vertical-align': '.04em' // axis_height - 3.5 * rule_thickness
5647
},
57-
58-
'mjx-frac': {
59-
display: 'inline-block',
60-
'vertical-align': '0.145em',
61-
padding: '0 .1em'
48+
'mjx-frac[delims="true"]': {
49+
padding: '0 .1em' // .1 (for line's -.1em margin)
6250
},
6351
'mjx-dtable': {
6452
display: 'inline-table',
@@ -67,6 +55,10 @@ export class CHTMLmfrac extends CHTMLWrapper {
6755
'mjx-dtable > *': {
6856
'font-size': '2000%'
6957
},
58+
'mjx-dbox': {
59+
display: 'block',
60+
'font-size': '5%'
61+
},
7062
'mjx-row': {
7163
display: 'table-row'
7264
},
@@ -78,40 +70,68 @@ export class CHTMLmfrac extends CHTMLWrapper {
7870
display: 'block',
7971
'text-align': 'center'
8072
},
81-
'mjx-dbox': {
82-
display: 'block',
83-
'font-size': '5%'
73+
74+
'mjx-den[align="right"], mjx-num[align="right"]': {
75+
align: 'right'
76+
},
77+
'mjx-den[align="left"], mjx-num[align="left"]': {
78+
align: 'left'
79+
},
80+
81+
'mjx-nstrut': {
82+
display: 'inline-block',
83+
height: '.054em', // num2 - a - 1.5t
84+
width: 0,
85+
'vertical-align': '-.054em' // ditto
86+
},
87+
'mjx-nstrut[type="d"]': {
88+
height: '.217em', // num1 - a - 3.5t
89+
'vertical-align': '-.217em', // ditto
90+
},
91+
'mjx-dstrut': {
92+
display: 'inline-block',
93+
height: '.505em', // denom2 + a - 1.5t
94+
width: 0
95+
},
96+
'mjx-dstrut[type="d"]': {
97+
height: '.726em', // denom1 + a - 3.5t
8498
},
8599

86100
'mjx-line': {
87101
display: 'block',
88102
'box-sizing': 'border-box',
89103
'min-height': '1px',
90-
height: '.06em',
91-
'border-top': '.06em solid',
92-
margin: '.06em -.1em',
104+
height: '.06em', // t = rule_thickness
105+
'border-top': '.06em solid', // t
106+
margin: '.06em -.1em', // t
93107
overflow: 'hidden'
108+
},
109+
'mjx-line[type="d"]': {
110+
margin: '.18em -.1em' // 3t
94111
}
112+
95113
};
96114

97115
/*
98116
* @override
99117
*/
100118
public toCHTML(parent: HTMLElement) {
119+
this.chtml = this.standardCHTMLnode(parent);
120+
const attr = this.node.attributes.getList('displaystyle', 'scriptlevel');
121+
const style = (attr.displaystyle && attr.scriptlevel === 0 ? {type: 'd'} : {});
122+
const fstyle = (this.node.getProperty('withDelims') ? {...style, delims: 'true'} : style);
101123
let num, den;
102-
let chtml = this.html('mjx-frac', {}, [
103-
num = this.html('mjx-num', {}, [this.html('mjx-dstrut')]),
124+
this.chtml.appendChild(this.html('mjx-frac', fstyle, [
125+
num = this.html('mjx-num', {}, [this.html('mjx-nstrut', style)]),
104126
this.html('mjx-dbox', {}, [
105127
this.html('mjx-dtable', {}, [
106-
this.html('mjx-line'),
128+
this.html('mjx-line', style),
107129
this.html('mjx-row', {}, [
108-
den = this.html('mjx-den', {}, [this.html('mjx-hstrut')])
130+
den = this.html('mjx-den', {}, [this.html('mjx-dstrut', style)])
109131
])
110132
])
111133
])
112-
]);
113-
this.chtml = parent.appendChild(chtml);
114-
this.handleScale();
134+
]));
115135
this.childNodes[0].toCHTML(num);
116136
this.childNodes[1].toCHTML(den);
117137
}
@@ -121,14 +141,16 @@ export class CHTMLmfrac extends CHTMLWrapper {
121141
*/
122142
public computeBBox(bbox: BBox) {
123143
bbox.empty();
144+
const attr = this.node.attributes.getList('displaystyle', 'scriptlevel');
145+
const display = attr.displaystyle && attr.scriptlevel === 0;
124146
const nbox = this.childNodes[0].getBBox();
125147
const dbox = this.childNodes[1].getBBox();
126-
const pad = (this.node.getProperty('withDelims') as boolean ? this.font.params.nulldelimiterspace : 0);
148+
const pad = (this.node.getProperty('withDelims') as boolean ? 0 : this.font.params.nulldelimiterspace);
127149
const a = this.font.params.axis_height;
128-
const t = this.font.params.rule_thickness;
129-
bbox.combine(nbox, pad, a + 1.5 * t + Math.max(nbox.d, .25));
130-
bbox.combine(dbox, pad, a - 1.5 * t - Math.max(dbox.h, .75));
131-
bbox.w += pad + .2;
150+
const T = (display ? 3.5 : 1.5) * this.font.params.rule_thickness;
151+
bbox.combine(nbox, 0, a + T + Math.max(nbox.d * nbox.rscale, display ? .217 : .054));
152+
bbox.combine(dbox, 0, a - T - Math.max(dbox.h * dbox.rscale, display ? .726 : .505));
153+
bbox.w += 2 * pad + .2;
132154
bbox.clean();
133155
}
134156

0 commit comments

Comments
 (0)