Search code examples
javascriptreactjsjspdfhtml-pdfnode-html-pdf

How can i use braille fonts in jsPDF or similar libs?

When I convert 'html' file into pdf, my braille text don't appears. Instead, appears "(((((((".[enter image description here](https://i.sstatic.net/z4czk.png)

function generatePDF(){

    var doc = new jsPDF('p', 'pt', 'a4');
    const myFont = './assets/BrailleNormal-lLDX.ttf'; // load the *.ttf font file as binary string


    // add the font to jsPDF
    doc.addFileToVFS("MyFont.ttf", myFont);
    doc.addFont("MyFont.ttf", "MyFont", "normal");
    doc.setFont("MyFont");
    
    doc.html(document.querySelector('#content'), {
      callback: function(pdf){
        console.log(pdf);
        pdf.save('file.pdf');
      }
    })
  }

I tried to find a way to import braille font in jspdf, but I have no success. I also tried to import some google fonts too

Solution

  • Later edit there appears to be a current problem with some fonts when displayed by MS Edge rather than say Firefox. Here is current rendering Firefox on left MS Edge on right. The same file in Acrobat shows it is NOT a jsPDF failure "!" Current Chrome Browser seems OK Version 122.0.6261.95 (Official Build) so it is an Adobe Acrobat fail in Edge across several versions tested in 122.0.2365.59 - 122.0.2365.66 (Official build)

    enter image description here

    Generally jsPDF needs data to be inline (on page) this avoids CORS issues so you need to inspect the browser console as to what is being blocked.

    However jsPDF has an ability to use virtual fonts imported as text, so for braille we can convert roughly like this:- sorry could not add bigger braille1 so spot the difference in !

    <!DOCTYPE html>
<HTML>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>

<body>
  Hi click me
  <script>
    window.jsPDF = window.jspdf.jsPDF;
    var doc = new jsPDF();

    //  folowing raises local CORS fileloading.js:75 error
    // doc.addFont("./BrailleNormal-lLDX.ttf", "Braille", "normal");
    //  Access to XMLHttpRequest at 'file:///BrailleNormal-lLDX.ttf' from origin 'null' has been blocked by CORS policy:
    //  Cross origin requests are only supported for protocol schemes:
    //  http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

    // Simplistic inline standalone method is embed the font data here using a braille 2.3 font.

    var braille = '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eABiAHUAcgB5ACAAUwB5AHMAdABlAG0AcwA6ACAAQgByAGEAaQBsAGwAZQAgADEAMAAwACUAIABSAGUAZwB1AGwAYQByADoAIAAyADAAMQA4AFYAZQByAHMAaQBvAG4AIAAyAC4AMwA7ACAARABlAGMAZQBtAGIAZQByACAAMQAwACwAIAAyADAAMQA4AEIAcgBhAGkAbABsAGUAAAIAAAAAAAD/zwAMAAAAAQAAAAAAAAAAAAAAAAAAAAAAYQAAAAEAAwECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+AT8BQAFBAUIBQwFEAUUBRgFHAUgBSQFKAUsBTAFNAU4BTwFQAVEBUgFTAVQBVQFWAVcBWAFZAVoBWwFcAV0BXgFfBVBkb3QxBVBkb3QyBVBkb3QzBVBkb3Q0BVBkb3Q1BVBkb3Q2B1Bkb3RzMTIHUGRvdHMxMwdQZG90czIzCFBkb3RzMTIzB1Bkb3RzMTQHUGRvdHMyNAhQZG90czEyNAdQZG90czM0CFBkb3RzMTM0CFBkb3RzMjM0CVBkb3RzMTIzNAdQZG90czE1B1Bkb3RzMjUIUGRvdHMxMjUHUGRvdHMzNQhQZG90czEzNQhQZG90czIzNQlQZG90czEyMzUHUGRvdHM0NQhQZG90czE0NQhQZG90czI0NQlQZG90czEyNDUIUGRvdHMzNDUJUGRvdHMxMzQ1CVBkb3RzMjM0NQpQZG90czEyMzQ1B1Bkb3RzMTYHUGRvdHMyNghQZG90czEyNgdQZG90czM2CFBkb3RzMTM2CFBkb3RzMjM2CVBkb3RzMTIzNgdQZG90czQ2CFBkb3RzMTQ2CFBkb3RzMjQ2CVBkb3RzMTI0NghQZG90czM0NglQZG90czEzNDYJUGRvdHMyMzQ2ClBkb3RzMTIzNDYHUGRvdHM1NghQZG90czE1NghQZG90czI1NglQZG90czEyNTYIUGRvdHMzNTYJUGRvdHMxMzU2CVBkb3RzMjM1NgpQZG90czEyMzU2CFBkb3RzNDU2CVBkb3RzMTQ1NglQZG90czI0NTYKUGRvdHMxMjQ1NglQZG90czM0NTYKUGRvdHMxMzQ1NgpQZG90czIzNDU2C1Bkb3RzMTIzNDU2BVBET1Q0BVBET1QxB1BET1RTMTIHUERPVFMxNAhQRE9UUzE0NQdQRE9UUzE1CFBET1RTMTI0CVBET1RTMTI0NQhQRE9UUzEyNQdQRE9UUzI0CFBET1RTMjQ1B1BET1RTMTMIUERPVFMxMjMIUERPVFMxMzQJUERPVFMxMzQ1CFBET1RTMTM1CVBET1RTMTIzNApQRE9UUzEyMzQ1CVBET1RTMTIzNQhQRE9UUzIzNAlQRE9UUzIzNDUIUERPVFMxMzYJUERPVFMxMjM2CVBET1RTMjQ1NglQRE9UUzEzNDYKUERPVFMxMzQ1NglQRE9UUzEzNTYIUERPVFMyNDYJUERPVFMxMjU2ClBET1RTMTI0NTYHUERPVFM0NQABuwAHAAYABgDoGXBFaLwAAgACARQABgAFJUQYcEVoYEQAuwAIAAoACgA5GXBFaLwABQAFARQACgAFJUQYcEVoIIpgILgACSNEYES0HhsZExFLUlixCwArG0tSWLENACsbS1JYsQsAKxtLUlixDQArG0tSWLEMACtZWVlZWSIAAA==';


    doc.addFileToVFS("braille-normal.ttf", braille);
    doc.addFont("braille-normal.ttf", "braille", "normal");


    doc.setFontSize(40);

    var dualText = "Hello Blind World!";

    doc.text(dualText, 50, 50);

    doc.setFont("braille"); // set custom font

    doc.text(dualText, 10, 70);

    doc.save("a4.pdf"); // will save the file in the current working directory
  </script>
</body>

</HTML>
    Sorry embeded Snippet may not work in browser, but makes it easier to cut and paste.

    enter image description here

    Braille 2.3 (NOT Braille1) gives this result (Hello Blind World"the") according to Wikipedia which is clearly to my eyes WRONG ?

    enter image description here

    For French accents see https://abracadabraille.org/le-braille shows which characters cover French accents but you need a keyboard map to know which key produces those dots and that can be difficult to find without a blind person to proof check the results!

    The French Braille alphabet consists of the 26 letters of the ordinary alphabet to which are added 14 signs: 12 accented letters, the c cedilla "ç" and the bound oe "œ". Indeed, it is impossible, in Braille, to add a cedilla to the c or an accent to the vowels. The accented letters as well as the cedilla are therefore letters in their own right.