Right alignment issue along with styling and background color

Aperta
  • Qualcosa non va?
#1,435 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
tooling

Direzione di ricerca

Inizia riproducendo l’HTML Quill fornito con PDFKit 0.13.0 e le chiamate separate a doc.text descritte nell’issue. Esamina come viene applicato l’allineamento tra i frammenti con stile, quindi verifica che i paragrafi allineati a destra e centrati mantengano lo stile senza sovrapporsi nel PDF generato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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:
Lingua principale
JavaScript
Stelle
10.7k
Fork
1.2k
Merge medio
21h 41m
PR unite (30g)
27

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di foliojs/pdfkit

Tutte le issue di foliojs/pdfkit

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.