Replacing font of MathJax3 #2581
Comments
|
You shouldn't be generating CSS yourself, as MathJax will do that for you from the font data. I'm assuming you are going to be replacing the font data for the characters that you are taking from a new font (rather than defining a completely new MathJax font). This would require subclassing the Here is a small example that replaces <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<title>Replace Glyph in CHTML Font</title>
<script>
MathJax = {
startup: {
ready() {
//
// If you make your own component, these would be obtained
// via require() or import commands
//
const TeXFont = MathJax._.output.chtml.fonts.tex_ts.TeXFont;
const Package = MathJax._.components.package.Package;
//
// Font data, by variant and Unicode position. The array is
// height, depth, width, and additional information. Here f gives
// the font specifier (which refers to the defaultStyles and
// defaultFonts given below).
//
const chars = {
normal: {
0x41: [.73, 0, .667, {f: 'M-R'}]
},
bold: {
0x41: [.73, 0, .722, {f: 'M-B'}]
},
italic: {
0x41: [.73, 0, .667, {f: 'M-I'}]
},
};
class MyFont extends TeXFont {
constructor(options) {
super(options);
//
// Add in the characters for the substitute font defined in chars
//
for (const variant of Object.keys(chars)) {
this.defineChars(variant, chars[variant]);
}
}
}
//
// Add the font styles to select the proper fonts
//
Object.assign(MyFont.defaultStyles, {
'.TEX-M-R': {
'font-family': 'MJXZERO, MJXTEX-M-R'
},
'.TEX-M-B': {
'font-family': 'MJXZERO, MJXTEX-M-B',
},
'.TEX-M-I': {
'font-family': 'MJXZERO, MJXTEX-M-I'
}
});
//
// Add the font definitions (using local fonts, but could be web fonts)
//
Object.assign(MyFont.defaultFonts, {
'@font-face /* M-R */': {
'font-family': 'MJXTEX-M-R',
src: 'local("Arial"), local("Arial-Regular")'
},
'@font-face /* M-B */': {
'font-family': 'MJXTEX-M-B',
src: 'local("Arial Bold"), local("Arial-Bold")'
},
'@font-face /* M-I */': {
'font-family': 'MJXTEX-M-I',
src: 'local("Arial Italic"), local("Arial-italic")'
}
});
//
// Configure CommonHTML to use the new font
//
MathJax.config.chtml = {font: new MyFont({fontURL: Package.resolvePath('output/chtml/fonts/woff-v2', false)})};
MathJax.startup.defaultReady();
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
<p style="font-size: 200%">
$$ABx + {\bf AB} + {\rm AB}$$
</p>
</body>
</html>Perhaps that will get you started. We are working on adding more font support, and are developing the tools to create the data files needed, but they aren't ready for prime time yet. They should be available by Q2 next year, if all goes well. |
|
PS, characters with yMin > 0 will have negative depth, which is allowed. |
|
Thank you. I will do it like your example. |
In our project, we want to use a different font in the math expressions.
This is what we did:
this is how we get the new padding style from the glyphs
padding-top: glyph.yMax / font.unitsPerEm
padding-left: glyph.advanceWidth / font.unitsPerEm
padding-bottom: -glyph.yMin / font.unitsPerEm
padding-right: 0
So far the math expressions looks good.
But there are still some questions:
How do we get the padding-top and padding-bottom if the glyph is above the baseline (yMin > 0)?
Is there some other things that we are missing?
The text was updated successfully, but these errors were encountered: