transform normal text into cross-platform calligraphy using Unicode's Bold Fraktur

transform normal text into cross-platform calligraphy using Unicode's Bold Fraktur

Georgios Lazaridis
Coding, art, science

javascript letters to unicode mapping code.

If you didn’t know yet Unicode stands for the biggest sign library that ever existed!

Unicode is an information technology standard for the consistent encoding, representation, and handling of text expressed in most of the world’s writing systems. The standard is maintained by the Unicode Consortium, and as of March 2020, there is a repertoire of 143,859 characters as of Unicode 13.0 ~ Wiki

So no wonder it contains such stylisticaly rare letters, the best part is that because they are an information standard almost every device supports them, and you can send them even in SMS as well as post them on different social media platforms (as some fancy users do). I suggest impressing your mum with a beutiful SMS message ;)

The project was created on glitch, as part of the classes.

instructions: click enter the text in the upper box, then click the button to copy the calligraphy! Its worth to notice that setting a password with that way encoded chars will be super strongly safe, see what happens when you paste the font into password input boxes ;)

If you are interested, below is the source code of the javascript responsible for the mapping, copying and refreshing the boxes:

     let a = "\uD835\uDD86";   let A = "\uD835\uDD6C";     
     let b = "\uD835\uDD87";   let B = "\uD835\uDD6D";
     let c = "\uD835\uDD88";   let C = "\uD835\uDD6E";
     let d = "\uD835\uDD89";   let D = "\uD835\uDD6F";
     let e = "\uD835\uDD8A";   let E = "\uD835\uDD70";
     let f = "\uD835\uDD8B";   let F = "\uD835\uDD71";
     let g = "\uD835\uDD8C";   let G = "\uD835\uDD72";
     let h = "\uD835\uDD8D";   let H = "\uD835\uDD73";
     let i = "\uD835\uDD8E";   let I = "\uD835\uDD74";
     let j = "\uD835\uDD8F";   let J = "\uD835\uDD75";
     let k = "\uD835\uDD90";   let K = "\uD835\uDD76";
     let l = "\uD835\uDD91";   let L = "\uD835\uDD77";
     let m = "\uD835\uDD92";   let M = "\uD835\uDD78";
     let n = "\uD835\uDD93";   let N = "\uD835\uDD79";
     let o = "\uD835\uDD94";   let O = "\uD835\uDD7A";
     let p = "\uD835\uDD95";   let P = "\uD835\uDD7B";
     let r = "\uD835\uDD97";   let R = "\uD835\uDD7D";
     let s = "\uD835\uDD98";   let S = "\uD835\uDD7E";
     let t = "\uD835\uDD99";   let T = "\uD835\uDD7F";
     let u = "\uD835\uDD9A";   let U = "\uD835\uDD80";
     let w = "\uD835\uDD9C";   let W = "\uD835\uDD82";
     let v = "\uD835\uDD9B";   let V = "\uD835\uDD81";
     let x = "\uD835\uDD9D";   let X = "\uD835\uDD83";
     let y = "\uD835\uDD9E";   let Y = "\uD835\uDD84";
     let z = "\uD835\uDD9F";   let Z = "\uD835\uDD85";

function change(){

       String.prototype.allReplace = function(obj) {
   var retStr = this;
   for (var x in obj) {
       retStr = retStr.replace(new RegExp(x, 'g'), obj[x]);
   }
   return retStr;
    };

  document.getElementById('out').innerHTML=(document.getElementById('writein').value
  .allReplace(
   {'a': a, 'b': b , 'c' : c, 'd':d,'e':e,'f':f,'g':g,'h':h,
    'i':i,'j':j,'k':k,'l':l,'m':m,'n':n,'o':o,'p':p,
   'r':r,'s':s,'t':t,'u':u,'w':w,'v':v,'x':x,'y':y,'z':z,

    'A':A, 'B':B,'C':C,'D':D,'E':E,'F':F,'G':G,'H':H,'I':I,
   'J':J,'K':K,'L':L,'M':M,'N':N,'O':O,'P':P,'R':R,'S':S,'T':T,
   'U':U,'W':W,'V':V,'X':X,'Y':Y,'Z':Z
   }

  ));



}


function onLoad(){

  let userinp = document.getElementById("writein").value;


  document.getElementById("out").innerHTML = userinp ;

  change();

}


function generate(){

  let userinp = document.getElementById("writein").value;

  document.getElementById("out").innerHTML = userinp ;

  change();


   }



function copy() {

       let call =  document.getElementById("out").value;
       let cops = document.getElementById('hidden').value = call;
       console.log(call);
       console.log(cops);

      let copyText = document.getElementById("hidden");
       copyText.value = cops;
       copyText.select();
       copyText.setSelectionRange(0, 99999);
       document.execCommand("copy");


       }