Braille-Tools

A lightweight CSS and JavaScript library for displaying English Grade 1 Braille in web pages — designed to introduce sighted people to the Braille system.

Use CSS to render Braille characters in three visual styles:

3 styles of Braille: - -

Add JavaScript to make it interactive:

Note: this library is intended to help sighted people explore the Braille system. It does not assist screen readers and is not a tool for professional Braille transcription.

Setup

To include the library, load one of the three CSS files depending on the style you want — "braille-big.css", "braille-small.css", or "braille-small-3d.css":

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

The JavaScript file is only needed for dynamic rendering:

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

Note: the CSS file relies on a sprite image containing all Braille characters, which must be in the same directory as the CSS file.

Braille CSS Classes

With one CSS class name for each Braille character, you can display Grade 1 Braille in web pages.

br br-a

br br-b

br br-c

br br-d

br br-e

br br-f

br br-g

br br-h

br br-i

br br-j

br br-k

br br-l

br br-m

br br-n

br br-o

br br-p

br br-q

br br-r

br br-s

br br-t

br br-u

br br-v

br br-w

br br-x

br br-y

br br-z

br br-2_for

br br-ast

br br-cap

br br-col

br br-comma

br br-dec

br br-dot5

br br-ex

br br-hyph

br br-num

br br-par

br br-period

br br-qc

br br-qs

br br-qu

br br-sc

br br-sla

br br-sp

Notes: "br" means "Braille" in Braille grade 2.

ABC

Use CSS class names directly in your HTML to display Braille characters.

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>

Hello World

You can also use JavaScript to generate the Braille HTML dynamically.

Javascript:

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

Or using a div element with id "myBraille":

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

It can also be used with longer text:

Javascript:

const 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

Javascript:

document.write(br.alphabet())

Note: letters "k" to "t" are the same as "a" to "j" with an added dot 3.

See your name in Braille

HTML:

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

Javascript:

function showBraille() {
  const message = document.getElementById("txtBraille").value;
  document.getElementById('myBraille').innerHTML = br.braille(message);
}

For displaying the character on hover (with animation), use my other script Braille-Text.

License

Braille-Tools is open-source at GitHub under the MIT license.

Braille-Tools is made in California with ♥. Encourage the project by becoming a sponsor.