Chinese Support

[Hamed]

The issue is coming with Kendo UI PDF Generator. When we are trying to take print of text containing Chinese data then in pdf it showing as blocks. But when we copy that blocks text and paste it somewhere it is in Chinese.

Operating system : Ubuntu

So how to resolve this issue.

I have attached the image of the PDF which is being generated.

[Dimiter Topalov]

Hi Fazil,

The described issue seems to be caused by missing fonts for the PDF export:

https://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/unicode-chars/

https://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/embedded-fonts/

However, please note the following documented limitations of the PDF export functionality (more specifically - exporting right-to-left languages to PDF is not supported):

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export/#toc-known-limitations

https://www.telerik.com/kendo-angular-ui/components/drawing/limitations-browser-support/#toc-general-behavior

Regards,
Dimiter Topalov
Progress Telerik

[Hamed]

Hi Dimiter Topalov,

We implemented the suggestion given but still the issue is not solved. Please suggest any other solution. 

Regards

Fazil

 

 

[Dimiter Topalov]

Hello Fazil,

As long as there is a TTF (true type font) that contains glyphs for all characters, rendered on the page, loaded, the PDF is exporting the page as expected. I prepared a sample application demonstrating the described approach (find attached):

<style>
    @font-face {
      font-family: "SimSun";
      src: url("./assets/SimSun-01.ttf") format('truetype');
    }

    .foo {
      font-family: "SimSun";
    }
  </style>

<kendo-pdf-export #pdf margin="2cm">
      <p class="foo">我看著暴風雨，美不勝收卻也驚心動魄。</p>
    </kendo-pdf-export>

You can run and inspect the sample app, compare it to your implementation, and apply the necessary adjustments.

There is no other approach for exporting Unicode characters, but to register and embed the desired font that supports them, as previously discussed, and demonstrated in the attached sample app.

Regards,
Dimiter Topalov
Progress Telerik

[Hamed]

Hi Dimiter Topalov,

Thank you for suggestion. We implemented the suggestion and it is working for Chinese. But we are facing issues with Arabic version of Application. Before it was working properly in Arabic but with these fonts the application is not working for Arabic. Please suggest any font which is suitable for all languages.

Regards

Fazil

 

[Dimiter Topalov]

Hi Fazil,

You can declare all required fonts (separate fonts for Arabic and Chinese) and the respective one will be used based on which part of the application is exported, or both will be used simultaneously, for example:

<kendo-pdf-export #pdf margin="2cm">
      <p class="foo">我看著暴風雨，美不勝收卻也驚心動魄。</p>
      <p class="bar">خَلْقَ خَوْدٍ كَمِثْلِ الشَّمْسِ إِذْ بَزَغَتْ</p>
    </kendo-pdf-export>

@font-face {
      font-family: "SimSun";
      src: url("./assets/SimSun-01.ttf") format('truetype');
    }

     @font-face {
      font-family: "DejaVu Sans";
      src: url("https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
    }
    @font-face {
      font-family: "DejaVu Sans";
      font-weight: bold;
      src: url("https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
    }
    @font-face {
      font-family: "DejaVu Sans";
      font-style: italic;
      src: url("https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
    }
    @font-face {
      font-family: "DejaVu Sans";
      font-weight: bold;
      font-style: italic;
      src: url("https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
    }

    .foo {
      font-family: "SimSun";
    }

    .bar {
      font-family: "DejaVu Sans";
    }

I updated the sample application accordingly (find attached).

Typically we abstain from recommending specific fonts, as often fonts are subject to specific licensing and there is no universal font family that satisfies varying scenario and layout requirements - all developers and designers have their own vision and preferences regarding the fonts used in their applications.

As far as the Kendo UI for Angular PDFExport functionality is concerned, a single font (or multiple fonts) that support all the glyphs that need to be exported, should be declared and loaded as previously discussed.

Regards,
Dimiter Topalov
Progress Telerik

[Trung]

Hi Dimiter!

Sorry for digging this post after long time, but I need your help, can you please suggest me any font for Thai language? I tried you demo with Japanese and Chinese,it's all success but when I replace Thai language, the font generate not correct.

[Dimiter Topalov]

Hello Trung,

There are multiple Thai fonts, but choosing the right one for the application is in the hands of the developer and other project participants. The only requirements for the Kendo UI for PDF export to be working as expected are the font to be TTF, and to be included and declared in the application properly as described for the other languages below.

Here are some of the links I found in the Internet, but there are many more to choose from:

https://www.fontsquirrel.com/fonts/list/language/thai

http://www.fontsaddict.com/font/category/Thai

https://brushez.com/thailand-ttf.html

The relevant Kendo UI for Angular documentation on embedding fonts and exporting Unicode characters:

https://www.telerik.com/kendo-angular-ui/components/pdfexport/embedded-fonts/

https://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/embedded-fonts/#toc-embedded-fonts

As mentioned in the documentation, some fonts may require a separate license.

Regards,
Dimiter Topalov
Progress Telerik

[Umesh]

Problem Statement –
As part of previous ticket we raised on similar issue (Support ID:1487440) we went through thread of solutions under link à https://www.telerik.com/forums/chinese-support-f782d89604a0
We downloaded “SimSun” font from a zipped project mentioned under thread and used it locally to resolve our issue.

There are 2 things for which we are looking for support,
Can we get CDN Url for “SimSun”  font from Telerik for its use? This was the main reason why we also couldnt use it in Dojo. And is this font supported by Telerik ?
When we used this font (locally), we had success translating Chinese text outside the chart, however Chinese text on the chart remained untranslated. We have created a Dojo with both the types of text, also with image attached indicating which text we were facing problem with. We would want support to help translate the text we are facing issue with in the dojo.

Dojo URL - http://dojo.telerik.com/OBOZefEr/46

 

 

[Tsvetomir]

Hi Umesh,

I have already responded in a duplicate thread of yours in our official Support System. It is important to point out that we recommend avoiding the submission of duplicate tickets as this might pollute your history and make the search for past tickets more difficult.

Since the response might be beneficial for our community, I am pasting the response here as well:

The Kendo UI team provides exposure to a handful of fonts via a CDN, however, the SimSun is not currently on the list. You could integrate any font with the Kendo UI widgets and it is supported by the widgets. 

As per the actual appliance of the fonts, the Kendo UI uses SVG for rendering. Therefore, you should additionally add a CSS rule for the chart with the font family. Find more information in the following thread:

https://www.telerik.com/forums/setting-the-font-family-for-all-the-textual-elements-in-chart

 

Best regards,
Tsvetomir
Progress Telerik