Incorrect characters in downloaded pdf in Diagram control

[Kumeri]

https://demos.telerik.com/kendo-ui/diagram/pdf-export  In this example when I add data in languages other than English, they display correctly in the diagram, but when I export the pdf those data do not display correctly. how can I fix this defect?

 Diagram view ----->

 

Downloaded pdf ------------------------->

 

[Nikolay]

Hello Kumeri,

You need to embed a proper Arabic font for the Arabic language:

https://docs.telerik.com/kendo-ui/api/javascript/pdf/methods/definefont

However, the right-to-left setting is still not available for PDF exported files. There is an open Feature Request with a lot of votes about RTL export. The implementation itself is very complex. Our Developers are aware that this is a very important feature for a lot of our customers and research is still being conducted.

https://feedback.telerik.com/kendo-jquery-ui/1359291-add-right-to-left-pdf-support

Regards,
Nikolay
Progress Telerik

[Kumeri]

This issue is not specific only to Arabic. Any language other than English has this issue. Do we have to do this for all other languages? How is it possible? Please provide a proper example not specific only to one language (Arabic)

[Nikolay]

Hi Kumeri,

You need to define the desired fonts for the PDF to export it properly.

Generally speaking, the PDF export does not support Arial by default, so it needs to be explicitly loaded. You will need to download the Arial font:

https://github.com/JotJunior/PHP-Boleto-ZF2/blob/master/public/assets/fonts/arial.ttf?raw=true

and put it in the fonts folder of your project. Then, in the index file, you'll need to define it in the following way:

<script>
    kendo.pdf.defineFont({
        "Arial": "/fonts/arial.ttf"
    });
</script>

Regards,

Nikolay

[Kumeri]

Hi, 

We already have .woff files in our fonts folder. Can we use them instead of .ttf for this defineFonts method

[Nikolay]

Hi Kumeri,

The `.woff` is also an accepted font file format. You can use such files instead of `.ttf` to define the fonts.

Regards,

Nikolay

[Kumeri]

I tried adding the font to the doc as a style script, and it got added to the DOM. But still, the diagram control does not display characters correctly when eorted as pdf. Can you please provide a working example using Japanese characters so I can have a look at it? 

[Nikolay]

Hi Kumeri, 

Please find attached the example I created that embeds GenShinGothic Regular font.

<script>
    // Import DejaVu Sans font for embedding
    kendo.pdf.defineFont({
        "DejaVu Sans":
            "GenShinGothic-Regular.ttf",
    });
</script>

<style>
.k-widget {
    font-family: "DejaVu Sans";
}
</style>

Regards,

Nikolay

[Kumeri]

Even though I tried this solution, it didn't resolve the issue. Please provide a working Dojo example for this, not only the source code part. 

[Neli]

Hi Kumeri,

In the screencast linked here you will see the exported file on my side. As demonstrated the font is exported as expected. 
Could you please let me know what is the exact behavior on yor side and how it can be replicated locally. 

Looking forward to your reply.  

Regards,

 

Neli