SVG/PNG export does not preserve axis/tick font settings and clips axis label

Abierto
  • ¿Algo no está bien?
#4,388 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
data-visualization, frontend

Línea de trabajo

Start by tracing the SVG/PNG export entry point and the axis/tick-label rendering used by the NMRium display; no source files or tests are identified in the issue. Reproduce the problem with changed font family and size, then verify both export formats preserve those settings and keep the δ [ppm] label inside the image frame.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Current behavior

When exporting a spectrum as SVG or PNG, the exported figure does not preserve the font settings used in the NMRium display.

This may be related to #3529, which concerns customization of font size and font family. In the current UI, these settings affect the on-screen spectrum, but they are not reproduced correctly in the exported figure.

Observed behavior:

  • Tick-label font size in the exported image differs from the size shown/configured in NMRium.
  • Axis-label font size is not preserved.
  • The font family changes during export.
  • The x-axis label (δ [ppm]) extends beyond the image boundary and is partially clipped.
  • The problem occurs with both SVG and PNG export.

Steps to reproduce

  1. Open a 1D spectrum.
  2. Change the axis/tick-label font settings.
  3. Confirm that the new settings are visible in the NMRium display.
  4. Export the spectrum as SVG or PNG.
  5. Compare the exported figure with the on-screen spectrum.

Expected behavior

  • SVG/PNG export should preserve the configured font size and font family for axis and tick labels.
  • The exported figure should visually match the spectrum shown in NMRium.
  • Axis labels should remain fully inside the exported image frame.

Screenshots

NMRium display

The configured axis and tick-label font settings are visible in the NMRium interface.

Image
Exported PNG

The exported figure uses different font sizing/font rendering, and the x-axis label is clipped at the bottom.

Image

Related issue

  • #3529 — Customize font size, color, ...
Lenguaje dominante
TypeScript
Estrellas
83
Forks
35
Merge medio
1 d 4 h
PR fusionados (30 d)
9

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de cheminfo/nmrium

Todos los issues de cheminfo/nmrium

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.