PDF Template - Fonts Unicode/Emoji

[esforim]

Anyone know which Fonts in the PDF Template support Unicode/Emoji?

I'm trying to make my PDF Template less ugly and blank by adding in "Emoji" or Unicode with symbol. It look like in HTML Template but when I export to PDF it become '?', so I'm guessing not all font support it. Just have to find the correct font for it.

I use this website as my Unicode.

https://unicode-table.com/en/search/?q=phone

Here my current Template and Result:



Result become ? Phone and ?Email

[arkadywtf]

I don't have a direct solution for your problem, but I found out that the best way to style a PDF is by just using SVG images. Converting HTML properties to PDF is always hit or miss. My process is to open up Figma and create any element I need, whether it's emoji, an icon or even a straight line. Seriously, I did a straight line as SVG because I needed it to be thiner than what TCPDF writes to a file. Doing it in SVG also gives me a full control on what the output will be. The other benefit is I can change an icon across all PDFs at once. If I store a phone icon in one location ie. "client/custom/img/phone.svg", I can later change it to something else if I so choose.

If you decide to go the route with font emojis, you probably would need to merge it with the existing font, but someone already did try that somewhat successfully, but emoji in the output come out in monochrome.

[esforim]

You genius! SVG is a good solution indeed. I didn't think of doing image.

Can you tell me more about this "client/custom/img/phone.svg"? It would be nice to link to a single file rather than each template have their own image.

Also how do you deal with scaling of font vs image? Because Vector can have unlimited solution but text wise we dealing with Size 10-12 majority.

Guess I will skip emoji font for the time being then, I'm not ready to go Black/White monochrome yet

[arkadywtf]

So basically I place SVG in client directory either in custom dir:

client/custom/img/icon-phone.svg

or in module dir:

client/custom/modules/{your-module-name}/img/icon-phone.svg

This allows me to use relative paths inside Template body:

<img src="client/custom/img/icon-phone.svg">

If I need it to be in certain size I use "style" tag:

<img src="client/custom/img/icon-phone.svg" style="width: 64px;">

When designing a PDF template I also stay away from DIVs and "floats". The main layout is always an HTML table with border="0", so when I'm placing SVG inside a table cell the size is constrained by the size of the cell itself e.g.:

<td style="width:20%">
    <img src="client/custom/img/icon-phone.svg">
</td>​

This pretty much it. Usually it takes a few trials and errors, but eventually you'll get there. Don't feel too bad for not thinking of doing it with SVG, it also took me a while until I figured it out, so I'm glad this little tip can help someone and save some time

[esforim]

Saving this for a weekend try

[esforim]

So instead of waiting I decide to just follow arkadywtf instruction.

Initially I was planning to find individual icon but now it seem to take too long and too many option to choose from. Anyway I decide to just go with some sort of pack and went to this website.

https://www.smashingmagazine.com/201...s-psd-pdf-svg/

Which they have nicely put it all in a zip file I can just upload and extract.

---

EspoCRM got it own icon too, I wonder if we can just use EspoCRM build in icon with the current version or perhaps only with future update or need coding?


---

OK but I'm failing to get it to work at the moment.

Error 1: 403 Forbidden.

Do I need to change the Permission setting? And permission do I use? Current it is 644 for all my icon.

Error 2: Oops, looks like the page is lost.

I'm using a subdomain, so I'm thinking maybe the path is incorrect. Tried add additional path to subdomain but nope.

---

OK figured it out. Don't need to worry about subdomain issue, the problem is the filename. Certain filename doesn't work it seem. For example, with this icon pack it all start with "#", this # hash symbol causing it to load.

I rename it to "1.svg" as a test and it worked fine.

Another issue to keep an eye on is, the icon size, this pack might look good when it at maybe 32px but at 16px it is difficult to see, so a Line style art is better. So I end up with this website where is more option to choose from: https://medium.com/@101/the-best-fre...s-26f36ddd732e

[esforim]

So I manage to get it to work but it look terrible, extremely tiny when it come to SVG. I wonder if it a corrupt file or what? It look like in the Template editing but once you export it small ant size. Less than 1 px or so.

PNG seem OK with the scaling. Can you share a workable SVG?

[arkadywtf]

My process is something like this. I need an icon for a mobile phone, so let's use this icon from iconmonstr. I put the icon in:

client/custom/img/iconmonstr-mobile-thin.svg

After rendering PDF I get less than satisfying results:

Figma tool to the rescue. I go to https://www.figma.com (Free plan is more than enough) and I just import the icon above and export it back to SVG.


Drag-n-drop file to Figma, (1) select an icon, (2) select SVG format in the right corner of the Export section and (3) click Export. Replace the exported file in:

client/custom/img/iconmonstr-mobile-thin.svg

Let's see how it's rendered this time around:


HTML code in Template body:

<table class="table table-bordered" border="0">
    <tbody>
        <tr>
            <td style="line-height:1;width:7%;">
                <img src="client/custom/img/iconmonstr-mobile-thin.svg" style="width: 24px;">
            </td>
            <td style="line-height:1;width:40%;"><span><b>Example for users of the forum</b><br></span>
                <span>+48 123456789<br></span>
                <span><br></span>
            </td>
        </tr>
    </tbody>
</table>​

Figma is an online tool, no download required, it has a Free plan and lots of tutorials online. If you haven't checked out I highly recommend it. Some icons work from the get go, some need extra work, usually Import/Export routine suffice.

[emillod]

My process is something like this. I need an icon for a mobile phone, so let's use this icon from iconmonstr. I put the icon in:

client/custom/img/iconmonstr-mobile-thin.svg

After rendering PDF I get less than satisfying results:

Figma tool to the rescue. I go to https://www.figma.com (Free plan is more than enough) and I just import the icon above and export it back to SVG.


Drag-n-drop file to Figma, (1) select an icon, (2) select SVG format in the right corner of the Export section and (3) click Export. Replace the exported file in:

client/custom/img/iconmonstr-mobile-thin.svg

Let's see how it's rendered this time around:


HTML code in Template body:

<table class="table table-bordered" border="0">
<tbody>
<tr>
<td style="line-height:1;width:7%;">
<img src="client/custom/img/iconmonstr-mobile-thin.svg" style="width: 24px;">
</td>
<td style="line-height:1;width:40%;"><span><b>Example for users of the forum</b><br></span>
<span>+48 123456789<br></span>
<span><br></span>
</td>
</tr>
</tbody>
</table>​

Figma is an online tool, no download required, it has a Free plan and lots of tutorials online. If you haven't checked out I highly recommend it. Some icons work from the get go, some need extra work, usually Import/Export routine suffice.

Good job

[esforim]

I thought you got a .PNG and convert it to a SVG with Figma but no, all you did was import and export, both still SVG.

So the question would be, why does Figma SVG work but other website/SVG file fail? What is Figma doing that make it work... would you have any idea?

I'm currently using the free software Inkscape to make any edit, I will try re-saving it and testing it and see if it get same 'good' result as using Figma.

Sorry for trouble, would you be able to share those 2 version? I want to do a Checksum on it to see if there any data differences or 'SVG node' that got changed somehow.