How to add a native language font?

[Live]

Hi nativescript team,

      I am planning to work an app using my native language MALAYALAM How can i do this?. I tried but not getting actual output

When i add malayalam text from Website it is working but when i add text from some pdf files it is not getting

can you help me or not

my html:

  <Label class="font" cssClass="Dyuthi" textWrap="true" text="നാടൊന്നാകെ നാടകത്തെ ഏറ്റെടുക്കുമ്പോള്‍

ഖസാക്കിന്റെ ഇതിഹാസം നാടകം മലയാള­നാടക­ചരിത്രത്തിലെ ഒരു സംഭവ­മാണ്–ഒരു ഗ്രാമം ഒത്തുചേര്‍ന്ന് നാടകം സൃഷ്ടിക്കുക. കുഞ്ഞുങ്ങള്‍­മുതല്‍ വൃദ്ധര്‍വരെ അഭിനേതാ­ക്കളാകുക, നാടക­ത്തിനായി ഗ്രാമ­ത്തിലെ എല്ലാ കുടുംബ­ങ്ങളും മാസ­ങ്ങളോളം പണി­യെടുക്കുക. അടുത്ത­കാലത്തൊന്നും ഇത്തര­ത്തിലൊരു സംഘാടന­മുണ്ടായിട്ടില്ല. അവ­തരണ­ത്തിലും നാടകം ശ്രദ്ധയാ­കര്‍ഷിച്ചു. ഇന്ത്യയുടെ വിവിധ­ഭാഗങ്ങളില്‍നിന്ന് നാടകാ­സ്വാദകര്‍ ഖസാക്ക് കാണാന്‍ തൃക്കരിപ്പൂരി­ലെത്തി. അന്തര്‍­ദേശീയ­പ്രശസ്തരായ നാടക­പ്രവര്‍ത്ത­കരുടെ പിന്തുണ­യോടെ തൃക്കരിപ്പൂര്‍ കെഎംകെ കലാ­സമിതി അവതരി­പ്പിക്കുന്ന നാടകം കൊടുങ്ങല്ലൂരില്‍ അരങ്ങേ­റുകയാണ് ഏപ്രില്‍ 1, 2, 3 തീയതികളില്‍.

{KŸ-I¿Øm-hns‚ BapJw..................................................................................................................... 7
{]km-[-I-°p-dn∏v.............................................................................................................................................. 9
]g-b-\n-b-Øn-s\mcp BapJw...................................................................................................................... 11
]©-{K-Ÿ-߃s°mcp BapJw................................................................................................................ 19
Dev]Øn................................................................................................................................................................. 27
thZ-]p-kvX-I-Ønse {][m\ DS-º-Sn-Iƒ.......................................................................................... 40
]cn-t—-Z\ F∂ AS-bmfw........................................................................................................................ 53
kzh¿§-cXn......................................................................................................................................................
1 Zn\hrØm¥w................................................................"></Label>

 

 

my css :

.Dyuthi
 {
  font-family: 'Dyuthi';
  font-style: normal;
  font-weight: 400;
}

.font {
  font-family: 'Dyuthi';
  color: green;
}

fonts/Dyuthi.ttf or fonts/karthika.ttf etc

 

How will get actual output?

 

[Nick Iliev]

Hello Live Program team,

As far as I understood your issue is that you can read and load text in Malayalam when it comes from other text or HTML resources, but when you try to open PDF file written in Malayalam it fails to decode the text as expected. If that is the case, the problem is not in the language encoding but in the encoding used to create PDF files. 

One of the possible solutions is to handle the conversion of the PDF to text via JavaScript/TypeScript before loading the text in your application. Multiple threads suggest how to parse PDF file to text in javaScript.

Another solution is to load the PDF file directly using the nativescripty-pdf-view plugin. It works just like a web-view - it simply loads the whole file in a predefined layout.
For example:

tns plugin add nativescript-pdf-view

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:pdf="nativescript-pdf-view" navigatingTo="navigatingTo">
    <StackLayout class="p-20">
        <Label text="Malayalam text  and PDF test" class="h1 text-center"/>
        <Label text="«ഗുരുഗീത അര്‍ത്ഥസഹിതം " class="h2 text-center" textWrap="true"/>
        <pdf:PDFView src="{{ pdfUrl }}" load="{{ onLoad }}"/>
    </StackLayout>
</Page>

Sample application demonstrating the usage of pdf-view plugin can be found here.


Regards,
Nikolay Iliev
Telerik by Progress

[Live]

Hi Nikolay

     This article also useful for us but i asked another question

{KŸ-I¿Øm-hns‚ BapJw..................................................................................................................... 7
{]km-[-I-°p-dn∏v.............................................................................................................................................. 9
]g-b-\n-b-Øn-s\mcp BapJw...................................................................................................................... 11
]©-{K-Ÿ-߃s°mcp BapJw................................................................................................................ 19
Dev]Øn................................................................................................................................................................. 27
thZ-]p-kvX-I-Ønse {][m\ DS-º-Sn-Iƒ.......................................................................................... 40
]cn-t—-Z\ F∂ AS-bmfw........................................................................................................................ 53
kzh¿§-cXn......................................................................................................................................................
1 Zn\hrØm¥w................................................................"

this also malayalam language i copied from my pdf file and pasted to my label but ui comes like this because of font issue.. How can i fix? how can i include my malayalam font in to my entire page? is it possible?

[Nick Iliev]

Hi there,

From what I understand you are trying to paste text written in Malayalam, but it is not recognised. Now I am not sure from what source your are pasting your text (All I see in the ticket is already broken format) but to your text to be recognised it must be Unicode characters and your label should have a CSS style applied that has font-family with a Malayalam font set up.

However, the problem is not in the font or NativeScript but n the content you paste - it is most likely not in Unicode format but a format that the PDF uses.So it won't work with copy and paste. Some PDF are protected and even if not they are still using different coding table for the characters. You can search for a third party tool to convert your PDF to text and once that is done to paste your Unicode text in your label. Note that if the PDF is protected the parsing to text might not work at all.

Sample applications for extracting PDF can be found in npm (not tested by me - should be used outside NativeScript just to obtain the wanted content) here and here

Regards,
Nikolay Iliev
Telerik by Progress