In its simplest form (Grade 1) Braille is just a different character set:
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:
<div class="br br-cap"></div>
<div class="br br-a"></div>
<div class="br br-b"></div>
<div class="br br-c></div>
- 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".
For convenience, another function displays the alphabet.
Otherwise, you may use the library to show your users their name in Braille.
Using the code
It comes in 3 different styles:
To include the CSS (replace "braille-big.css" by "braille-small.css" or "braille-small-3d.css"):
<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.
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.