1

When I convert 'html' file into pdf, my braille text don't appears. Instead, appears "(((((((".[enter image description here](https://i.stack.imgur.com/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

starball
  • 20,030
  • 7
  • 43
  • 238
Jansen
  • 13
  • 2

1 Answers1

1

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.

K J
  • 8,045
  • 3
  • 14
  • 36