CSS and Javascript to display Braille

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. With one CSS class name for every Braille character, you can display Grade 1 Braille.

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.

<link href="css/braille-big.css" rel="stylesheet" type="text/css">

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

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

document.write(br.braille("Hello World"))

document.getElementById("myBraille").innerHTML = br.braille("Hello World");

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))

document.write(br.alphabet())

<h2>See your name in Braille</h2>
<input id="txtBraille" type="text">
<button id="btnBraille" type="submit" value="" 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);
}