Add support for delimiters that are specific to a mathvariant and use it for mhchem arrows. (mathjax/MathJax#3486)

ts/input/tex/ams/AmsMethods.ts

@@ -41,6 +41,7 @@ import {
   AbstractMmlTokenNode,
 } from '../../../core/MmlTree/MmlNode.js';
 import { NewcommandUtil } from '../newcommand/NewcommandUtil.js';
+import { OptionList } from '../../../util/Options.js';
 
 /**
  * Utility for breaking the \sideset scripts from any other material.
@@ -541,14 +542,16 @@ export const AmsMethods: { [key: string]: ParseMethod } = {
    * @param {number} l Left width.
    * @param {number} r Right width.
    * @param {number} m Min width
+   * @param {string} variant The variant for the arrow
    */
   xArrow(
     parser: TexParser,
     name: string,
     chr: number,
     l: number,
     r: number,
-    m: number = 0
+    m: number = 0,
+    variant: string = ''
   ) {
     const def = {
       width: '+' + UnitUtil.em((l + r) / 18),
@@ -557,12 +560,14 @@ export const AmsMethods: { [key: string]: ParseMethod } = {
     const bot = parser.GetBrackets(name);
     const first = parser.ParseArg(name);
     const dstrut = parser.create('node', 'mspace', [], { depth: '.2em' });
-    let arrow = parser.create(
-      'token',
-      'mo',
-      { stretchy: true, texClass: TEXCLASS.ORD }, // REL is applied in a TeXAtom below
-      String.fromCodePoint(chr)
-    );
+    const attrs: OptionList = {
+      stretchy: true,
+      texClass: TEXCLASS.ORD, // REL is applied in a TeXAtom below
+    };
+    if (variant) {
+      attrs.mathvariant = variant;
+    }
+    let arrow = parser.create('token', 'mo', attrs, String.fromCodePoint(chr));
     if (m) {
       arrow.attributes.set('minsize', UnitUtil.em(m));
     }

ts/input/tex/mhchem/MhchemConfiguration.ts

@@ -33,6 +33,11 @@ import { AmsMethods } from '../ams/AmsMethods.js';
 import { mhchemParser } from '#mhchem/mhchemParser.js';
 import { TEXCLASS } from '../../../core/MmlTree/MmlNode.js';
 
+/**
+ * The variant to use for mhchem arrows and bonds
+ */
+export const MHCHEM = '-mhchem';
+
 /**
  * Creates mo token elements with the proper attributes
  */
@@ -41,7 +46,7 @@ export const MhchemUtils = {
     const def = {
       stretchy: true,
       texClass: TEXCLASS.REL,
-      mathvariant: '-mhchem',
+      mathvariant: MHCHEM,
       ...(mchar.attributes || {}),
     };
     const node = parser.create('token', 'mo', def, mchar.char);
@@ -121,13 +126,13 @@ export const MhchemMethods: { [key: string]: ParseMethod } = {
 const mhchemMacros = new CommandMap('mhchem', {
   ce: [MhchemMethods.Machine, 'ce'],
   pu: [MhchemMethods.Machine, 'pu'],
-  mhchemxrightarrow: [MhchemMethods.xArrow, 0xe429, 5, 9],
-  mhchemxleftarrow: [MhchemMethods.xArrow, 0xe428, 9, 5],
-  mhchemxleftrightarrow: [MhchemMethods.xArrow, 0xe42a, 9, 9],
-  mhchemxleftrightarrows: [MhchemMethods.xArrow, 0xe42b, 9, 9],
-  mhchemxrightleftharpoons: [MhchemMethods.xArrow, 0xe408, 5, 9],
-  mhchemxRightleftharpoons: [MhchemMethods.xArrow, 0xe409, 5, 9],
-  mhchemxLeftrightharpoons: [MhchemMethods.xArrow, 0xe40a, 9, 11],
+  mhchemxleftarrow: [MhchemMethods.xArrow, 0x27f5, 9, 5, 0, MHCHEM],
+  mhchemxrightarrow: [MhchemMethods.xArrow, 0x27f6, 5, 9, 0, MHCHEM],
+  mhchemxleftrightarrow: [MhchemMethods.xArrow, 0x27f7, 9, 9, 0, MHCHEM],
+  mhchemxleftrightarrows: [MhchemMethods.xArrow, 0x21c4, 9, 9, 0, MHCHEM],
+  mhchemxrightleftharpoons: [MhchemMethods.xArrow, 0x21cc, 5, 9, 0, MHCHEM],
+  mhchemxRightleftharpoons: [MhchemMethods.xArrow, 0x1f8d2, 5, 9, 0, MHCHEM],
+  mhchemxLeftrightharpoons: [MhchemMethods.xArrow, 0x1f8d3, 9, 11, 0, MHCHEM],
 });
 
 /**
@@ -138,16 +143,16 @@ const mhchemChars = new CharacterMap('mhchem-chars', MhchemUtils.relmo, {
   mhchemBondTD: ['\uE411', { stretchy: false }],
   mhchemBondTDD: ['\uE412', { stretchy: false }],
   mhchemBondDTD: ['\uE413', { stretchy: false }],
-  mhchemlongleftarrow: '\uE428',
-  mhchemlongrightarrow: '\uE429',
-  mhchemlongleftrightarrow: '\uE42A',
-  mhchemlongrightleftharpoons: '\uE408',
-  mhchemlongRightleftharpoons: '\uE409',
-  mhchemlongLeftrightharpoons: '\uE40A',
-  mhchemlongleftrightarrows: '\uE42B',
-  mhchemrightarrow: '\uE42D',
-  mhchemleftarrow: '\uE42C',
-  mhchemleftrightarrow: '\uE42E',
+  mhchemlongleftarrow: '\u27F5',
+  mhchemlongrightarrow: '\u27F6',
+  mhchemlongleftrightarrow: '\u27F7',
+  mhchemlongrightleftharpoons: '\u21CC',
+  mhchemlongRightleftharpoons: '\u{1F8D2}',
+  mhchemlongLeftrightharpoons: '\u{1F8D3}',
+  mhchemlongleftrightarrows: '\u21C4',
+  mhchemrightarrow: '\u2192',
+  mhchemleftarrow: '\u2190',
+  mhchemleftrightarrow: '\u2194',
 });
 
 /**

ts/output/chtml/FontData.ts

@@ -64,7 +64,10 @@ export type ChtmlCharData = CharDataArray<ChtmlCharOptions>;
 /**
  * The extra data needed for a Variant in CHTML output
  */
-export interface ChtmlVariantData extends VariantData<ChtmlCharOptions> {
+export interface ChtmlVariantData extends VariantData<
+  ChtmlCharOptions,
+  ChtmlDelimiterData
+> {
   letter: string; // the font letter(s) for the default font for this variant
 }
 
@@ -141,7 +144,7 @@ export class ChtmlFontData extends FontData<
   /**
    * Data about the delimiters used (for adpative CSS)
    */
-  public delimUsage: Usage<number> = new Usage<number>();
+  public delimUsage: Usage<[number, string]> = new Usage<[number, string]>();
 
   /**
    * New styles since last update
@@ -354,8 +357,8 @@ export class ChtmlFontData extends FontData<
    * @returns {StyleJson}        The modified style list.
    */
   public updateStyles(styles: StyleJson): StyleJson {
-    for (const N of this.delimUsage.update()) {
-      this.addDelimiterStyles(styles, N, this.getDelimiter(N));
+    for (const [N, v] of this.delimUsage.update()) {
+      this.addDelimiterStyles(styles, N, this.getDelimiter(N, v));
     }
     for (const [name, N] of this.charUsage.update()) {
       const variant = this.variant[name];
@@ -440,7 +443,7 @@ export class ChtmlFontData extends FontData<
   ) {
     const HDW = data.HDW as ChtmlCharData;
     const [beg, ext, end, mid] = data.stretch;
-    const [begV, extV, endV, midV] = this.getStretchVariants(n);
+    const [begV, extV, endV, midV] = this.getStretchVariants(n, data.v);
     const Hb = this.addDelimiterVPart(styles, c, 'beg', beg, begV, HDW);
     this.addDelimiterVPart(styles, c, 'ext', ext, extV, HDW);
     const He = this.addDelimiterVPart(styles, c, 'end', end, endV, HDW);
@@ -524,7 +527,7 @@ export class ChtmlFontData extends FontData<
   ) {
     const HDW = [...data.HDW] as ChtmlCharData;
     const [beg, ext, end, mid] = data.stretch;
-    const [begV, extV, endV, midV] = this.getStretchVariants(n);
+    const [begV, extV, endV, midV] = this.getStretchVariants(n, data.v);
     if (data.hd && !this.options.mathmlSpacing) {
       //
       // Interpolate between full character height/depth and that of the extender,

ts/output/chtml/Wrappers/mo.ts

@@ -247,11 +247,11 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
      */
     protected stretchHTML(chtml: N[]) {
       const c = this.getText().codePointAt(0);
-      this.font.delimUsage.add(c);
+      this.font.delimUsage.add([c, this.variant]);
       this.childNodes[0].markUsed();
       const delim = this.stretch;
       const stretch = delim.stretch;
-      const stretchv = this.font.getStretchVariants(c);
+      const stretchv = this.font.getStretchVariants(c, this.variant);
       const dom: N[] = [];
 
       //

ts/output/common.ts

@@ -109,7 +109,7 @@ export abstract class CommonOutputJax<
     WW, WF, WC, CC, VV, DD, FD, FC
   >,
   CC extends CharOptions,
-  VV extends VariantData<CC>,
+  VV extends VariantData<CC, DD>,
   DD extends DelimiterData,
   FD extends FontData<CC, VV, DD>,
   FC extends FontDataClass<CC, VV, DD>,
@@ -189,7 +189,7 @@ export abstract class CommonOutputJax<
    */
   public static genericFont: FontDataClass<
     CharOptions,
-    VariantData<CharOptions>,
+    VariantData<CharOptions, DelimiterData>,
     DelimiterData
   >;