Use LaTeX fonts for math symbols in circuit diagrams (#2327)

Circuit rendering now appears as per the below in VS Code (and have
tested in JupyterLabs in both Safari and Edge browsers, and in light and
dark themes).

<img width="596" alt="image"
src="https://github.com/user-attachments/assets/955d0304-9107-41a0-a874-765447c914a9"
/>

Author: billti

npm/qsharp/src/shared/legacyCircuitUpdate.ts

@@ -189,6 +189,7 @@ function isCircuit(circuit: any): circuit is Circuit {
  */
 function getKetLabel(ket: string): string {
   // Check that the ket conforms to the format |{label}> or |{label}⟩
+  // Be overly permissive with the ket format, allowing for various closing characters
   const ketRegex = /^\|([^\s〉⟩〉>]+)(?:[〉⟩〉>])$/;
 
   // Match the ket string against the regex

npm/qsharp/ux/circuit-vis/formatters/formatUtils.ts

@@ -146,12 +146,12 @@ export const text = (
   x: number,
   y: number,
   fs: number = labelFontSize,
-): SVGElement => {
-  const el: SVGElement = createSvgElement("text", {
+): SVGTextElement => {
+  const el = createSvgElement("text", {
     "font-size": fs.toString(),
     x: x.toString(),
     y: y.toString(),
-  });
+  }) as SVGTextElement;
   el.textContent = text;
   return el;
 };

npm/qsharp/ux/circuit-vis/formatters/gateFormatter.ts

@@ -26,6 +26,8 @@ import {
   dashedBox,
 } from "./formatUtils";
 
+import { mathChars } from "../utils";
+
 /**
  * Given an array of operations render data, return the SVG representation.
  *
@@ -234,6 +236,31 @@ const _measure = (x: number, y: number): SVGElement => {
   return group([mBox, mArc, meter]);
 };
 
+const use_katex = true;
+
+function _style_gate_text(gate: SVGTextElement) {
+  if (!use_katex) return;
+  let label = gate.textContent || "";
+
+  // In general, use the regular math font
+  gate.classList.add("qs-maintext");
+
+  // Wrap any latin or greek letters in tspan with KaTeX_Math font
+  // Style the entire Greek + Coptic block (https://unicodeplus.com/block/0370)
+  // Note this deliberately leaves ASCII digits [0-9] non-italic
+  const italicChars = /[a-zA-Z\u{0370}-\u{03ff}]+/gu;
+
+  label = label.replace(italicChars, `<tspan class='qs-mathtext'>$&</tspan>`);
+
+  // Replace a trailing ' with the proper unicode dagger symbol
+  label = label.replace(
+    /'$/,
+    `<tspan dx="2" dy="-3" style="font-size: 0.8em;">${mathChars.dagger}</tspan>`,
+  );
+
+  gate.innerHTML = label;
+}
+
 /**
  * Creates the SVG for a unitary gate on an arbitrary number of qubits.
  *
@@ -311,12 +338,15 @@ const _unitaryBox = (
     uBox.setAttribute("class", cssClass);
   }
   const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
-  const labelText: SVGElement = text(label, x, labelY);
+  const labelText = text(label, x, labelY);
+  _style_gate_text(labelText);
+
   const elems = [uBox, labelText];
   if (displayArgs != null) {
     const argStrY = y + height / 2 + 8;
 
-    const argButton: SVGElement = text(displayArgs, x, argStrY, argsFontSize);
+    const argButton = text(displayArgs, x, argStrY, argsFontSize);
+    _style_gate_text(argButton);
     argButton.setAttribute("class", "arg-button");
     elems.push(argButton);
   }
@@ -369,15 +399,15 @@ const _x = (renderData: GateRenderData): SVGElement => {
 const _ket = (label: string, renderData: GateRenderData): SVGElement => {
   const { x, targetsY, width } = renderData;
   const gate = _unitary(
-    `|${label}〉`,
+    `|${label}${mathChars.rangle}`,
     x,
     targetsY as number[][],
     width,
     undefined,
     false,
     "gate-ket",
   );
-  gate.querySelector("text")!.setAttribute("class", "ket-text");
+  gate.querySelector("text")!.classList.add("ket-text");
   return gate;
 };
 

npm/qsharp/ux/circuit-vis/formatters/inputFormatter.ts

@@ -10,6 +10,7 @@ import {
   classicalRegHeight,
 } from "../constants";
 import { group, text } from "./formatUtils";
+import { mathChars } from "../utils";
 
 /**
  * `formatInputs` takes in an array of Qubits and outputs the SVG string of formatted
@@ -71,38 +72,15 @@ const formatInputs = (
 const _qubitInput = (y: number, subscript?: string): SVGElement => {
   const el: SVGElement = text("", leftPadding, y, 16);
 
-  // Create the main text node
-  const mainText = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "tspan",
-  );
-  mainText.textContent = "|𝜓";
+  const subtext = subscript
+    ? `<tspan baseline-shift="sub" font-size="65%">${subscript}</tspan>`
+    : "";
 
-  // Create the subscript node if provided
-  if (subscript) {
-    const subscriptText = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "tspan",
-    );
-    subscriptText.textContent = subscript;
-    subscriptText.setAttribute("baseline-shift", "sub");
-    subscriptText.setAttribute("font-size", "65%");
-    mainText.appendChild(subscriptText);
-  }
-
-  // Add the closing part of the text
-  const closingText = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "tspan",
-  );
-  closingText.textContent = "⟩";
-
-  // Append all parts to the main SVG text element
-  el.appendChild(mainText);
-  el.appendChild(closingText);
+  el.innerHTML = `|<tspan class="qs-mathtext">${mathChars.psi}</tspan>${subtext}${mathChars.rangle}</tspan>`;
 
   el.setAttribute("text-anchor", "start");
   el.setAttribute("dominant-baseline", "middle");
+  el.classList.add("qs-maintext");
   return el;
 };
 

npm/qsharp/ux/circuit-vis/gateRenderData.ts

@@ -15,7 +15,7 @@ export enum GateType {
   Swap,
   /** X gate. */
   X,
-  /** |0〉 or |1〉 gate. */
+  /** |0⟩or |1⟩ gate. */
   Ket,
   /** Single/multi qubit unitary gate. */
   Unitary,

npm/qsharp/ux/circuit-vis/utils.ts

@@ -365,6 +365,19 @@ const getGateElems = (container: HTMLElement): SVGGraphicsElement[] => {
     : [];
 };
 
+// Non-ASCII chars are fraught with danger. Copy/paste these when possible.
+// Use the following regex in VS Code to find invalid unicode chars
+// [^\x20-\x7e\u{03b8}-\u{03c8}\u{2020}\u{27e8}\u{27e9}]
+
+const mathChars = {
+  theta: "θ", // \u{03b8}
+  pi: "π", // \u{03c0}
+  psi: "ψ", // \u{03c8}
+  dagger: "†", // \u{2020}
+  langle: "⟨", // \u{27e8}
+  rangle: "⟩", // \u{27e9}
+};
+
 export {
   createUUID,
   getGateWidth,
@@ -380,4 +393,5 @@ export {
   getToolboxElems,
   getHostElems,
   getGateElems,
+  mathChars,
 };

npm/qsharp/ux/qsharp-circuit.css

@@ -40,7 +40,23 @@
     fill: var(--main-color);
     dominant-baseline: middle;
     text-anchor: middle;
-    font-family: Arial;
+  }
+
+  /* When run in VS Code, the "KaTeX_Main" and "KaTeX_Math" fonts are already present */
+  /* When run in Jupyter in the browser, the MJX* (MathJax) fonts are used and present */
+  .qs-maintext {
+    font-family: "KaTeX_Main", "MJXZERO", "MJXTEX", sans-serif;
+    font-style: normal;
+  }
+
+  .qs-mathtext {
+    font-family: "KaTeX_Math", "MJXZERO", "MJXTEX-I", serif;
+  }
+
+  /* The math font used in KaTex (thus in VS Code) needs italic applied also, whereas
+   the font used in MathJax (thus Jupyter web) doesn't. So apply if in VS Code  */
+  [data-vscode-theme-kind] .qs-mathtext {
+    font-style: italic;
   }
 
   /* Background for gates */
@@ -59,6 +75,7 @@
     text-decoration: none;
     cursor: default;
     pointer-events: none;
+    word-spacing: -0.2em;
   }
 
   /* Edit mode style for arg-button (hyperlink appearance) */