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 "
b" for "
2"... prefixed with a special character
- Punctuation signs use more special characters
Now, we can call it to generate longer translations like "
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.
- 8th December, 2016: Initial version