Click here to Skip to main content
14,879,631 members
Articles / Web Development / HTML
Article
Posted 2 Apr 2007

Stats

89.1K views
580 downloads
22 bookmarked

See Your Name in Braille

Rate me:
Please Sign up or sign in to vote.
4.87/5 (22 votes)
10 May 2019MIT2 min read
Simple CSS and JavaScript to display Braille in web pages (for sighted people)

Introduction

This article offers some CSS and JavaScript to display Braille in your web pages. It can be used to familiarize sighted people with the Braille system. This project is not for real Braille transcription or screen-readers.

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

Screenshot - BrailleAlphabet

Check out the demo.

Displaying Braille using a CSS Sprite

From the table above, we can easily display a Braille translation of any text by using one image per character. For faster loading, we will use a CSS with class names for all characters and a single picture with sprites of all characters.

The HTML to display "Abc" in Braille can be:

HTML
<div class="br br-cap"></div>
<div class="br br-a"></div>
<div class="br br-b"></div>
<div class="br br-c></div>

Image 2

Using JavaScript to Make It Easier

We write a simple JavaScript function to generate the HTML. 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

Now, we can call it to generate longer translations like "Hello World".

HTML
document.write(br.braille('Hello World')

Image 3

For convenience, another function displays the alphabet.

HTML
document.write(br.alphabet())

Screenshot - BrailleAlphabet

Otherwise, you may use the library to show your users their name in Braille.

Image 5

Using the Code

It comes in 3 different styles:

Screenshot - braille-big.gif

Big

Screenshot - braille-black.gif

Small

Screenshot - braille-3d.gif

Small-3D

To include the CSS (replace "braille-big.css" by "braille-small.css" or "braille-small-3d.css"):

HTML
<link id="css" href="css/braille-big.css" rel="stylesheet">

Note that each CSS needs the image (of the same name) containing a sprite of the Braille alphabet.

To include the JavaScript:

HTML
<script src="js/braille-tools.js" type="text/javascript" charset="utf-8"></script>

Try this demo live at braille-tools on GitHub.

Another alternative to display Braille in web pages is to use a Braille web fonts.

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

History

  • 8th December, 2016: Initial version

License

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

Share

About the Author

Evoluteur
United States United States
I'm a UI engineer with an eye for UX and a passion for model-driven UIs.

I usually build UIs for startups in the San Francisco Bay Area.

My hobby open source project is Evolutility, a minimalist low-code platform with a model-driven UI, a model-driven backend, and a set of models to play with.

More about me on my GitHub page.

Comments and Discussions

 
QuestionJust to be picky Pin
Pete Lomax Member 1066450515-May-19 23:35
professionalPete Lomax Member 1066450515-May-19 23:35 
AnswerRe: Just to be picky Pin
Evoluteur20-Apr-20 20:19
MemberEvoluteur20-Apr-20 20:19 
GeneralMy vote of 5 Pin
tbayart13-May-19 1:14
professionaltbayart13-May-19 1:14 
GeneralBraille Poland Pin
robert.michal29-Jun-14 5:00
Memberrobert.michal29-Jun-14 5:00 
GeneralRe: Braille Poland Pin
Evoluteur8-Jul-14 9:49
MemberEvoluteur8-Jul-14 9:49 
QuestionConvert from braille to text using matlab Pin
dinh van phuc21-Jan-13 15:30
Memberdinh van phuc21-Jan-13 15:30 
QuestionThank you!! Pin
Member 960893318-Nov-12 2:33
MemberMember 960893318-Nov-12 2:33 
AnswerRe: Thank you!! Pin
Evoluteur18-Nov-12 17:18
MemberEvoluteur18-Nov-12 17:18 
GeneralFun w/ Braille - Fun w/ Morse Pin
Evoluteur2-Jun-10 22:07
MemberEvoluteur2-Jun-10 22:07 
Questionhtml code Pin
Nohamanuna20-Feb-10 19:50
MemberNohamanuna20-Feb-10 19:50 
GeneralReversed Braille Pin
Guy Winters26-Jan-08 14:12
MemberGuy Winters26-Jan-08 14:12 
GeneralRe: Reversed Braille Pin
Evoluteur27-Jan-08 12:14
MemberEvoluteur27-Jan-08 12:14 
GeneralRe: Reversed Braille Pin
Member 1109858521-Sep-14 7:25
MemberMember 1109858521-Sep-14 7:25 
QuestionA question on the application's usability Pin
volkan.ozcelik11-Apr-07 21:59
Membervolkan.ozcelik11-Apr-07 21:59 
AnswerRe: A question on the application's usability Pin
Evoluteur12-Apr-07 7:23
MemberEvoluteur12-Apr-07 7:23 
AnswerRe: A question on the application's usability Pin
Evoluteur12-Apr-07 19:31
MemberEvoluteur12-Apr-07 19:31 
GeneralThank you! Pin
araud9-Apr-07 18:43
Memberaraud9-Apr-07 18:43 
GeneralRe: Thank you! Pin
Evoluteur9-Apr-07 20:42
MemberEvoluteur9-Apr-07 20:42 
GeneralRe: Thank you! Pin
User 1106097911-May-19 2:36
MemberUser 1106097911-May-19 2:36 

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.