Click here to Skip to main content
11,920,701 members (56,430 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked

See your name in Braille

, 2 Apr 2007 MIT
Rate this:
Please Sign up or sign in to vote.
Simple Javascript to display Braille in web pages using pictures


This article offers some JavaScript to display Braille in your web pages. It can be used to familiarize sighted people with the Braille system, not for real Braille transcription (that would be a much bigger project).

In its simplest form (Grade 1) Braille is just a different character set:

Screenshot - BrailleAlphabet.gif

Displaying Braille using pictures and JavaScript

From the table above, we can easily display a Braille translation of any text by using one picture per character. It is even easier when we call each picture by the name of the character it represents.

The following quick and dirty JavaScript will do the trick.

function SimpleBraille(message) 
    var myHTML = ""; 
    for (var i=0; i<message.length; i++) 
        if (message.charAt(i)==" ")
            myHTML += "<IMG  SRC=\"braillepix/sp.gif\">";
            myHTML += "<IMG SRC=\"braillepix/" + message.charAt(i).
                toLowerCase() + ".gif\">";
    return myHTML;

Improving the JavaScript

Of course, this was an over-simplification to demonstrate the way it works. Let's now make a few improvements the code.

There are a few extra rules we should add to our script

  • Uppercases must be prefixed by a special Braille character
  • Numbers are displayed using "a" for "1", "b" for "2"... prefixed with a special character
  • Punctuation signs use more special characters

While we are at it, we can also optimize the code

  • Let's add the "ALT" attribute in the generated "IMG" tags, to see the translation of each character on mouse-over.
  • Let's use and array, push and join instead of string concatenation, so it will be much faster.

The improved JavaScript function is now much longer but will produce more accurate Braille.

function Braille(message) 
    var brailleArr = []; 
    var myChar, prevCharNum, inQuote

        function BrailleChar(bPix,bAlt) 
        return ["<IMG HEIGHT=27 WIDTH=19 vspace=5 hspace=1 SRC=\"braillepix/", 
            bPix, ".gif\" ALT=\"", bAlt, "\">"].join("");

    for (var i=0; i<message.length; i++) 
        myChar = message.charAt(i);
        if ((myChar>="a") && (myChar<="z")) 
        {       // a to z
            brailleArr.push(BrailleChar(myChar, myChar));
            prevCharNum = false;            
        } else if((myChar>="A") && (myChar<="Z")) 
        {       // A to Z
            brailleArr.push(BrailleChar("cap", "Caps"));
            brailleArr.push(BrailleChar(myChar, myChar));            
            prevCharNum = false;         
        } else if((myChar>"0") && (myChar<="9")) 
            if (!prevCharNum)
                brailleArr.push(BrailleChar("num", "Number"));
                charCodeAt(0) + 48), myChar)); 
            prevCharNum = true;            
        } else 
            switch (myChar) 
            case " ": 
                brailleArr.push(BrailleChar("sp", "Space"));
                prevCharNum = false;
            case "0":
                if (!prevCharNum)
                    brailleArr.push(BrailleChar("num", "Number")); 
                brailleArr.push(BrailleChar("j", "0"));      
                prevCharNum = true;
            case "\n":
                nbCharsInLine = -1;
                prevCharNum = false;
            case ".":
                if (prevCharNum)
                    brailleArr.push(BrailleChar("dec", ".")); 
                    brailleArr.push(BrailleChar("period", "."));  
            case "$":
                brailleArr.push(BrailleChar("period", "$"));
                prevCharNum = false;
            case "%":
                brailleArr.push(BrailleChar("col", "%"));
                brailleArr.push(BrailleChar("p", ""));
                prevCharNum = false;
                case "'":
                    brailleArr.push(BrailleChar("qs", "'")); 
                    prevCharNum = false;
            case ",":
                brailleArr.push(BrailleChar("comma", ","));
                prevCharNum = false;
            case "?":
                brailleArr.push(BrailleChar("qu", "?")); 
                prevCharNum = false;
            case "(":
            case ")":
                brailleArr.push(BrailleChar("par", "parenthesis")); 
                prevCharNum = false;
            case "*":
                brailleArr.push(BrailleChar("ast", "*"));
                brailleArr.push(BrailleChar("ast", "*")); 
                prevCharNum = false;
                case "//":
                    brailleArr.push(BrailleChar("sla", "//")); 
                    prevCharNum = false;
            case "!":
                brailleArr.push(BrailleChar("ex", "!")); 
                prevCharNum = false;
                case "'": 
                    if (inQuote)
                        brailleArr.push(BrailleChar("qc", "Close Quote")); 
                        brailleArr.push(BrailleChar("qo", "Open Quote"));  
                    inQuote = !inQuote;
                    prevCharNum = false;
            case ":":
                brailleArr.push(BrailleChar("col", ":"));
                prevCharNum = false;
            case ";":
                brailleArr.push(BrailleChar("sc", ";")); 
                prevCharNum = false;
            case "[":
                brailleArr.push(BrailleChar("cap", "["));
                brailleArr.push(BrailleChar("par", ""));
            case "]":
                brailleArr.push(BrailleChar("par", "]"));
                brailleArr.push(BrailleChar("qs", "")); 
    return brailleArr.join("");

I'm not a Braille expert, but I know there are other rules that could be added. There is still room for improvement.

Using the code

The JavaScript is rather straight forward and simple enough to work on any browser. What took a while was making the pictures of all the different Braille characters, but don't worry these are included in the download, and they even come in three different flavors. Simply change the directory name in the JavaScript to use the set of pictures you prefer.

Screenshot - braille-black.gifBlack

Screenshot - braille-3d.gif3D

Screenshot - braille-big.gifBig

Using the Braille function, we can display the classic "Hello World" as follow:

document.write(Braille("Hello World"));

Otherwise, you may use it to show your users how their name looks like in Braille.

Screenshot - seeyourname.gif

Try this code live at EvolUtility

Eventually, if you really want to learn Braille, I recommend starting with the book Braille for the Sighted from Schneider, and Kathy Kifer. Enjoy.


This article, along with any associated source code and files, is licensed under The MIT License


About the Author

Olivier Giulieri
United States United States
I'm a UI engineer for a startup in California. What I really enjoy is to build tools to describe UI in metadata, store that metadata (outside of the code) in a database, XML or JSON, and then dynamically generate the UI at run-time based on that metadata... which I do with my open source project Evolutility.

My articles on the topic:

My GitHub is Evoluteur.

You may also be interested in...

Comments and Discussions

GeneralBraille Poland Pin
robert.michal29-Jun-14 6:00
memberrobert.michal29-Jun-14 6:00 
GeneralRe: Braille Poland Pin
Olivier Giulieri8-Jul-14 10:49
memberOlivier Giulieri8-Jul-14 10:49 
QuestionConvert from braille to text using matlab Pin
dinh van phuc21-Jan-13 16:30
memberdinh van phuc21-Jan-13 16:30 
QuestionThank you!! Pin
Member 960893318-Nov-12 3:33
memberMember 960893318-Nov-12 3:33 
AnswerRe: Thank you!! Pin
Olivier Giulieri18-Nov-12 18:18
memberOlivier Giulieri18-Nov-12 18:18 
GeneralFun w/ Braille - Fun w/ Morse Pin
Evoluteur2-Jun-10 23:07
memberEvoluteur2-Jun-10 23:07 
Questionhtml code Pin
Nohamanuna20-Feb-10 20:50
memberNohamanuna20-Feb-10 20:50 
GeneralReversed Braille Pin
Guy Winters26-Jan-08 15:12
memberGuy Winters26-Jan-08 15:12 
GeneralRe: Reversed Braille Pin
Olivier Giulieri27-Jan-08 13:14
memberOlivier Giulieri27-Jan-08 13:14 
GeneralRe: Reversed Braille Pin
Member 1109858521-Sep-14 8:25
memberMember 1109858521-Sep-14 8:25 
QuestionA question on the application's usability Pin
volkan.ozcelik11-Apr-07 22:59
membervolkan.ozcelik11-Apr-07 22:59 
AnswerRe: A question on the application's usability Pin
Olivier Giulieri12-Apr-07 8:23
memberOlivier Giulieri12-Apr-07 8:23 
AnswerRe: A question on the application's usability Pin
Olivier Giulieri12-Apr-07 20:31
memberOlivier Giulieri12-Apr-07 20:31 
GeneralThank you! Pin
araud9-Apr-07 19:43
memberaraud9-Apr-07 19:43 
GeneralRe: Thank you! Pin
Olivier Giulieri9-Apr-07 21:42
memberOlivier Giulieri9-Apr-07 21:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151120.1 | Last Updated 2 Apr 2007
Article Copyright 2007 by Olivier Giulieri
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid