Multiple languages (fonts) in one pdf. How?

[german-st]

Hello.

I have a report that is uploaded to pdf. The report contains mixed data. For example: I might have a string in English and a string in Arabic. (names of people) An important point is that I do not know in advance which strings can be English and which Arabic (

How can this be implemented? I can connect the Arabic font, but in this case the English will stop working. And vice versa.

Is it possible to somehow specify both fonts and generate the correct pdf ?

Thanks in advance.

If enable arabic font:

If enable standard font:

[liborm85]

Answered here: https://github.com/bpampuch/pdfmake/issues/1812#issuecomment-533879856 and https://github.com/bpampuch/pdfmake/issues/2163#issuecomment-755369830

[german-st]

Answered here: #1812 (comment) and #2163 (comment)

@liborm85

Thanks. It does not solve my problem ( if I setting two different fonts in styles, then I cannot show both in the template, because I do not know in advance whether English or Arabic will come in this line. Also my template implies a table in which the labels are in English and the field values may already be in Arabic

Moreover, I may have a mixed string, where some of the text will be English and some will be Arabic. How to be in this case? (

Example:

[liborm85]

Attach runnable example for reproduce issue.

[german-st]

Attach runnable example for reproduce issue.

@liborm85 Here. Thanks, I hope for your help

[d0xish]

On the same issue, why doesn't this work properly in the pdfmake playground? The first font displays but the Japanese font doesn't. (https://i.vgy.me/8kAMfM.png)

pdfMake.fonts = {
   Src_Code: {normal: 'https://cdn.jsdelivr.net/npm/source-code-pro@2.30.2/TTF/SourceCodePro-Regular.ttf'},
   NotoSans: {normal: 'https://cdn.jsdelivr.net/npm/notosans-fontface@1.2.2/fonts/NotoSans-Regular.ttf'}}
var dd = {
  content: [
    {
      text: 'This is Source Code Pro. The text below should be in Japanese.',
      font: 'Src_Code'
    },{
      text: 'わたしは　にほんごがすこししか　はなせません。',
      font: 'NotoSans'
    }]}

[liborm85]

Is required font with support arabic characters. Working example:

pdfMake.fonts = {
   Src_Code: {normal: 'https://cdn.jsdelivr.net/npm/source-code-pro@2.30.2/TTF/SourceCodePro-Regular.ttf'},
   Vazir: {normal: 'https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v27.2.2/dist/Vazir-Regular.ttf'}}
var dd = {
  content: [
    {
      text: 'This is Source Code Pro. The text below should be in Japanese.',
      font: 'Src_Code'
    },{
      text: 'كيريل',
      font: 'Vazir'
    }]}

[german-st]

Attach runnable example for reproduce issue.

@liborm85 Here. Thanks, I hope for your help

Hello

Any ideas?

Thank's

[liborm85]

Is required font with support arabic characters.

[german-st]

Is required font with support arabic characters.

I understand. Maybe you know how to solve the problem if we don't know in advance what language is in the string? Or the string consists of two languages at once. That is, we do not know in advance what font is needed for it. How to be in this case?

Example (two lang in text):

{
  "text": "كيريل_Bond",
  "width": 211,
  "style": [
    "html-td",
    "html-tr",
    "html-tbody",
    "html-table",
    "html-div",
    "block222",
    "tdData"
  ]
}

[liborm85]

For multiple fonts in one text you can use inline styling, see documentation. Developer must specify the correct font.

[german-st]

Hope it helps someone.

To make a report with mixed languages. We connect the fonts we need. We indicate them in the styles described by us.

Further, when forming the html template, I detect the line to which language it belongs and, depending on this, I apply the style with the desired font. The fonts are pre-downloaded and placed in the /fonts folder

Example:

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  DroidKufi: {
    normal:  addr+'/fonts/DroidKufi/DroidKufi-Regular.ttf',
    bold: addr+'/fonts/DroidKufi/DroidKufi-Bold.ttf',
    italics: addr+'/fonts/DroidKufi/DroidKufi-Regular.ttf',
    bolditalics: addr+'/fonts/DroidKufi/DroidKufi-Regular.ttf',
  },
  Roboto: {
    normal: addr+'/fonts/Roboto/Roboto-Medium.ttf',
    bold: addr+'/fonts/Roboto/Roboto-Bold.ttf',
    italics: addr+'/fonts/Roboto/Roboto-Italic.ttf',
    bolditalics: addr+'/fonts/Roboto/Roboto-ThinItalic.ttf'
  }}

  //doc definition
   var docDefinition = {
        pageOrientation: 'landscape',
        pageSize: 'A4',
        content: [
         //Content from htmlpdfmake by HTML template
        ],
        styles:{
          greenFont:{ 
            color:'#005745'
          },
          arabicFont: {
            font: 'DroidKufi'
          },
          rowcolor :{
            background: 'red'
          }
        }
     }

    //In generate html template code
    //helpers functions

    function detectLang(text) {
    let lang = "ENG";

    if (/[A-Z]|[a-z]/g.test(text)) {
        lang='ENG';
    }

    if (/[ء-ي]/gi.test(text) || /[گچپژیلفقهمو ء-ي]/gi.test(text) || /[\u0600-\u06FF]/gi.test(text)) {
        lang='ARA';
    }

    if (lang === 'ARA') {
        return true;
    }
    else return false;
}

    let nameIsArabic = detectLang(firstName);

    //In html template apply the style if the text is in Arabic otherwise default
    <span className={nameIsArabic ? 'arabicFont' : ''}> {firstName}</span>

[hijarian]

@german-st Yep, only two options for you:

1. detect charset of the text block by yourself and style it with specific font (as you do)
2. use the font which supports the glyphs from all the languages you are going to output.

[imPrashik]

try using "Arial_Unicode_MS", this font supports many languages.

WikiPedia