diff --git a/ts/output/chtml.ts b/ts/output/chtml.ts index 53c42901c..2e6f356a2 100644 --- a/ts/output/chtml.ts +++ b/ts/output/chtml.ts @@ -208,7 +208,7 @@ CommonOutputJax, CHTMLWrapperFactory, CH /** * @override */ - public unknownText(text: string, variant: string) { + public unknownText(text: string, variant: string, width: number = null) { const styles: StyleList = {}; const scale = 100 / this.math.metrics.scale; if (scale !== 100) { @@ -221,6 +221,16 @@ CommonOutputJax, CHTMLWrapperFactory, CH this.cssFontStyles(this.font.getCssFont(variant), styles); } } + // + // Work around Safari bug with the MJXZERO font by forcing the width. + // (If MJXZERO can be made to work with Safari, then remove width parameter + // and call to getBBox().w in TextNode.ts) + // + if (width !== null) { + const metrics = this.math.metrics; + styles.width = Math.round(width * metrics.em * metrics.scale) + 'px'; + } + // return this.html('mjx-utext', {variant: variant, style: styles}, [this.text(text)]); } @@ -231,11 +241,16 @@ CommonOutputJax, CHTMLWrapperFactory, CH * @override */ - public measureTextNode(text: N) { + public measureTextNode(textNode: N) { const adaptor = this.adaptor; - text = adaptor.clone(text); + const text = adaptor.clone(textNode); + // + // Work arround Safari bug with the MJXZERO font. + // + adaptor.setStyle(text, 'font-family', adaptor.getStyle(text, 'font-family').replace(/MJXZERO, /g, '')); + // const style = {position: 'absolute', 'white-space': 'nowrap'}; - const node = this.html('mjx-measure-text', {style}, [ text]); + const node = this.html('mjx-measure-text', {style}, [text]); adaptor.append(adaptor.parent(this.math.start.node), this.container); adaptor.append(this.container, node); let w = adaptor.nodeSize(text, this.math.metrics.em)[0] / this.math.metrics.scale; diff --git a/ts/output/chtml/Wrappers/TextNode.ts b/ts/output/chtml/Wrappers/TextNode.ts index b1a61931e..ab45d9682 100644 --- a/ts/output/chtml/Wrappers/TextNode.ts +++ b/ts/output/chtml/Wrappers/TextNode.ts @@ -70,8 +70,7 @@ CommonTextNodeMixin>(CHTMLWrapper) { const variant = this.parent.variant; const text = (this.node as TextNode).getText(); if (variant === '-explicitFont') { - const font = this.jax.getFontData(this.parent.styles); - adaptor.append(parent, this.jax.unknownText(text, variant, font)); + adaptor.append(parent, this.jax.unknownText(text, variant, this.getBBox().w)); } else { const chars = this.remappedText(text, variant); for (const n of chars) {