Braille-Tools

CSS

CSS Classes ABC

Javascript

Hello World Alphabet Your Name in Braille

GitHub

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.

Braille CSS Classes

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

The CSS using a picture containing all characters (for faster loading). It needs to be included with the CSS.

Notes: "br" is the grade 2 abbreviation of "Braille".

Installation

First, load CSS file (braille-big.css or braille-small.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">

ABC

Using the CSS classes in your HTML, you can display Braille.

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

Hello World

Javascript:
document.write(br.braille('Hello World'))

It can also be use with longer text:

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

Javascript:
document.write(br.alphabet())

See your name in Braille

HTML:
<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>
Javascript:
function showBraille() {
	var message = document.getElementById("txtBraille").value;
	document.getElementById('myBraille').innerHTML = br.braille(message);
}

License

This project is released under the MIT license.

Copyright (c) 2016 Olivier Giulieri