Right alignment issue along with styling and background color
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 42/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- javascript
- 领域
- tooling
调研方向
首先，使用 PDFKit 0.13.0 和 issue 中描述的独立 doc.text 调用，复现所提供的 Quill HTML。检查对齐方式如何应用于带样式的片段之间，然后验证右对齐和居中的段落在生成的 PDF 中保留样式且不会重叠。
由索引模型根据 Issue 内容生成。
描述
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.
Expected Output/Behaviour
right and center alignment should work with all the styling.
Tried Approaches
-
tried with fill and fillAndStroke function for background color with alignment option but not behaving properly
-
tried doc.text for every tag getting from quill editor html string as i explain earlier but in case of
align: rightall of the text overlapping on right side.
Your environment
- pdfkit version: 0.13.0
- Node version: 16
- Browser version (if applicable):
- Operating System:
- 主要语言
- JavaScript
- 星标
- 10.7k
- 派生
- 1.2k
- 平均合并
- 21 小时 41 分钟
- 30 天内合并 PR
- 27
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
foliojs/pdfkit 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
PDFKit crashes when providing fonts as Buffer in table可能已有人在做 @ykw9263 于 130 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
foliojs/pdfkit#1743 · 13 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
foliojs/pdfkit#1512 · 1 条评论 · 2 个 reaction ·
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 45/100
维护者通常 1 天内回复
相似的 Issue
-
check:failed feeds:add
难度 2/5 1-3 小时 新手友好度 65/100
iptv-org/database#38938 · 2 条评论 ·
维护者通常 4 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 66/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
rescript-lang/rescript#9182 ·
维护者通常 1 天内回复
-
Analysis
难度 2/5 1-3 小时 新手友好度 72/100
SACGF/variantgrid#2615 ·
维护者通常 1 天内回复
-
curriculum documentation quality
难度 2/5 1-3 小时 新手友好度 72/100
githubnext/gh-aw-workshop#5297 ·
维护者通常 1 天内回复