react-cheminfo 0.38.0 → 0.39.0

package/src/download/core/figureSvg.ts

@@ -48,6 +48,13 @@ export interface FigureSvg {
 /** What a saved SVG figure is, for the file and for the renderer reading it. */
 export const FIGURE_SVG_TYPE = 'image/svg+xml;charset=utf-8';
 
+/** A run of words inside a card, with where it sits and how it is set. */
+interface TextRun {
+  text: string;
+  box: DOMRect;
+  type: CSSStyleDeclaration;
+}
+
 /** The token a figure's own ground is named by. */
 const SURFACE_TOKEN = '--surface';
 
@@ -138,19 +145,15 @@ function legendMarkup(legend: Element, box: DOMRect): string {
   }
 
   const texts: FigureLegendText[] = [];
-  for (const run of legend.querySelectorAll('*')) {
-    if (run.firstElementChild !== null) continue;
-    const words = run.textContent?.trim() ?? '';
-    if (words === '') continue;
-    const at = run.getBoundingClientRect();
-    const type = window.getComputedStyle(run);
+  for (const run of textRuns(legend)) {
+    const at = run.box;
     texts.push({
-      text: words,
+      text: run.text,
       x: at.left - box.left,
       y: at.top - box.top + at.height / 2,
-      color: type.color,
-      fontSize: Number.parseFloat(type.fontSize),
-      fontWeight: type.fontWeight,
+      color: run.type.color,
+      fontSize: Number.parseFloat(run.type.fontSize),
+      fontWeight: run.type.fontWeight,
     });
   }
 
@@ -172,6 +175,35 @@ function legendMarkup(legend: Element, box: DOMRect): string {
   });
 }
 
+/**
+ * Every run of words inside a card, with the box the browser gave it.
+ *
+ * Collected as text nodes rather than as elements, because an element is only
+ * the smallest box around a run when it holds nothing else: a formula drawn as
+ * `HCO<sub>3</sub><sup>-</sup>` keeps `HCO` on the element itself, and a card
+ * read element by element loses exactly the letters that name the species. The
+ * box is measured over the characters with a `Range`, which is also tighter
+ * than the element's own box wherever that element is padded.
+ * @param legend - The card, as it sits on the page.
+ * @returns The runs, in the order they are written.
+ */
+function textRuns(legend: Element): TextRun[] {
+  const runs: TextRun[] = [];
+  const walker = document.createTreeWalker(legend, NodeFilter.SHOW_TEXT);
+  const range = document.createRange();
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+    const words = node.textContent?.trim() ?? '';
+    if (words === '') continue;
+    const parent = node.parentElement;
+    if (parent === null) continue;
+    range.selectNodeContents(node);
+    const box = range.getBoundingClientRect();
+    if (box.width <= 0 || box.height <= 0) continue;
+    runs.push({ text: words, box, type: window.getComputedStyle(parent) });
+  }
+  return runs;
+}
+
 /**
  * One drawing, serialized with every token it names written out.
  *

package/src/help/ui/HelpToolbarButton.tsx

@@ -3,6 +3,7 @@ import { Button } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 
 import type { HelpContent } from './HelpBody.tsx';
 import { HelpTooltip } from './HelpTooltip.tsx';
@@ -68,7 +69,7 @@ export function HelpToolbarButton(props: HelpToolbarButtonProps): ReactElement {
         icon={icon}
         text={label}
         aria-label={label ?? helpName(content, t)}
-        className={className}
+        className={joinClassNames('no-print', className)}
         onClick={onClick}
       />
     </HelpTooltip>

package/src/locales/de.json

@@ -48,18 +48,32 @@
   "site.inorganic.tagline": "Eine anorganische Verbindung benennen und ihre Formel schreiben.",
   "share.button": "Teilen",
   "share.buttonTitle": "Einen Link zu dieser Seite teilen oder sie in Ihre eigene Website einbetten",
-  "share.dialogTitle": "Teilen oder einbetten",
-  "share.lead": "Ein Link auf {title}, so wie Sie es eingestellt haben.",
+  "share.dialogTitleFor": "{title} teilen oder einbetten",
   "share.layout": "Darstellung",
   "share.embed": "In eine andere Seite einbetten",
   "share.embedHint": "Lässt Kopfzeile und Navigation der Website weg, damit die Seite in einer Seite von Ihnen sitzt.",
+  "share.on": "Ein",
+  "share.off": "Aus",
   "share.showOnPage": "Auf der Seite zeigen",
   "share.custom": "Eigene",
-  "share.link": "Link",
+  "share.options": "Optionen",
+  "share.preview": "Vorschau",
+  "share.device.window": "Dieses Fenster",
+  "share.device.mobile": "Handy",
+  "share.device.laptop": "Laptop",
+  "share.device.hd": "HD",
+  "share.deviceSize": "{name} · {width} × {height}",
+  "share.previewWhat": "Die Seite, wie dieser Link sie öffnet, auf dem gewählten Bildschirm.",
+  "share.previewLive": "Es ist die Seite selbst: Was Sie darin ändern, ändert den Link nicht.",
   "share.copyLink": "Link kopieren",
+  "share.copyLinkHelpTitle": "Die Seite so weitergeben",
+  "share.copyLinkHelp": "Fügen Sie die Adresse in eine Mail, einen Chat oder eine Kursseite ein: Sie öffnet diese Seite genau so eingestellt, wie Sie sie jetzt haben.",
   "share.openInNewTab": "In einem neuen Tab öffnen",
-  "share.iframe": "Iframe",
+  "share.openInNewTabHelpTitle": "Vor dem Senden ansehen",
+  "share.openInNewTabHelp": "Öffnet den Link in einem neuen Tab, damit Sie sehen, was die Klasse bekommt.",
   "share.copyIframe": "Iframe kopieren",
+  "share.copyIframeHelpTitle": "Die Seite in Ihre einbauen",
+  "share.copyIframeHelp": "Ein HTML-Schnipsel, das dort eingefügt wird, wo das HTML Ihrer Seite bearbeitet wird: das Werkzeug läuft dann darin.",
   "share.done": "Fertig",
   "cite.button": "Zitieren",
   "cite.copyReferenceAs": "Literaturangabe kopieren als",
@@ -410,6 +424,27 @@
   "structure.tool.reactionOnly": "Nur beim Zeichnen einer Reaktion.",
   "structure.tool.unavailable": "In diesem Editor nicht verfügbar.",
   "structure.loadingEditor": "Der Editor wird geladen…",
+  "structure.export.open": "Struktur exportieren",
+  "structure.export.title": "Struktur exportieren",
+  "structure.export.loading": "Die Struktur wird gelesen…",
+  "structure.export.nothing": "Noch nichts gezeichnet.",
+  "structure.export.picture": "Die Struktur, so wie das gespeicherte Bild sie zeichnet",
+  "structure.export.identifiers": "Kanonische Kennungen",
+  "structure.export.saveSvg": "Als SVG speichern",
+  "structure.export.savePng": "Als PNG speichern",
+  "structure.export.copyPng": "PNG kopieren",
+  "structure.export.smiles": "SMILES",
+  "structure.export.smilesHelp": "Die Struktur in einer Zeile, Stereochemie eingeschlossen. Jedes Programm liest sie.",
+  "structure.export.molfileV3000": "Molfile V3000",
+  "structure.export.molfileV3000Help": "Die Verbindungstabelle, mit den Atomen so angeordnet wie gezeichnet. Trägt mehr als 999 Atome und erweiterte Stereochemie.",
+  "structure.export.molfileV2000": "Molfile V2000",
+  "structure.export.molfileV2000Help": "Die Verbindungstabelle, mit den Atomen so angeordnet wie gezeichnet. Der ältere Dialekt, den jedes Programm öffnet.",
+  "structure.export.idCode": "idCode",
+  "structure.export.idCodeHelp": "Die kanonische Kennung von OpenChemLib: eine Zeichenkette je Molekül, unabhängig von der Zeichnung.",
+  "structure.export.noStereoIdCode": "idCode ohne Stereochemie",
+  "structure.export.noStereoIdCodeHelp": "Jedes Stereoisomer ergibt diese, womit ein ohne Stereozentren gezeichneter Eintrag gefunden wird.",
+  "structure.export.noStereoTautomerIdCode": "idCode ohne Stereochemie und Tautomerie",
+  "structure.export.noStereoTautomerIdCodeHelp": "Jedes Tautomer und jedes Stereoisomer ergibt diese: Keto- und Enolform haben denselben Schlüssel.",
   "molecule3d.view": "Ansicht",
   "molecule3d.resetView": "Ansicht zurücksetzen",
   "molecule3d.spin": "Drehen lassen",

package/src/locales/en.json

@@ -48,18 +48,32 @@
   "site.inorganic.tagline": "Name an inorganic compound, and write its formula.",
   "share.button": "Share",
   "share.buttonTitle": "Share a link to this page, or embed it in your own site",
-  "share.dialogTitle": "Share or embed",
-  "share.lead": "A link to {title} as you have it set up now.",
+  "share.dialogTitleFor": "Share or embed — {title}",
   "share.layout": "Layout",
   "share.embed": "Embed in another page",
   "share.embedHint": "Drops the site header and its navigation, so the page sits inside a page of your own.",
+  "share.on": "On",
+  "share.off": "Off",
   "share.showOnPage": "Show on the page",
   "share.custom": "Custom",
-  "share.link": "Link",
+  "share.options": "Options",
+  "share.preview": "Preview",
+  "share.device.window": "This window",
+  "share.device.mobile": "Mobile",
+  "share.device.laptop": "Laptop",
+  "share.device.hd": "HD",
+  "share.deviceSize": "{name} · {width} × {height}",
+  "share.previewWhat": "The page as this link opens it, at the screen you pick.",
+  "share.previewLive": "It is the live page: what you change inside it does not change the link.",
   "share.copyLink": "Copy the link",
+  "share.copyLinkHelpTitle": "Hand the page out as it is",
+  "share.copyLinkHelp": "Paste the address in a mail, a chat or a course page: it opens this page set up exactly as you have it now.",
   "share.openInNewTab": "Open in a new tab",
-  "share.iframe": "Iframe",
+  "share.openInNewTabHelpTitle": "See it before you send it",
+  "share.openInNewTabHelp": "Opens the link in a new tab, so you check what the class will get.",
   "share.copyIframe": "Copy the iframe",
+  "share.copyIframeHelpTitle": "Put the page inside yours",
+  "share.copyIframeHelp": "A snippet of HTML to paste where your own page's HTML is edited: the tool then runs inside it.",
   "share.done": "Done",
   "cite.button": "Cite",
   "cite.copyReferenceAs": "Copy the reference as",
@@ -372,6 +386,27 @@
   "structure.tool.reactionOnly": "Only when drawing a reaction.",
   "structure.tool.unavailable": "Not available in this editor.",
   "structure.loadingEditor": "Loading the editor…",
+  "structure.export.open": "Export the structure",
+  "structure.export.title": "Export the structure",
+  "structure.export.loading": "Reading the structure…",
+  "structure.export.nothing": "Nothing is drawn yet.",
+  "structure.export.picture": "The structure, as the saved picture draws it",
+  "structure.export.identifiers": "Canonical identifiers",
+  "structure.export.saveSvg": "Save SVG",
+  "structure.export.savePng": "Save PNG",
+  "structure.export.copyPng": "Copy PNG",
+  "structure.export.smiles": "SMILES",
+  "structure.export.smilesHelp": "The structure on one line, stereochemistry included. Every tool reads it.",
+  "structure.export.molfileV3000": "Molfile V3000",
+  "structure.export.molfileV3000Help": "The connection table, with the atoms laid out as they are drawn. Carries more than 999 atoms, and enhanced stereo.",
+  "structure.export.molfileV2000": "Molfile V2000",
+  "structure.export.molfileV2000Help": "The connection table, with the atoms laid out as they are drawn. The older dialect, and the one every tool opens.",
+  "structure.export.idCode": "idCode",
+  "structure.export.idCodeHelp": "OpenChemLib's canonical identifier: one string per molecule, whichever way it was drawn.",
+  "structure.export.noStereoIdCode": "idCode without stereochemistry",
+  "structure.export.noStereoIdCodeHelp": "Every stereoisomer of this structure gives this one, so it finds a record drawn without its stereocentres.",
+  "structure.export.noStereoTautomerIdCode": "idCode without stereochemistry or tautomer",
+  "structure.export.noStereoTautomerIdCodeHelp": "Every tautomer and every stereoisomer gives this one, so the keto and the enol form key together.",
   "periodic.table": "Periodic table",
   "periodic.group": "Group {group}",
   "periodic.period": "Period {period}",

package/src/locales/es.json

@@ -48,18 +48,32 @@
   "site.inorganic.tagline": "Nombrar un compuesto inorgánico y escribir su fórmula.",
   "share.button": "Compartir",
   "share.buttonTitle": "Compartir un enlace a esta página, o incrustarla en su propio sitio",
-  "share.dialogTitle": "Compartir o incrustar",
-  "share.lead": "Un enlace a {title} tal como lo tiene configurado ahora.",
+  "share.dialogTitleFor": "Compartir o incrustar — {title}",
   "share.layout": "Disposición",
   "share.embed": "Incrustar en otra página",
   "share.embedHint": "Quita la cabecera del sitio y su navegación, para que la página quede dentro de una página suya.",
+  "share.on": "Sí",
+  "share.off": "No",
   "share.showOnPage": "Mostrar en la página",
   "share.custom": "A medida",
-  "share.link": "Enlace",
+  "share.options": "Opciones",
+  "share.preview": "Vista previa",
+  "share.device.window": "Esta ventana",
+  "share.device.mobile": "Móvil",
+  "share.device.laptop": "Portátil",
+  "share.device.hd": "HD",
+  "share.deviceSize": "{name} · {width} × {height}",
+  "share.previewWhat": "La página tal como la abre este enlace, en la pantalla que elijas.",
+  "share.previewLive": "Es la página en vivo: lo que cambies dentro no cambia el enlace.",
   "share.copyLink": "Copiar el enlace",
+  "share.copyLinkHelpTitle": "Entregar la página tal cual",
+  "share.copyLinkHelp": "Pega la dirección en un correo, un chat o una página de curso: abre esta página configurada exactamente como la tienes ahora.",
   "share.openInNewTab": "Abrir en una pestaña nueva",
-  "share.iframe": "Iframe",
+  "share.openInNewTabHelpTitle": "Verla antes de enviarla",
+  "share.openInNewTabHelp": "Abre el enlace en una pestaña nueva, para comprobar lo que recibirá la clase.",
   "share.copyIframe": "Copiar el iframe",
+  "share.copyIframeHelpTitle": "Poner la página dentro de la tuya",
+  "share.copyIframeHelp": "Un fragmento de HTML para pegar donde se edita el HTML de tu página: la herramienta funciona dentro de él.",
   "share.done": "Listo",
   "cite.button": "Citar",
   "cite.copyReferenceAs": "Copiar la referencia como",
@@ -410,6 +424,27 @@
   "structure.tool.reactionOnly": "Solo al dibujar una reacción.",
   "structure.tool.unavailable": "No disponible en este editor.",
   "structure.loadingEditor": "Cargando el editor…",
+  "structure.export.open": "Exportar la estructura",
+  "structure.export.title": "Exportar la estructura",
+  "structure.export.loading": "Leyendo la estructura…",
+  "structure.export.nothing": "Todavía no hay nada dibujado.",
+  "structure.export.picture": "La estructura, tal como la dibuja la imagen guardada",
+  "structure.export.identifiers": "Identificadores canónicos",
+  "structure.export.saveSvg": "Guardar en SVG",
+  "structure.export.savePng": "Guardar en PNG",
+  "structure.export.copyPng": "Copiar el PNG",
+  "structure.export.smiles": "SMILES",
+  "structure.export.smilesHelp": "La estructura en una línea, con su estereoquímica. Todas las herramientas la leen.",
+  "structure.export.molfileV3000": "Molfile V3000",
+  "structure.export.molfileV3000Help": "La tabla de conexiones, con los átomos colocados como se dibujan. Admite más de 999 átomos y la estereoquímica ampliada.",
+  "structure.export.molfileV2000": "Molfile V2000",
+  "structure.export.molfileV2000Help": "La tabla de conexiones, con los átomos colocados como se dibujan. El dialecto antiguo, el que abre cualquier herramienta.",
+  "structure.export.idCode": "idCode",
+  "structure.export.idCodeHelp": "El identificador canónico de OpenChemLib: una cadena por molécula, se dibuje como se dibuje.",
+  "structure.export.noStereoIdCode": "idCode sin estereoquímica",
+  "structure.export.noStereoIdCodeHelp": "Todos los estereoisómeros dan este, así que encuentra un registro dibujado sin sus centros estereogénicos.",
+  "structure.export.noStereoTautomerIdCode": "idCode sin estereoquímica ni tautomería",
+  "structure.export.noStereoTautomerIdCodeHelp": "Todos los tautómeros y estereoisómeros dan este: la forma cetónica y la enólica comparten clave.",
   "molecule3d.view": "Vista",
   "molecule3d.resetView": "Reiniciar la vista",
   "molecule3d.spin": "Giro continuo",

package/src/locales/fr.json

@@ -48,18 +48,32 @@
   "site.inorganic.tagline": "Nommer un composé inorganique, et en écrire la formule.",
   "share.button": "Partager",
   "share.buttonTitle": "Partager un lien vers cette page, ou l'intégrer à votre propre site",
-  "share.dialogTitle": "Partager ou intégrer",
-  "share.lead": "Un lien vers {title} tel que vous l'avez réglé.",
+  "share.dialogTitleFor": "Partager ou intégrer — {title}",
   "share.layout": "Disposition",
   "share.embed": "Intégrer dans une autre page",
   "share.embedHint": "Retire l'en-tête du site et sa navigation, pour que la page prenne place dans une page à vous.",
+  "share.on": "Oui",
+  "share.off": "Non",
   "share.showOnPage": "Afficher sur la page",
   "share.custom": "Sur mesure",
-  "share.link": "Lien",
+  "share.options": "Options",
+  "share.preview": "Aperçu",
+  "share.device.window": "Cette fenêtre",
+  "share.device.mobile": "Mobile",
+  "share.device.laptop": "Portable",
+  "share.device.hd": "HD",
+  "share.deviceSize": "{name} · {width} × {height}",
+  "share.previewWhat": "La page telle que ce lien l'ouvre, à l'écran que vous choisissez.",
+  "share.previewLive": "C'est la page elle-même : ce que vous y modifiez ne modifie pas le lien.",
   "share.copyLink": "Copier le lien",
+  "share.copyLinkHelpTitle": "Transmettre la page telle quelle",
+  "share.copyLinkHelp": "Collez l'adresse dans un courriel, une discussion ou une page de cours : elle ouvre cette page réglée exactement comme vous l'avez.",
   "share.openInNewTab": "Ouvrir dans un nouvel onglet",
-  "share.iframe": "Iframe",
+  "share.openInNewTabHelpTitle": "Voir avant d'envoyer",
+  "share.openInNewTabHelp": "Ouvre le lien dans un nouvel onglet, pour vérifier ce que la classe recevra.",
   "share.copyIframe": "Copier l'iframe",
+  "share.copyIframeHelpTitle": "Mettre la page dans la vôtre",
+  "share.copyIframeHelp": "Un extrait de HTML à coller là où le HTML de votre page s'édite : l'outil s'exécute alors à l'intérieur.",
   "share.done": "Terminé",
   "cite.button": "Citer",
   "cite.copyReferenceAs": "Copier la référence en",
@@ -410,6 +424,27 @@
   "structure.tool.reactionOnly": "Seulement lors du dessin d'une réaction.",
   "structure.tool.unavailable": "Indisponible dans cet éditeur.",
   "structure.loadingEditor": "Chargement de l'éditeur…",
+  "structure.export.open": "Exporter la structure",
+  "structure.export.title": "Exporter la structure",
+  "structure.export.loading": "Lecture de la structure…",
+  "structure.export.nothing": "Rien n'est encore dessiné.",
+  "structure.export.picture": "La structure, telle que l'image enregistrée la dessine",
+  "structure.export.identifiers": "Identifiants canoniques",
+  "structure.export.saveSvg": "Enregistrer en SVG",
+  "structure.export.savePng": "Enregistrer en PNG",
+  "structure.export.copyPng": "Copier le PNG",
+  "structure.export.smiles": "SMILES",
+  "structure.export.smilesHelp": "La structure sur une ligne, stéréochimie comprise. Tous les logiciels le lisent.",
+  "structure.export.molfileV3000": "Molfile V3000",
+  "structure.export.molfileV3000Help": "La table de connexion, avec les atomes placés comme ils sont dessinés. Accepte plus de 999 atomes et la stéréochimie étendue.",
+  "structure.export.molfileV2000": "Molfile V2000",
+  "structure.export.molfileV2000Help": "La table de connexion, avec les atomes placés comme ils sont dessinés. Le dialecte le plus ancien, et celui que tout logiciel ouvre.",
+  "structure.export.idCode": "idCode",
+  "structure.export.idCodeHelp": "L'identifiant canonique d'OpenChemLib : une chaîne par molécule, quel que soit le dessin.",
+  "structure.export.noStereoIdCode": "idCode sans stéréochimie",
+  "structure.export.noStereoIdCodeHelp": "Tous les stéréoisomères donnent celui-ci, ce qui retrouve un enregistrement dessiné sans ses centres stéréogènes.",
+  "structure.export.noStereoTautomerIdCode": "idCode sans stéréochimie ni tautomérie",
+  "structure.export.noStereoTautomerIdCodeHelp": "Tous les tautomères et tous les stéréoisomères donnent celui-ci : la forme cétone et la forme énol ont la même clé.",
   "molecule3d.view": "Vue",
   "molecule3d.resetView": "Réinitialiser la vue",
   "molecule3d.spin": "Rotation continue",

package/src/locales/it.json

@@ -48,18 +48,32 @@
   "site.inorganic.tagline": "Nominare un composto inorganico e scriverne la formula.",
   "share.button": "Condividi",
   "share.buttonTitle": "Condividere un link a questa pagina, o incorporarla nel proprio sito",
-  "share.dialogTitle": "Condividere o incorporare",
-  "share.lead": "Un link a {title} così come è configurato ora.",
+  "share.dialogTitleFor": "Condividere o incorporare — {title}",
   "share.layout": "Disposizione",
   "share.embed": "Incorporare in un'altra pagina",
   "share.embedHint": "Toglie l'intestazione del sito e la sua navigazione, così la pagina sta dentro una pagina propria.",
+  "share.on": "Sì",
+  "share.off": "No",
   "share.showOnPage": "Mostra nella pagina",
   "share.custom": "Personalizzato",
-  "share.link": "Link",
+  "share.options": "Opzioni",
+  "share.preview": "Anteprima",
+  "share.device.window": "Questa finestra",
+  "share.device.mobile": "Cellulare",
+  "share.device.laptop": "Portatile",
+  "share.device.hd": "HD",
+  "share.deviceSize": "{name} · {width} × {height}",
+  "share.previewWhat": "La pagina come la apre questo link, sullo schermo che scegli.",
+  "share.previewLive": "È la pagina stessa: quello che cambi al suo interno non cambia il link.",
   "share.copyLink": "Copia il link",
+  "share.copyLinkHelpTitle": "Consegnare la pagina com'è",
+  "share.copyLinkHelp": "Incolla l'indirizzo in una mail, una chat o una pagina di corso: apre questa pagina impostata esattamente come ce l'hai ora.",
   "share.openInNewTab": "Apri in una nuova scheda",
-  "share.iframe": "Iframe",
+  "share.openInNewTabHelpTitle": "Vederla prima di inviarla",
+  "share.openInNewTabHelp": "Apre il link in una nuova scheda, per controllare che cosa riceverà la classe.",
   "share.copyIframe": "Copia l'iframe",
+  "share.copyIframeHelpTitle": "Mettere la pagina dentro la tua",
+  "share.copyIframeHelp": "Un frammento di HTML da incollare dove si modifica l'HTML della tua pagina: lo strumento funziona al suo interno.",
   "share.done": "Fatto",
   "cite.button": "Cita",
   "cite.copyReferenceAs": "Copia il riferimento come",
@@ -372,6 +386,27 @@
   "structure.tool.reactionOnly": "Solo quando si disegna una reazione.",
   "structure.tool.unavailable": "Non disponibile in questo editor.",
   "structure.loadingEditor": "Caricamento dell'editor…",
+  "structure.export.open": "Esporta la struttura",
+  "structure.export.title": "Esporta la struttura",
+  "structure.export.loading": "Lettura della struttura…",
+  "structure.export.nothing": "Non c'è ancora nulla di disegnato.",
+  "structure.export.picture": "La struttura, come la disegna l'immagine salvata",
+  "structure.export.identifiers": "Identificatori canonici",
+  "structure.export.saveSvg": "Salva in SVG",
+  "structure.export.savePng": "Salva in PNG",
+  "structure.export.copyPng": "Copia il PNG",
+  "structure.export.smiles": "SMILES",
+  "structure.export.smilesHelp": "La struttura su una riga, stereochimica compresa. Ogni strumento la legge.",
+  "structure.export.molfileV3000": "Molfile V3000",
+  "structure.export.molfileV3000Help": "La tabella delle connessioni, con gli atomi disposti come sono disegnati. Regge più di 999 atomi e la stereochimica estesa.",
+  "structure.export.molfileV2000": "Molfile V2000",
+  "structure.export.molfileV2000Help": "La tabella delle connessioni, con gli atomi disposti come sono disegnati. Il dialetto più vecchio, quello che ogni strumento apre.",
+  "structure.export.idCode": "idCode",
+  "structure.export.idCodeHelp": "L'identificatore canonico di OpenChemLib: una stringa per molecola, come che sia disegnata.",
+  "structure.export.noStereoIdCode": "idCode senza stereochimica",
+  "structure.export.noStereoIdCodeHelp": "Ogni stereoisomero dà questo, così trova una voce disegnata senza i suoi centri stereogenici.",
+  "structure.export.noStereoTautomerIdCode": "idCode senza stereochimica né tautomeria",
+  "structure.export.noStereoTautomerIdCodeHelp": "Ogni tautomero e ogni stereoisomero dà questo: la forma chetonica e quella enolica hanno la stessa chiave.",
   "periodic.table": "Tavola periodica",
   "periodic.group": "Gruppo {group}",
   "periodic.period": "Periodo {period}",

package/src/number/ui/NumberInput.tsx

@@ -250,7 +250,7 @@ export function NumberInput(props: NumberInputProps): ReactElement {
       className={[Classes.NUMERIC_INPUT, className].filter(Boolean).join(' ')}
     >
       {box}
-      <ButtonGroup className={Classes.FIXED} vertical>
+      <ButtonGroup className={`${Classes.FIXED} no-print`} vertical>
         <Button
           icon="chevron-up"
           size={size}

package/src/overlay/ui/OverlayIconButton.tsx

@@ -90,6 +90,7 @@ export function OverlayIconButton(props: OverlayIconButtonProps): ReactElement {
   return (
     <button
       type="button"
+      className="no-print"
       title={told}
       aria-label={name}
       aria-haspopup={opensMenu ? 'menu' : undefined}

package/src/panel/ui/ClearButton.tsx

@@ -32,6 +32,7 @@ export function ClearButton(props: ClearButtonProps) {
 
   return (
     <Button
+      className="no-print"
       variant="minimal"
       icon="cross"
       aria-label={label}

package/src/pedagogy/core/inlineMarks.ts

@@ -1,7 +1,7 @@
 /**
  * The light inline markup authored prose is written in: `` `code` ``,
- * `**strong**` and `*emphasis*`, plus — for prose that links its jargon — the
- * `[[term]]` markers of the glossary.
+ * `**strong**`, `*emphasis*` and `{{C6H6O}}` for a molecular formula, plus —
+ * for prose that links its jargon — the `[[term]]` markers of the glossary.
  *
  * One left-to-right pass, without a DOM. Whatever opens first is read whole
  * before anything inside it is looked at, so `` `[*+]` `` and `` `*!@*` `` stay
@@ -22,10 +22,11 @@ import { GLOSSARY_MARKER_SOURCE, readMarker } from './glossary.ts';
 export type InlineSegment =
   | { kind: 'text'; start: number; text: string }
   | { kind: 'code'; start: number; text: string }
+  | { kind: 'mf'; start: number; mf: string }
   | { kind: 'term'; start: number; term: string; text: string }
   | { kind: 'strong' | 'emphasis'; start: number; children: InlineSegment[] };
 
-/** What {@link parseInlineMarks} reads besides the three marks. */
+/** What {@link parseInlineMarks} reads besides the four marks. */
 export interface ParseInlineMarksOptions {
   /**
    * Whether `[[term]]` and `[[term|displayed text]]` markers are read too, as
@@ -36,8 +37,8 @@ export interface ParseInlineMarksOptions {
 }
 
 /**
- * Split authored prose into runs of text, code spans, strong and emphasised
- * runs, and — when asked — glossary markers.
+ * Split authored prose into runs of text, code spans, molecular formulas,
+ * strong and emphasised runs, and — when asked — glossary markers.
  *
  * Anything that does not close is not markup and comes back verbatim inside a
  * `text` segment: a lone backtick, `**bold` with no closing pair, `[[term`.
@@ -52,10 +53,16 @@ export function parseInlineMarks(
   return parseFrom(text, 0, options.glossaryMarkers === true);
 }
 
+const MF_SOURCE = String.raw`\{\{(?<mf>[^{}]+)\}\}`;
 const CODE_SOURCE = '`(?<code>[^`]+)`';
 const STRONG_SOURCE = String.raw`\*\*(?<strong>[^*]+)\*\*`;
 const EMPHASIS_SOURCE = String.raw`\*(?<emphasis>[^\s*](?:[^*]*[^\s*])?)\*`;
-const MARKS_SOURCE = [CODE_SOURCE, STRONG_SOURCE, EMPHASIS_SOURCE].join('|');
+const MARKS_SOURCE = [
+  MF_SOURCE,
+  CODE_SOURCE,
+  STRONG_SOURCE,
+  EMPHASIS_SOURCE,
+].join('|');
 const MARKS_AND_MARKERS_SOURCE = `${GLOSSARY_MARKER_SOURCE}|${MARKS_SOURCE}`;
 
 function parseFrom(
@@ -99,8 +106,9 @@ function toSegment(
   markers: boolean,
 ): InlineSegment {
   const start = offset + match.index;
-  const { term, code, strong, emphasis } = match.groups ?? {};
+  const { term, mf, code, strong, emphasis } = match.groups ?? {};
   if (term !== undefined) return readMarker(term, start);
+  if (mf !== undefined) return { kind: 'mf', start, mf: mf.trim() };
   if (code !== undefined) return { kind: 'code', start, text: code };
   if (strong !== undefined) {
     return {

package/src/pedagogy/ui/GlossaryDefinition.tsx

@@ -5,19 +5,13 @@ import type { GlossaryEntry, GlossaryExample } from '../core/glossary.ts';
 import { InlineText } from './InlineText.tsx';
 import { exampleText } from './exampleText.ts';
 import { useGlossary } from './glossaryContext.ts';
-import type { ProseInk, ProseTone } from './pedagogyStyle.ts';
+import type { ProseInk } from './pedagogyStyle.ts';
 import { MONOSPACE, PROSE_INK } from './pedagogyStyle.ts';
 
 /** Props of {@link GlossaryDefinition}. */
 export interface GlossaryDefinitionProps<TExample = GlossaryExample> {
   /** The term to explain, already resolved from a marker. */
   entry: GlossaryEntry<TExample>;
-  /**
-   * The ground it is drawn on: the dark plate of a tooltip, or the page, where
-   * a glossary lists every term.
-   * @default 'tooltip'
-   */
-  tone?: ProseTone;
   /**
    * Draws the illustration of one example; its note is still written under it.
    * @default the surrounding provider's, and otherwise the code and the input
@@ -38,17 +32,18 @@ export interface GlossaryDefinitionProps<TExample = GlossaryExample> {
 /**
  * One definition: the term, one paragraph, then the worked examples.
  *
- * The tooltip a marker opens and the entry a glossary page lists are this one
- * body on two grounds, so a term reads the same wherever it is looked up.
- * @param props - The entry, and the ground it is drawn on.
+ * The tooltip a marker opens and the entry a glossary page lists are the same
+ * body on the same ground — the family's light card — so a term reads the same
+ * wherever it is looked up.
+ * @param props - The entry, and how its examples and code spans are drawn.
  * @returns The definition.
  */
 export function GlossaryDefinition<TExample = GlossaryExample>(
   props: GlossaryDefinitionProps<TExample>,
 ): ReactElement {
-  const { className, entry, tone = 'tooltip' } = props;
+  const { className, entry } = props;
   const context = useGlossary();
-  const ink = PROSE_INK[tone];
+  const ink = PROSE_INK;
   const renderCode =
     props.renderCode ??
     context.renderCode ??
@@ -77,10 +72,7 @@ export function GlossaryDefinition<TExample = GlossaryExample>(
   }
 
   return (
-    <div
-      className={className}
-      style={tone === 'tooltip' ? TOOLTIP_BODY_STYLE : BODY_STYLE}
-    >
+    <div className={className} style={BODY_STYLE}>
       <div style={TITLE_STYLE}>{entry.title}</div>
       <div style={{ ...SUMMARY_STYLE, color: ink.text }}>
         <InlineText text={entry.summary} renderCode={renderCode} />
@@ -117,8 +109,6 @@ const BODY_STYLE: CSSProperties = {
   gap: 6,
 };
 
-const TOOLTIP_BODY_STYLE: CSSProperties = { ...BODY_STYLE, maxWidth: 340 };
-
 const TITLE_STYLE: CSSProperties = { fontWeight: 600, fontSize: 13 };
 
 const SUMMARY_STYLE: CSSProperties = { fontSize: 12, lineHeight: 1.45 };

package/src/pedagogy/ui/GlossaryIndex.tsx

@@ -122,7 +122,6 @@ export function GlossaryIndex<TExample = GlossaryExample>(
             >
               <GlossaryDefinition
                 entry={entry}
-                tone="page"
                 renderExample={renderExample}
                 renderCode={renderCode}
               />

package/src/pedagogy/ui/GlossaryProvider.tsx

@@ -23,6 +23,13 @@ export interface GlossaryProviderProps<TExample = GlossaryExample> {
    * @default undefined — a plain `<code>`
    */
   renderCode?: (code: string) => ReactNode;
+  /**
+   * Draws the `{{C6H6O}}` formulas of the prose below. A chemistry site passes
+   * `(mf) => <MF mf={mf} />` from `react-mf` here and every formula under the
+   * provider — a step, a question, a hint, a definition — is then drawn by it.
+   * @default undefined — the formula as typed
+   */
+  renderMf?: (mf: string) => ReactNode;
   /** The part of the page whose prose resolves its markers against it. */
   children: ReactNode;
 }
@@ -41,14 +48,15 @@ export interface GlossaryProviderProps<TExample = GlossaryExample> {
 export function GlossaryProvider<TExample = GlossaryExample>(
   props: GlossaryProviderProps<TExample>,
 ): ReactElement {
-  const { glossary, renderExample, renderCode, children } = props;
+  const { glossary, renderExample, renderCode, renderMf, children } = props;
   const value = useMemo<GlossaryContextValue>(
     () => ({
       glossary,
       renderExample: renderExample as GlossaryContextValue['renderExample'],
       renderCode,
+      renderMf,
     }),
-    [glossary, renderExample, renderCode],
+    [glossary, renderExample, renderCode, renderMf],
   );
 
   return (