Right alignment issue along with styling and background color

Abierto
  • ¿Algo no está bien?
#1,435 2 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
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
javascript
Área
tooling

Línea de trabajo

Comienza reproduciendo el HTML de Quill proporcionado con PDFKit 0.13.0 y las llamadas separadas a doc.text descritas en el issue. Inspecciona cómo se aplica la alineación entre fragmentos con estilo y, después, verifica que los párrafos alineados a la derecha y centrados conserven el estilo sin superponerse en el PDF generado.

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

Descripción

Use Case/Description

we are using quill editor on frontend and our input is html string provided by quill editor and we are converting html into text with styling in pdf file using pdfkit with custom logic, it also provides some styling like (header tags, font color, background color, left/center/right/justify alignments, bold/italic/underline and custom font sizes, etc). and we wanted to apply same styling in pdf file using pdfkit also.

Single paragraph can have all the styling applied. for every styling quill editor giving us the separate html tag like p/span/h1...h6/s/strong/etc and to apply the style accordingly we are using the doc.text for each tag with respected option params.
for ex. for bold we are using custom fonts, for em tag we are using the oblique params of doc.text options argument. for background color we are using filled rectange as pdfkit doesnot have anything like background color.

Sample HTML string input
<p class=\"ql-align-right\">Artificial intelligence (AI) is <span style=\"color: rgb(230, 0, 0);\">rapidly </span><span style=\"color: rgb(230, 0, 0); background-color: rgb(255, 255, 102);\">evolving</span><span style=\"color: rgb(230, 0, 0);\"> and becoming increasingly sophisticated. Advancements in machine learning, natural language processing, and computer vision are allowing AI systems to perform tasks that were once thought to be the exclusive domain of humans, such as understanding speec</span>h and recognizing <span style=\"background-color: rgb(178, 178, 0);\">images</span>.</p><p class=\"ql-align-right\"><br></p><p class=\"ql-align-center\"><br></p>
Current Output/Behaviour

Now when whole paragraph is in right alignment with different styling effects, i am adding align: right to every doc.text function but then all of the text overlapping on right side.
image (73)

Expected Output/Behaviour

right and center alignment should work with all the styling.

Tried Approaches

  1. tried with fill and fillAndStroke function for background color with alignment option but not behaving properly

  2. tried doc.text for every tag getting from quill editor html string as i explain earlier but in case of align: right all of the text overlapping on right side.

Your environment

  • pdfkit version: 0.13.0
  • Node version: 16
  • Browser version (if applicable):
  • Operating System:
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.