We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add Fonts for Annotations and change tooltips

I'm currently using version 20.3.49 and I would like to add/change fonts to the annotation toolbar for free text. I am also trying to change the tooltips for some of the toolbar items. Is there a way that I can add/change those? I couldn't find anything about it in the documentation.


5 Replies

VV Visvesvar Venkatesan Syncfusion Team October 18, 2022 09:11 AM

Hi Juliet,



Kindly find the sample for free text for changing the font properties programmatically. You can also change in UI level.


Sample - https://stackblitz.com/edit/react-6npsxa-rq1rql?file=index.html


Kindly find the documentation for tool tip - https://ej2.syncfusion.com/javascript/documentation/pdfviewer/how-to/display-custom-tool-tip-for-annotations/

To change the font family in free text apart from the provided fonts. You can change like the below example one


We don’t have direct support saving the custom font style for text annotation along with pdf files. So while saving the document we have embed the font with annotation on the action itself.


        public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)

        {

            //Initialize the PDF Viewer object with memory cache object

            PdfRenderer pdfviewer = new PdfRenderer(_cache);

            string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);

            string base64Data = documentBase.Split("base64,")[1];


            byte[] document1 = Convert.FromBase64String(base64Data);

            PdfLoadedDocument ldoc = new PdfLoadedDocument(document1);

            for (int i = 0; i < ldoc.Pages.Count; i++)

            {

                PdfLoadedPage lpage = ldoc.Pages[i] as PdfLoadedPage;

                for (int j = 0; j < lpage.Annotations.Count; j++)

                {

                    PdfLoadedFreeTextAnnotation lAnnot = lpage.Annotations[j] as PdfLoadedFreeTextAnnotation;

                    if (lAnnot != null)

                    {

                        if (IsThaiCharacter(lAnnot.MarkUpText))

                        {

                            FileStream fontStream = new FileStream(GetDocumentPath("tahoma.ttf"), FileMode.Open);

                            lAnnot.Font = new PdfTrueTypeFont(fontStream, lAnnot.Font.Size);

                            lAnnot.ComplexScript = true;

                            lAnnot.SetAppearance(true);

                        }

                    }

                }

            }

            MemoryStream stream = new MemoryStream();

            ldoc.Save(stream);

            string base64string = Convert.ToBase64String((stream as MemoryStream).ToArray());

            ldoc.EnableMemoryOptimization = true;

            ldoc.Close(true);

            ldoc.EnableMemoryOptimization = true;

            ldoc.Close(true);

            stream.Dispose();

            return Content("data:application/pdf;base64," + base64string);

        }


We have iterated all the free text annotations from all the pages and embedded the corresponding font file to the specific annotation. The same you can include another custom font also. Please find the attached sample for your reference.


Sample - https://www.syncfusion.com/downloads/support/directtrac/general/7z/PdfViewerWebService_3.0-957482172.7z



Regards,

Visvesvar K V



JK Juliet King October 18, 2022 09:20 AM

I actually want to change the options that the free text can be, so that the user would be able to choose those values. I want to change the drop down options for this:


As for the annotation tooltips, I want to change the tooltips for the toolbar, so in this area:



VV Visvesvar Venkatesan Syncfusion Team October 19, 2022 05:56 AM

Hi Juliet,


Sorry, we don't have support for your requirement. We cannot change those dropdown values and we cannot change the tooltips that has been mentioned by you. 


Free text annotations font can be changed programmatically. We have already provided a sample for that in the previous response.


Regards,

Visvesvar K V 



JK Juliet King November 3, 2022 09:15 AM

I was able to figure out how to change the font. You can update the data source for fontFamily in the created function: 


  function created(args) {
    pdfviewer.toolbar.annotationToolbarModule.fontFamily.dataSource =
      fonts.map((val) => ({ FontName: val.text }));
  }


VV Visvesvar Venkatesan Syncfusion Team November 7, 2022 07:57 AM

Than you for your update.


Loader.
Live Chat Icon For mobile
Up arrow icon