Comments (5)
Font Aleo is taken from googlefonts (and the license there applies obviously)
from svg2pdf.js.
What PDF viewer are you using? In Edge, to me the pdf you uploaded looks like this:
Which doesn't look that wrong to me....
from svg2pdf.js.
Ah - it's only now that I see that the yellow stuff was your own "markup" ! Sorry - I thouhg the yellow text was overlapping the blue text, but this is your highlighting. Sorry. I do see that there are artefacts in the font rendering. Typically they can be seen if there is stroking applied or the font weight doesn't match the declared font. Are you sure that the mapping from font and font weight matches the font? I guess one would have to simply debug which calls are being performed on the jspdf context and how they differ from your calls.
from svg2pdf.js.
Sorry - wanted to highlight this things as they are pretty small.
Regarding the text/font in question I really just put the following to add the font data to pdf, convert the svg from the ticket and that's pretty much it.
const fontBase64Data = /* same fontBase64 data as in SVG for font aleo-bold */
pdf.addFileToVFS(`${fontFamily}-Bold.ttf`, fontBase64Data);
pdf.addFont(`${fontFamily}-Bold.ttf`, fontFamily, 'normal', 700);
I may have an understanding issue regarding the API though - when I read your question if the mapping from font and font weight match the font.
From my understanding I load the fontbase64 data and then assign via addFont the family name and if I consider the font loaded to be italic and what weight it has - right? Oder do I have a gap there in my understanding?
The svg at that point reads so the font is bold which I understand is fontweight: 700 as I specify when adding the font. is that correct? Or do I just no get you?
<g transform="matrix(1 0 0 1 282.45 193.07)" style="">
<text xml:space="preserve" font-family="Aleo" font-size="51" font-weight="bold" style="stroke: rgb(0,42,255); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,42,255); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-212.57" y="16.02">This is a test - bold</tspan></text>
</g>
from svg2pdf.js.
The point is that svg2pdf (and then jspdf) needs to map font family and font weight and size to a physical font. And if they don't match, it could be that the browser renders something else than the pdf viewer.
You say that you were able to find a sequence of jspdf calls that resulted in the font being rendered, properly.
Since svg2pdf also simply issues a series of such calls, it should be easy to find out with a debugger how they differ. This would give us an idea where to look what might be going wrong.
That said: I now see that you have a "stroke" set on the font - this might be problematic, too, as stroking is a yet another story and it could also be that the font encoding is buggy, here or that either of the rendering engines has a bug, too. Have you tried modifying the stroke and see if this changes anything?
from svg2pdf.js.
Related Issues (20)
- The transform-origin attribute of svg is rendered into pdf, which is not visible HOT 1
- TypeError: t.toFixed is not a function HOT 6
- Acrobat Always Asks to Save Changes to "unmodified" File on Close of PDF HOT 5
- Underline and shadow of text not converted to pdf
- stroke-width="inherit" breaks in jsPDF HOT 2
- SVG is not properly rendered in the pdf HOT 4
- Force stroke='none' if 'stroke-width' === 0 HOT 3
- Support for XML HOT 1
- SVG is upscaled in the pdf-file HOT 3
- When font-size declared in rem, text is missing in the exported file. HOT 4
- Latest master doesn't build HOT 1
- Excess clipping of nested SVG HOT 8
- Marker clipping HOT 2
- Error: Invalid argument passed to jsPDF.scale Error HOT 4
- Black background added to paths HOT 8
- Chinese is not supported HOT 2
- The exported PDF is not rendering custom fonts on some of the PDF text objects. HOT 8
- How to concatenate multiple SVG files? HOT 2
- Setting width and height as floats throws t. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg2pdf.js.