mathjax / MathJax

Beautiful and accessible math in all browsers
http://www.mathjax.org/
Apache License 2.0
10.1k stars 1.16k forks source link

change color of formulas in v4 #3156

Open saraOrkide opened 8 months ago

saraOrkide commented 8 months ago

Some formulas look very faint in version 4, of course, in version 2.7.5, it cannot be improved. Or if I want to change the color of the formulas, I did not understand the document example mml code: `

1 r a + 1 r b + 1 r c = 1 r  

` output: Screenshot from 2024-01-04 12-27-46

dpvc commented 8 months ago

The default font in MathJax v4 is now based on the Latin Modern font rather than the Computer Modern fonts, which where what the original MathJax TeX fonts were developed from. The original fonts were produced using a program that traced around the bitmapped fonts produced from metafont for the Computer Modern definitions, and because the Windows font rendering produces somewhat thin-looking fonts, the metafont parameters were set to make them a bit darker than usual. This gave slightly bold looking fonts on Windows, and slightly thin looking fonts on the Mac.

In contrast, the Latin Modern font is already available in a modern font format (.otf), and so there is no metafont parameters involved, and so the mathjax-modern font (the default for v4) is produced from the Latin Modern .otf files directly. Latin Modern is a bit thinner than the original MathJax TeX as a result, and they look thin to you because you are used to the more bold MathJax TeX fonts.

There are three options:

  1. Wait a bit until you get used to the Latin Modern and its weight and they won't feel thin.
  2. Version 4 provides 11 different fonts, and one is based on the old MathJax TeX fonts, so you could switch to the mathjax-tex font (by adding output: {font: 'mathjax-tex'} to your configuration). Note, however, that the mathjax-modern font has far greater coverage of characters, so switching to mathjax-tex may reduce the quality of some expressions.
  3. Switch to svg output and set svg: {blacker: 15} which will stroke the outline of all the characters with a .015em line (the default is blacker: 3). Adjust the blackness to whatever works best for you. Note, however, that different browsers and operating systems may look different, so you will want to try this out on several browser/OS combinations.

As for the color, use <math display='inline' mathcolor="red"> to get the expression in red. Change the color to whatever you what it to be. You can use the mathcolor attribute on any element in the expression in case you want to have different colors within the same expression.

saraOrkide commented 7 months ago

How can I switch to svg? The fonts are very pale and have little legibility

dpvc commented 7 months ago

How can I switch to svg?

Use one of the combined components that ends in -svg.js rather than -chtml.js. You don't say how you re loading MathJax, so it is hard for me to tell you the exact one to choose.

The fonts are very pale and have little legibility

Can you provide a screen snapshot of what you are seeing?

saraOrkide commented 7 months ago

math I use mml-chtml.js version 4 font-size of root-element: 13px As you can see, the mathematical symbols that are in power are very faint The mathjax settings I use are:

MathJax = {
            options: {
                enableMenu: !1,
                menuOptions: {
                    settings: {
                        texHints: !0,
                        semantics: !1,
                        zoom: "NoZoom",
                        zscale: "200%",
                        renderer: "CHTML",
                        alt: !1,
                        cmd: !1,
                        ctrl: !1,
                        shift: !1,
                        scale: 1,
                        inTabOrder: !0,
                        assistiveMml: !0,
                        collapsible: !1,
                        explorer: !1
                    },
                    annotationTypes: {
                        TeX: ["TeX", "LaTeX", "application/x-tex"],
                        StarMath: ["StarMath 5.0"],
                        Maple: ["Maple"],
                        ContentMathML: ["MathML-Content", "application/mathml-content+xml"],
                        OpenMath: ["OpenMath"]
                    }
                }
            },
            loader: {
                load: ["[tex]/tagformat", "[tex]/mathtools", "output/chtml"]
            },
            extensions: ["mml2jax.js", "MathMenu.js", "MathZoom.js"],
            MathML: {
                extensions: ["mml3.js"]
            },
            chtml: {
                scale: 1,
                minScale: .5,
                mtextInheritFont: !0,
                merrorInheritFont: !0,
                mathmlSpacing: !1,
                skipAttributes: {},
                exFactor: .5,
                displayAlign: "center",
                displayIndent: "0",
                matchFontHeight: !0,
                adaptiveCSS: !0
            },
            linebreaks: {
                inline: !0,
                width: "100%",
                lineleading: 2,
                LinebreakVisitor: null
            },
            includeHtmlTags: {
                br: "\n",
                wbr: "",
                "#comment": ""
            },
            ignoreHtmlClass: "tex2jax_ignore",
            processHtmlClass: "tex2jax_process",
            tex: {
                inlineMath: [["$", "$"]],
                processEscapes: !1
            },
            startup: {
                ready() {
                    const t = MathJax._.input.tex.ParseMethods.default
                      , {RegExpMap: e} = MathJax._.input.tex.TokenMap;
                    new e("digit",t.digit,/[\d.٫۰-۹]/);
                    const {ChtmlMn: a} = MathJax._.output.chtml.Wrappers.mn;
                    a.prototype.remapChars = function(t) {
                        const e = [];
                        for (const a of t) {
                            const t = this.font.getRemappedChar("mn", a);
                            e.push(...t ? this.unicodeChars(t, this.variant) : [a])
                        }
                        return e
                    }
                    ;
                    const {FontData: n} = MathJax._.output.common.FontData
                      , o = n.defaultMnMap;
                    for (var s = 0; s < 10; s++)
                        o[48 + s] = String.fromCodePoint(1776 + s);
                    MathJax.startup.defaultReady()
                }
            }
        });
saraOrkide commented 7 months ago

Another question, if I use mml-svg.js, how can I display Persian numbers?

saraOrkide commented 7 months ago

I also used svg, but the same problem still exists, I can even say that it has gotten worse Screenshot from 2024-02-02 22-23-48 As you can see, sin is not readable at all

dpvc commented 7 months ago

What browser are you using, and on what OS?

saraOrkide commented 7 months ago

What browser are you using, and on what OS?

browser: chrome os: linux , windows

dpvc commented 6 months ago

See my comments in your other issues for some suggestions about these issues.