`widthOfString`/`heightOfString` not accurate?

Abierto
  • ¿Algo no está bien?
#1,460 0 comentarios 7 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
tooling

Línea de trabajo

Clona la reproducción vinculada de pdfkit-bugs, ejecuta npm install && npm start y compara los límites indicados para Helvetica e Inter. Céntrate en el comportamiento del ancho y la altura con un interlineado negativo; se considera terminado cuando se haya establecido si las dimensiones devueltas coinciden con el área de texto renderizada, o se haya documentado la limitación y el comportamiento esperado.

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

Descripción

Bug Report

Description of the problem

If I call height/widthOfString and draw a rect+stroke with the dimensions returned, I would expect the rect to encompass the text. But that isn't the behavior I'm seeing.

Here are the issues I'm seeing:

  1. With Helvetica, the box is too wide (wider than the pdf) and too tall:
image
  1. With Inter SemiBold, the height looks just about right:
image
  1. But as soon as I give the Inter text a negative line gap, the height is wrong:
image

My goal is to measure the size of text and choose the largest font size that will fill a given area. If I can't compute that area the task is impossible.

Is there a better way of getting the area of the rendered text?

Code sample

code that demonstrates these issues: https://github.com/altano/pdfkit-bugs/tree/main

Just clone, npm install && npm start

Your environment

  • pdfkit version: v0.13.0
  • Node version: v18.16.0
  • Browser version (if applicable): n/a
  • Operating System: macOS 13.4.1
Lenguaje dominante
JavaScript
Estrellas
10.7k
Forks
1.2k
Merge medio
22 h 55 min
PR fusionados (30 d)
25

Preparar el entorno

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 foliojs/pdfkit

Todos los issues de foliojs/pdfkit

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.