Braille-Tools
This library offers some CSS and Javascript to display Braille in web pages (for sighted people).
With the CSS you can easily display Braille characters.
3 styles of Braille: Big - Small - Small 3D
Add the Javascript to make it dynamic.
The goal of this project is to introduce sighted people to the Braille system. It doesn't help with screen readers and is not intended for serious Braille transcription.
Setup
To include the library in your web pages, first, load the CSS file (based on the style you want use "braille-big.css", "braille-small.css", or "braille-small-3d.css").<link href="css/braille-big.css" rel="stylesheet" type="text/css">You may not need to include the Javascript. If you do, use the following:
<script src="braille-tools.js" type="text/javascript" charset="utf-8"></script>Notes: You will also need to include the image with sprites of all Braille characters in the same directory as the CSS file.
Braille CSS Classes
With one CSS class name for every Braille character, you can display Grade 1 Braille.
Notes: "br" means "Braille" in Braille grade 2.
ABC
Using the CSS classes in your HTML, you can display Braille.
<div class="br br-cap"></div> <div class="br br-a"></div> <div class="br br-b"></div> <div class="br br-c"></div>
Hello World
document.write(br.braille("Hello World"))or using a "div" element of id "myBraille"
document.getElementById("myBraille").innerHTML = br.braille("Hello World");
It can also be used with longer text:
var txt = 'Braille is a means of reading and writing for blind people. '+ 'The Braille system was invented by Louis Braille. He has made it '+ 'possible for blind people to take notes, write letters, read books and popular '+ 'magazines, compute mathematical equations, and even read and write music.'; document.write(br.braille(txt))
Alphabet
document.write(br.alphabet())
See your name in Braille
<h2>See your name in Braille</h2> <input id="txtBraille" type="text"> <button type="submit" onclick="showBraille()">Show Braille</button> <div id="myBraille" class="braille"></div>
function showBraille() { var message = document.getElementById("txtBraille").value; document.getElementById('myBraille').innerHTML = br.braille(message); }
License
The source code is available at GitHub under the MIT license.
Copyright (c) 2016-2024 Olivier Giulieri