Comments (13)
When the overlaps problem is fixed, I will upgrade my project code to version 3
Replace the startup
block of your configuration with the following in order to resolve that issue. This allows a difference width to be used for full-width characters (both the CJK width and normal width are configurable). It also sets the monospace font for unknown characters, since we are assuming a fixed width for those characters.
startup: {
typeset: false,
ready() {
//
// Add support for wide characters to the LiteAdaptor
//
const {LiteAdaptor} = MathJax._.adaptors.liteAdaptor;
//
// The width for CJK and regular characters
//
LiteAdaptor.OPTIONS.cjkCharWidth = 1;
LiteAdaptor.OPTIONS.unknownCharWidth = .6;
LiteAdaptor.OPTIONS.unknownCharHeight = .8;
//
// Character ranges that are CJK
//
LiteAdaptor.cjkChars = new RegExp(['[',
'\u1100-\u115F', // Hangul Jamo
'\u2329\u232A', // LEFT-POINTING ANGLE BRACKET, RIGHT-POINTING ANGLE BRACKET
'\u2E80-\u303E', // CJK Radicals Supplement ... CJK Symbols and Punctuation
'\u3040-\u3247', // Hiragana ... Enclosed CJK Letters and Months
'\u3250-\u4DBF', // Enclosed CJK Letters and Months ... CJK Unified Ideographs Extension A
'\u4E00-\uA4C6', // CJK Unified Ideographs ... Yi Radicals
'\uA960-\uA97C', // Hangul Jamo Extended-A
'\uAC00-\uD7A3', // Hangul Syllables
'\uF900-\uFAFF', // CJK Compatibility Ideographs
'\uFE10-\uFE19', // Vertical Forms
'\uFE30-\uFE6B', // CJK Compatibility Forms ... Small Form Variants
'\uFF01-\uFF60\uFFE0-\uFFE6', // Halfwidth and Fullwidth Forms
'\u1B000-\u1B001', // Kana Supplement
'\u1F200-\u1F251', // Enclosed Ideographic Supplement
'\u20000-\u3FFFD', // CJK Unified Ideographs Extension B ... Tertiary Ideographic Plane
']'].join(''), 'g');
//
// Override the nodeSize() method to take wide characters into account
//
LiteAdaptor.prototype.nodeSize = function (node, em, local = null) {
const text = this.textContent(node);
const non = text.replace(LiteAdaptor.cjkChars, '').split('').length;
const CJK = text.split('').length - non;
return [
CJK * this.options.cjkCharWidth + non * this.options.unknownCharWidth,
this.options.unknownCharHeight
];
};
//
// Use monospaced font for unknown characters (since we are using fixed width values above);
//
const {TeXFont} = MathJax._.output.svg.fonts.tex_ts;
const unknown = TeXFont.defaultCssFonts;
Object.keys(unknown).forEach(font => {if (unknown[font][0] === 'serif') unknown[font][0] = 'monospace'});
//
// Do the normal ready function
//
MathJax.startup.defaultReady();
}
I will be making a pull request to include this feature in the LiteAdaptor, so this will be done automatically in the future.
from mathjax-demos-node.
Your images for MathJax 3 are missing. Can you add them in again?
Also, can you say (in words) what the issue is? The MathJax-node images look OK to me, so I'm not sure what you are considering to be "bugs".
from mathjax-demos-node.
@dpvc not missing,it's indeed black, I added the description and added a sample link
from mathjax-demos-node.
not missing,it's indeed black
It showed the "missing image" icon for me originally, but now that is not the case. Perhaps the image hadn't been fully processed when I looked. Now I see the black rectangle, as you indicate.
Questions:
- Are your version 2 images from
mathjax-node
on a server, or from within a browser? - Which demo program are you using to create your version 3 images? (e.g.,
direct/tex2svg
,component/tex2svg-page
, etc.) - Are you using any command-line options on the program you are calling?
I understand the issue for the first expression. MathJax needs font metric information about the characters that it displays. When a character is not in its fonts (like the Chinese characters you are using), MathJax doesn't know how big they are. In the browser, it can measure the width, but on the server, that is not possible, so it has to guess. As I recall mathjax-node made special arrangements to handle the width Chinese characters better. I will look into what needs to be done for MathJax 3 to do the same.
I will check into the the black image once I know how you are creating it.
from mathjax-demos-node.
yes, version 2 images is from mathjax-node
on a server.
I use command node -r esm index.js
to create version 3 images server
index.js
is modified from simple/tex2svg
in order to access the content of the server through http, here is index.js code:
var express = require('express');
var app = express();
const PACKAGES = 'base, autoload, require, ams, newcommand';
var argv = {
em: 16,
ex: 8,
width: 1280,
packages: 'base, autoload, require, ams, newcommand',
fontCache: true,
'font-cache': true,
assistiveMml: false,
'assistive-mml': false,
dist: false,
'$0': 'tex2svg'
}
require('mathjax-full').init({
options: {
enableAssistiveMml: argv.assistiveMml
},
loader: {
source: (argv.dist ? {} : require('mathjax-full/components/src/source.js').source),
load: ['adaptors/liteDOM', 'tex-svg']
},
tex: {
packages: argv.packages.replace('\*', PACKAGES).split(/\s*,\s*/)
},
svg: {
fontCache: (argv.fontCache ? 'local' : 'none')
},
startup: {
typeset: false
}
}).then((MathJax) => {
app.get('/', function (req, res) {
var yourMath = req.query.latex;
MathJax.tex2svgPromise(yourMath || '', {
display: !argv.inline,
em: argv.em,
ex: argv.ex,
containerWidth: argv.width
}).then((node) => {
res.setHeader('Content-Type', 'image/svg+xml');
res.setHeader('Cache-Control', 'max-age=31536000');
res.status(200);
const adaptor = MathJax.startup.adaptor;
res.send(adaptor.outerHTML(node.children[0]));
});
});
}).catch(err => console.log(err));
app.listen(6788, function () {
console.log('app listening on port 6788!');
});
afternode -r esm index.js
, request the url with a parameter of latex. In addition,passing latex via url requires url-encoding.
http://localhost:6788/?latex=%0A%5Cbegin%7Barray%7D%20%7B%7Cc%7Cc%7Cc%7C%7D%0A%5Chline%0A%5Ctext%7B11%7D%20%26%20%5Ctext%7B12%7D%20%26%20%5Ctext%7B13%7D%20%5C%5C%0A%5Chline%20%0A%5Ctext%7B21%7D%20%26%20%5Ctext%7B22%7D%20%26%20%5Ctext%7B23%7D%20%5C%5C%0A%5Chline%20%0A%5Ctext%7B31%7D%20%26%20%5Ctext%7B32%7D%20%26%20%5Ctext%7B33%7D%20%5C%5C%0A%5Chline%20%20%0A%5Cend%7Barray%7D%0A
from mathjax-demos-node.
Thanks for the additional information. Are you using the CSS that the SVG output generates in addition to the SVG element itself? That has some important settings, including some control over the lines for arrays. I suspect that you have not included that, which would account for the black rectangle (without the CSS, the outer frame for the array would end up being filled with the default color, which is black).
from mathjax-demos-node.
After your reminder, I located the error
Try this command
node -r esm simple/tex2svg "\begin{array} {|c|c|c|}\hline \text{11} & \text{12} & \text{13} \\ \hline \text{21} & \text{22} & \text{23} \\ \text{31} & \text{32} &\text{33} \\ \hline \end{array}"
it's give an error Misplaced \hline
from mathjax-demos-node.
Version 2 only return SVG element, so it can work.
Version 2 also used CSS, but version 3 uses it in more places, so you probably never ran into the situations where it was needed in v2.
Now version 3 requires css, img cannot load a data with css, do you have any ideas?
Well, you are allowed to include <style>
elements within an SVG image, so you could insert the styles needed into the SVG itself. I have distilled down the declarations that you may need, and suggest that you include
const CSS = [
'a{fill:blue;stroke:blue}',
'[data-mml-node="merror"]>g{fill:red;stroke:red}',
'[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}',
'[data-frame],[data-line]{stroke-width:70px;fill:none}',
'.mjx-dashed{stroke-dasharray:140}',
'.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}',
'path{stroke-width:3px}'
].join('');
after defining PACKAGES
, and then replace
res.send(adaptor.outerHTML(node.children[0]));
with
res.send(adaptor.innerHTML(node).replace(/<defs>/, '<defs><style>' + CSS + '</style>'));
This will insert the needed CSS into your SVG image.
I directly use the img tag to load the svg generated by the server, like this:
<img src="mathjax-node.mydomain.con/?latex=x^2">
I would point out, however, that while this will insert the SVG into the page, it will not get the vertical positioning correct when the math includes anything below the baseline. So the results will not work well for in-line math, as the baseline will be out of place.
from mathjax-demos-node.
Try this command ...
It works fine for me. Perhaps it has to do with the operating system and command shell that you are using. It may be that " ... \\ ... "
is used to escape a backslash and that you are only getting ... \ ...
in the string that is actually passed to tex2svg
. Try doubling those backslashes.
from mathjax-demos-node.
I will follow your advice on css. And it works when I doubling those backslashes.
Very very thank you for your meticulous advice.
from mathjax-demos-node.
When I added css according to your suggestion, the black disappeared and it can be displayed normally now.
In the command line, I replaced "
with '
, it works too. The black rectangle problem is completely solved. Thank you again.
When the overlaps problem is fixed, I will upgrade my project code to version 3
from mathjax-demos-node.
I would point out, however, that while this will insert the SVG into the page, it will not get the vertical positioning correct when the math includes anything below the baseline. So the results will not work well for in-line math, as the baseline will be out of place.
well , Thank you for your reminder, If you don’t remind me, I haven’t noticed the difference. But using the img tag to load the svg directly is more flexible for me .
<img src="mathjax.mydomain.con/?latex=x^2">
In addition , I know that https://www.zhihu.com/ also uses this method to load svg generated by MathJax-node. Zhihu has many users in China, which is equivalent to Quora abroad.
from mathjax-demos-node.
This has been included in version 3.1.4, so I am closing the issue.
from mathjax-demos-node.
Related Issues (20)
- How can I load my external package by mathjax-full v3.0.5 in Node Env HOT 2
- tex2svg-page: global svg cache not rendering in safari HOT 2
- simple/tex2mml-page HOT 3
- Chrome language preference affects chtml output HOT 4
- How to use mathjax tex2svg-page without separate components? HOT 1
- Rendering Multiple Pages HOT 4
- MathML symbols are not converted correctly HOT 3
- 'No version information available...' messages output when using simple/tex2chtml.js HOT 2
- why mathjax in node 16, after init , mathjax is null HOT 1
- Numbers without text don't render when using tex2svg HOT 3
- Using MathJax node in an ES module HOT 2
- Cannot process german umlaute when using demo example tex2svg-page HOT 2
- v4 beta 2 fails to find (dynamic parts of the) default font HOT 2
- Force MathJax to try to render the equation even though there are syntax errors (and ideally: to automatically fix the errors it self) HOT 8
- SVG output not showing in XHTML HOT 21
- Many demos fail to run on Node version 21 with "Function.prototype.apply was called on undefined" errors HOT 8
- Unable to add contextual menus when using component/tex2svg-page HOT 3
- let wrapper = MathJax.tex2svg('y', {display: true}); 字符y获取到的svg,右上角缺少 HOT 4
- tex2mml-page with inlineMath HOT 2
- text2svg cannot fully show formula HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mathjax-demos-node.