Skip to content

Make mfrac use TeX layout. #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dpvc merged 9 commits into from
Dec 6, 2017
Merged

Make mfrac use TeX layout. #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7ffb8b1
Make fractions conform to TeX spacing, for all styles (display, text,…
dpvc Sep 20, 2017
11b0571
Add support for mub/msup/msubsup
dpvc Sep 20, 2017
ffeb86b
Add support for munder/mover/munderover
dpvc Sep 21, 2017
3319e71
Fixes requested by Volker
dpvc Oct 28, 2017
1a6e668
Changes requested by Volker.
dpvc Oct 28, 2017
c3d0b86
Updates per Volker's request.
dpvc Oct 28, 2017
9a594b6
Fix typo in comment.
dpvc Oct 28, 2017
9e9b319
Merge pull request #50 from mathjax/munderover-support
dpvc Dec 6, 2017
1e45331
Merge pull request #49 from mathjax/msubsup-support
dpvc Dec 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion mathjax3-ts/output/chtml/FontData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export class FontData {
big_op_spacing1: .111,
big_op_spacing2: .167,
big_op_spacing3: .2,
big_op_spacing4: .45, // .6, // better spacing for under arrows and braces
big_op_spacing4: .6,
big_op_spacing5: .1,

surd_height: .075,
Expand Down
15 changes: 14 additions & 1 deletion mathjax3-ts/output/chtml/Wrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ export const FONTSIZE: StringMap = {
'249%': 'HG'
};

export const SPACE: StringMap = {
[LENGTHS.em(3/18)]: '1',
[LENGTHS.em(4/18)]: '2',
[LENGTHS.em(5/18)]: '3',
};

/*
* Needed to access node.style[id] using variable id
*/
Expand Down Expand Up @@ -102,6 +108,8 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
'mjx-box': {display: 'inline-block'},
'mjx-block': {display: 'block'},
'mjx-itable': {display: 'inline-table'},
'mjx-row': {display: 'table-row'},
'mjx-row > *': {display: 'table-cell'},

//
// These don't have Wrapper subclasses, so add their styles here
Expand Down Expand Up @@ -532,7 +540,12 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
*/
protected handleSpace() {
if (this.bbox.L) {
this.chtml.setAttribute('space', (this.bbox.L * 18 - 2).toString());
const space = this.em(this.bbox.L);
if (SPACE[space]) {
this.chtml.setAttribute('space', SPACE[space]);
} else {
this.chtml.style.marginLeft = space;
}
}
}

Expand Down
8 changes: 8 additions & 0 deletions mathjax3-ts/output/chtml/Wrappers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import {CHTMLmrow, CHTMLinferredMrow} from './Wrappers/mrow.js';
import {CHTMLmfrac} from './Wrappers/mfrac.js';
import {CHTMLmsqrt} from './Wrappers/msqrt.js';
import {CHTMLmroot} from './Wrappers/mroot.js';
import {CHTMLmsub, CHTMLmsup, CHTMLmsubsup} from './Wrappers/msubsup.js';
import {CHTMLmover, CHTMLmunder, CHTMLmunderover} from './Wrappers/munderover.js';
import {CHTMLmtable} from './Wrappers/mtable.js';
import {CHTMLmtr, CHTMLmlabeledtr} from './Wrappers/mtr.js';
import {CHTMLmtd} from './Wrappers/mtd.js';
Expand All @@ -47,6 +49,12 @@ export const CHTMLWrappers: {[kind: string]: typeof CHTMLWrapper} = {
[CHTMLmfrac.kind]: CHTMLmfrac,
[CHTMLmsqrt.kind]: CHTMLmsqrt,
[CHTMLmroot.kind]: CHTMLmroot,
[CHTMLmsub.kind]: CHTMLmsub,
[CHTMLmsup.kind]: CHTMLmsup,
[CHTMLmsubsup.kind]: CHTMLmsubsup,
[CHTMLmunder.kind]: CHTMLmunder,
[CHTMLmover.kind]: CHTMLmover,
[CHTMLmunderover.kind]: CHTMLmunderover,
[CHTMLmtable.kind]: CHTMLmtable,
[CHTMLmtr.kind]: CHTMLmtr,
[CHTMLmlabeledtr.kind]: CHTMLmlabeledtr,
Expand Down
96 changes: 59 additions & 37 deletions mathjax3-ts/output/chtml/Wrappers/mfrac.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,28 +37,16 @@ export class CHTMLmfrac extends CHTMLWrapper {
public static kind = MmlMfrac.prototype.kind;

public static styles: StyleList = {
'mjx-strut': {
display: 'inline-block',
height: '1em',
width: 0,
'vertical-align': '-.25em'
},
'mjx-hstrut': {
'mjx-frac': {
display: 'inline-block',
height: '.75em',
width: 0
'vertical-align': '0.17em', // axis_height - 1.5 * rule_thickness
padding: '0 .22em' // nulldelimiterspace + .1 (for line's -.1em margin)
},
'mjx-dstrut': {
display: 'inline-block',
height: '.25em',
width: 0,
'vertical-align': '-.25em'
'mjx-frac[type="d"]': {
'vertical-align': '.04em' // axis_height - 3.5 * rule_thickness
},

'mjx-frac': {
display: 'inline-block',
'vertical-align': '0.145em',
padding: '0 .1em'
'mjx-frac[delims="true"]': {
padding: '0 .1em' // .1 (for line's -.1em margin)
},
'mjx-dtable': {
display: 'inline-table',
Expand All @@ -67,6 +55,10 @@ export class CHTMLmfrac extends CHTMLWrapper {
'mjx-dtable > *': {
'font-size': '2000%'
},
'mjx-dbox': {
display: 'block',
'font-size': '5%'
},
'mjx-row': {
display: 'table-row'
},
Expand All @@ -78,40 +70,68 @@ export class CHTMLmfrac extends CHTMLWrapper {
display: 'block',
'text-align': 'center'
},
'mjx-dbox': {
display: 'block',
'font-size': '5%'

'mjx-den[align="right"], mjx-num[align="right"]': {
align: 'right'
},
'mjx-den[align="left"], mjx-num[align="left"]': {
align: 'left'
},

'mjx-nstrut': {
display: 'inline-block',
height: '.054em', // num2 - a - 1.5t
width: 0,
'vertical-align': '-.054em' // ditto
},
'mjx-nstrut[type="d"]': {
height: '.217em', // num1 - a - 3.5t
'vertical-align': '-.217em', // ditto
},
'mjx-dstrut': {
display: 'inline-block',
height: '.505em', // denom2 + a - 1.5t
width: 0
},
'mjx-dstrut[type="d"]': {
height: '.726em', // denom1 + a - 3.5t
},

'mjx-line': {
display: 'block',
'box-sizing': 'border-box',
'min-height': '1px',
height: '.06em',
'border-top': '.06em solid',
margin: '.06em -.1em',
height: '.06em', // t = rule_thickness
'border-top': '.06em solid', // t
margin: '.06em -.1em', // t
overflow: 'hidden'
},
'mjx-line[type="d"]': {
margin: '.18em -.1em' // 3t
}

};

/*
* @override
*/
public toCHTML(parent: HTMLElement) {
this.chtml = this.standardCHTMLnode(parent);
Copy link
Member

@zorkow zorkow Oct 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am a bit confused what the difference between chtml and CHTML is.

Copy link
Member Author

@dpvc dpvc Oct 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CHTML is my shorthand for CommonHTML. toCHTML() is the function that creates the CommonHTML version of the internal MathML nodes (as a tree of HTML elements). this.chtml is a cached pointer to the subtree for this (wrapped) internal MathML node.

const attr = this.node.attributes.getList('displaystyle', 'scriptlevel');
const style = (attr.displaystyle && attr.scriptlevel === 0 ? {type: 'd'} : {});
const fstyle = (this.node.getProperty('withDelims') ? {...style, delims: 'true'} : style);
let num, den;
let chtml = this.html('mjx-frac', {}, [
num = this.html('mjx-num', {}, [this.html('mjx-dstrut')]),
this.chtml.appendChild(this.html('mjx-frac', fstyle, [
num = this.html('mjx-num', {}, [this.html('mjx-nstrut', style)]),
this.html('mjx-dbox', {}, [
this.html('mjx-dtable', {}, [
this.html('mjx-line'),
this.html('mjx-line', style),
this.html('mjx-row', {}, [
den = this.html('mjx-den', {}, [this.html('mjx-hstrut')])
den = this.html('mjx-den', {}, [this.html('mjx-dstrut', style)])
])
])
])
]);
this.chtml = parent.appendChild(chtml);
this.handleScale();
]));
this.childNodes[0].toCHTML(num);
this.childNodes[1].toCHTML(den);
}
Expand All @@ -121,14 +141,16 @@ export class CHTMLmfrac extends CHTMLWrapper {
*/
public computeBBox(bbox: BBox) {
bbox.empty();
const attr = this.node.attributes.getList('displaystyle', 'scriptlevel');
const display = attr.displaystyle && attr.scriptlevel === 0;
const nbox = this.childNodes[0].getBBox();
const dbox = this.childNodes[1].getBBox();
const pad = (this.node.getProperty('withDelims') as boolean ? this.font.params.nulldelimiterspace : 0);
const pad = (this.node.getProperty('withDelims') as boolean ? 0 : this.font.params.nulldelimiterspace);
const a = this.font.params.axis_height;
const t = this.font.params.rule_thickness;
bbox.combine(nbox, pad, a + 1.5 * t + Math.max(nbox.d, .25));
bbox.combine(dbox, pad, a - 1.5 * t - Math.max(dbox.h, .75));
bbox.w += pad + .2;
const T = (display ? 3.5 : 1.5) * this.font.params.rule_thickness;
bbox.combine(nbox, 0, a + T + Math.max(nbox.d * nbox.rscale, display ? .217 : .054));
bbox.combine(dbox, 0, a - T - Math.max(dbox.h * dbox.rscale, display ? .726 : .505));
bbox.w += 2 * pad + .2;
bbox.clean();
}

Expand Down
Loading