Mathjax: MathJax3 का रिप्लेसमेंट फॉन्ट

को निर्मित 14 दिस॰ 2020 · 3टिप्पणियाँ · स्रोत: mathjax/MathJax

हमारी परियोजना में, हम गणित के भावों में एक अलग फ़ॉन्ट का उपयोग करना चाहते हैं।
हमने यही किया है:

फ़ॉन्ट का आरोह और अवरोह 30 पर सेट करें
नया फॉन्ट डेटा जनरेट करें

इस प्रकार हम ग्लिफ़ से नई गद्दी शैली प्राप्त करते हैं

पैडिंग-टॉप: ग्लिफ़.मेक्स / फॉन्ट
पैडिंग-लेफ्ट: ग्लिफ़.डावेंसवीड / फॉन्ट.टुनट्सपेरिम
पैडिंग-बॉटम: -glyph.yMin / font.unitsPerEm
गद्दी-सही: 0

अब तक गणित के भाव अच्छे लगते हैं।
लेकिन अभी भी कुछ सवाल हैं:
यदि ग्लिसिन बेसलाइन (yMin> 0) से ऊपर है, तो हमें पैडिंग-टॉप और पैडिंग-बॉटम कैसे मिलेगा?
क्या कुछ और चीजें हैं जो हम गायब हैं?

Question v3

स्रोत

mt4c

सबसे उपयोगी टिप्पणी

आपको सीएसएस को स्वयं उत्पन्न नहीं करना चाहिए, क्योंकि MathJax आपके लिए फ़ॉन्ट डेटा से करेगा। मुझे लगता है कि आप उन वर्णों के लिए फ़ॉन्ट डेटा की जगह लेने जा रहे हैं जो आप एक नए फ़ॉन्ट (पूरी तरह से नए MathJax फ़ॉन्ट को परिभाषित करने के बजाय) से ले रहे हैं। इसके लिए TeXFont ऑब्जेक्ट को उपवर्गित करना होगा और अपने नए वर्णों को इसमें जोड़ना होगा, इसमें शामिल लोगों को ओवरराइड करना होगा, और फ़ॉन्ट आइडेंटिफ़ायर के लिए आवश्यक सीएसएस परिभाषाएँ जोड़ना और वेब फोंट के लिए @font-face नियम बनाना होगा। आप उपयोग कर रहे हैं।

यहां एक छोटा सा उदाहरण है जो एरियल फ़ॉन्ट (स्थानीय फ़ॉन्ट के रूप में लिया गया) से A को सामान्य, बोल्ड और इटैलिक वेरिएंट में बदलता है।

<!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>

शायद यह आपको मिल जाएगा।

हम अधिक फ़ॉन्ट समर्थन जोड़ने पर काम कर रहे हैं, और आवश्यक डेटा फ़ाइलों को बनाने के लिए उपकरण विकसित कर रहे हैं, लेकिन वे अभी तक प्राइम टाइम के लिए तैयार नहीं हैं। वे अगले वर्ष Q2 तक उपलब्ध होना चाहिए, अगर सब ठीक हो जाए।

dpvc 16 दिस॰ 2020

❤2

सभी 3 टिप्पणियाँ

<!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>

शायद यह आपको मिल जाएगा।

dpvc 16 दिस॰ 2020

❤2

PS, yMin> 0 वाले पात्रों में नकारात्मक गहराई होगी, जिसकी अनुमति है।

dpvc 16 दिस॰ 2020

धन्यवाद। मैं इसे आपके उदाहरण की तरह करूंगा।

mt4c 17 दिस॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Mathjax: MathJax3 का रिप्लेसमेंट फॉन्ट

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों