Right alignment issue along with styling and background color

Đang mở
  • Có gì không ổn?
#1,435 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
42/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript
Lĩnh vực
tooling

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện HTML Quill được cung cấp với PDFKit 0.13.0 và các lệnh gọi doc.text riêng biệt được mô tả trong issue. Kiểm tra cách căn chỉnh được áp dụng trên các fragment có kiểu, sau đó xác minh rằng các đoạn văn được căn phải và căn giữa vẫn giữ nguyên kiểu mà không bị chồng lấp trong PDF được tạo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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:
Ngôn ngữ chính
JavaScript
Star
10.7k
Fork
1.2k
Merge trung bình
22 giờ 55 phút
Pull request đã merge (30 ngày)
25

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của foliojs/pdfkit

Tất cả issue của foliojs/pdfkit

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.