braille

[contents]  [access]

Developing Internet Braille

Mark Masters Document   $ Jan 10, 2003 $

This document:
"Developing Internet Braille"
http://electricitymachine.com.com/braille/developer.html
(plaintext, zip archive of HTML)

Editor:
Mark Masters
iesusnazarenusrexiudaeorumyhwh@gmail.com

Copyright 2003 Mark Masters, All Rights Reserved. Liability, trademark, document use and software licensing rules apply.

Abstract

This document is published as a suggestion for development of web pages that use Braille. The new Dynamic Braille Display devices available now will give access to the web to blind users, and the aim of this document is to help content developers author pages that are richer, more robust experience for those users. This suggestion employs CSS for specific positioning of text and images. Hyperlinking the Braille letter-images is executed using the same underlined format as hypertext, giving way to a natural browsing experience. The background is a usually a tiled blank Braille cell which gives a blind user a familiarity in format.

DBD Dynamic Braille Display

Status of this document

This document has not been reviewed.

Table of Contents

Abstract
Status of this page
1. Introduction
2. Braille Cell
2.2 Specifications
2.2.1 Adobe Acrobat
3. Braille Images
3.1 Hyperlinking
3.2 Backgrounds
3.3 Coordinates
3.4 Example URI
3.5 SVG
3.5.1 Adobe SVGView
4. Braille Font
5. Braille ASCII
6. Braille AutoCAD
6.1 Autodesk Volo View
7. Braille Numerical Order
8. Browser Tests
9. Legend
10. Appendix A links

1. Introduction

Content developers may create new and better webpages specifically for blind users. The dynamic braille displays will open the World Wide Web up to blind users, and consideration for this new technology is warranted. In this page I have provided a reference for the developer, although this reference is not absolute. I am Braille illiterate. That is to say I can not read Braille, yet. So there may be mistakes as the result of my unfamiliarity with Braille. For instance, take the 7. Braille Numerical Order section. I have no way to prove if I am correct, I am not that much of a mathematician. As far as I know, there may be more glyphs out there to be had. At any rate the figuring is mine including all typos, omissions etc. I understand that it is forbidden to start Braille lines indented, about this I cite artistic license.

This document refers to image, font, and text techniques for developers to reach the blind users with content. I made an example site illustrating the image approach to Braille webpage authorship.

2. Braille Cell

brl cellThe Braille cell is coded by way of numbering the six dots. Note they are read from top to bottom rather than left to right. For the letter "a" the number 1 dot is embossed in print (or darkened for dynamic braille displays). The letter "b" is the 1-2 dots.

2.2 Specifications

specs .092 inches .092 inches .092 inches .400 inches .245 inches diameter .057 inchesSpecs Key

a = .092"
b = .245"
c = .400"
d = .057" diameter
e = .0765"
f = .108"
g = .019"

front view
.019 inches height .057 inches diameter .057 inches diameter .019 inches height
Specs Text

The following specifications are excerpted from the Library of Congress National Library Service for the Blind and Physically Handicapped specification 803.pdf. See 2.2.1 if you do not have the Adobe Acrobat Reader.

3.2.1 The nominal height of braille dots shall be .019 inches and shall be uniform within any given transcription.

3.2.2 The nominal base diameter of braille dots shall be .057 inches.

3.2.3.1 The nominal distance from center to center of adjacent dots (horizontally or vertically, but not diagonally) in the same cell shall be .092 inches.

3.2.3.2 The nominal distance from center to center of corresponding dots in adjacent cells shall be .245 inches.

3.2.4 The nominal line spacing of braille cells center to center of nearest corresponding dots in adjacent lines shall be .400 inches.

2.2.1 Adobe Acrobat

Adobe offers free the Acrobat Reader. If you do not already have the reader it is available at:
http://www.adobe.com/products/acrobat/arupdate.html
The main reason I know of to use the Adobe Acrobat is you always get exactly what the author put into a .pdf file. It is a very consistent and reliable format, and essential internet gear. At times only a .pdf file is published (as is the case with the above 803.pdf) with no corresponding HTML page.

3. Braille Images

In this Braille image set I have used the transparent GIF gif89a file format. The idea being there may be some advantage to using images rather than a font or ascii to get content to blind users. The .gif has been around since 1989 it appears, and even older browsers support the format. The end user may just find that there is no further need of any downloading or configuration. There are drawbacks. If the developer uses too many images on a page broken handshakes may occur resulting in the dreaded placeholder rather than the image itself. I have made an example site for these images to illustrate these ideas. In this table of images I have ordered each image according to numerical order.

0
space
1
a
1-2
b
1-2-3
l
1-2-3-4
p
1-2-3-4-5
q
1-2-3-4-5-6
module
1-2-3-4-6
&
blank.gif (76 bytes) a.gif (97 bytes) b.gif (105 bytes) l.gif (111 bytes) p.gif (118 bytes) q.gif (126 bytes) cell.gif (942 bytes) amp.gif (125 bytes)
1-2-3-5
r
1-2-3-5-6
1-2-3-6
1-2-4
f
1-2-4-5
g
1-2-4-5-6
1-2-4-6
1-2-5
h
r.gif (119 bytes) 1-2-3-5-6.gif (126 bytes) 1-2-3-6.gif (119 bytes) f.gif (112 bytes) g.gif (120 bytes) 1-2-4-5-6.gif (126 bytes) head.gif (118 bytes) h.gif (114 bytes)
1-2-5-6
1-2-6
1-3
k
1-3-4
m
1-3-4-5
n
1-3-4-5-6
y
1-3-4-6
x
1-3-5
o
1-2-5-6-parallel.gif (120 bytes) 1-2-6.gif (111 bytes) k.gif (105 bytes) m.gif (114 bytes) n.gif (120 bytes) y.gif (127 bytes) x.gif (121 bytes) o.gif (111 bytes)
1-3-5-6
z
1-3-6
u
1-4
c
1-4-5
d
1-4-5-6
1-4-6
1-5
e
1-5-6
z.gif (119 bytes) u.gif (114 bytes) c.gif (108 bytes) d.gif (114 bytes) 1-4-5-6.gif (120 bytes) 1-4-6.gif (113 bytes) e.gif (104 bytes) 1-5-6.gif (112 bytes)
1-6
\
2
,
2-3
;
2-3-4
s
2-3-4-5
t
2-3-4-5-6
2-3-4-6
2-3-5
!
times.gif (106 bytes) comma.gif (94 bytes) semicolon.gif (105 bytes) s.gif (111 bytes) t.gif (119 bytes) 2-3-4-5-6.gif (127 bytes) 2-3-4-6.gif (118 bytes) exclamationpoint.gif (114 bytes)
2-3-5-6
2-3-6
2-4
i
2-4-5
j
2-4-5-6
w
2-4-6
2-5
:
2-5-6
.
openclose.gif (122 bytes) questionmark.gif (113 bytes) i.gif (105 bytes) j.gif (113 bytes) w.gif (119 bytes) arrowleft.gif (111 bytes) colon.gif (108 bytes) period.gif (114 bytes)
2-6
3
3-4
/
3-4-5
3-4-5-6
#
3-4-6
+
3-5
*
3-5-6
2-6-dagger.gif (106 bytes) apostrophe.gif (95 bytes) fwdslash.gif (105 bytes) 3-4-5ar.gif (112 bytes) number.gif (119 bytes) plus.gif (114 bytes) asterisk.gif (105 bytes) quotationclose.gif (114 bytes)
3-6
-
4
'
4-5
4-5-6
4-6
5
5-6
letter
6
dash.gif (107 bytes) accent.gif (96 bytes) 4-5.gif (105 bytes) 4-5-6.gif (111 bytes) decimalpoint.gif (105 bytes) compound.gif (96 bytes) letter.gif (104 bytes) capital.gif (96 bytes)

3.1 Hyperlinking

By using these images to hyperlink developers may set up a more natural and functional interface for the blind user. The underline indicating a hyperlink is just like the link underline below text. This is an example using this Braille image set to hyperlink:

1-5
e
©  · 
 ·  ©
 ·   · 1-3-4-6
x
© ©
 ·   · 
© ©1
a
©  · 
 ·   · 
 ·   · 1-3-4
m
© ©
 ·   · 
©  · 1-2-3-4
p
© ©
©  · 
©  · 1-2-3
l
©  · 
©  · 
©  · 1-5
e
©  · 
 ·  ©
 ·   · 0-0-0-0-0-0
space
 ·   · 
 ·   · 
 ·   · 1-2-3
l
©  · 
©  · 
©  · 2-4
i
 ·  © 
©  · 
 ·   · 1-3-4-5
n
© ©
 ·  ©
©  · 1-3
k
©  · 
 ·   · 
©  ·

3.2 Backgrounds

Developers may choose to use the blank image as background for a section. This can be easily done using styles, and the section of text might be more readable by blind people. Dynamic Braille Displays simulate areas of light and dark in terms of relief. If the blind reader has the same default 6 "dits" with no dots as background, the effect may be as close as possible to hard copy Braille reading. I have made a table showing a number of the widths and heights in 3.3 Coordinates

The first example background is just 96px width 38px height:
 
The next example background is 240px width 38px height:
 
The next example background is 480px widht 76px height:
 

3.3 Coordinates

Below is a table of coordinates for aligning the images over the background. The module is 24 pixels in width by 38 pixels in height. The browser's top left corner is the zero-zero position. The module dimensions are repeated left to right in units of 24 pixels, and top to bottom in 38 pixels.

0,0 24,0 48,0 72,0 96,0 120,0 144,0 168,0 192,0 216,0 240,0 264,0 288,0 312,0 336,0 360,0 384,0 408,0 504,0 528,0 552,0 576,0 600,0 624,0 648,0 672,0 696,0 720,0 744,0 768,0 792,0 816,0 840,0
0,38 24,38 48,38 72,38 96,38 120,38 144,38 168,38 192,38 216,38 240,38 264,38 288,38 312,38 336,38 360,38 384,38 408,38 504,38 528,38 552,38 576,38 600,38 624,38 648,38 672,38 696,38 720,38 744,38 768,38 792,38 816,38 840,38
0,76 24,76 48,76 72,76 96,76 120,76 144,76 168,76 192,76 216,76 240,76 264,76 288,76 312,76 336,76 360,76 384,76 408,76 504,76 528,76 552,76 576,76 600,76 624,76 648,76 672,76 696,76 720,76 744,76 768,76 792,76 816,76 840,76
0,114 24,114 48,114 72,114 96,114 120,114 144,114 168,114 192,114 216,114 240,114 264,114 288,114 312,114 336,114 360,114 384,114 408,114 504,114 528,114 552,114 576,114 600,114 624,114 648,114 672,114 696,114 720,114 744,114 768,114 792,114 816,114 840,114
0,152 24,152 48,152 72,152 96,152 120,152 144,152 168,152 192,152 216,152 240,152 264,152 288,152 312,152 336,152 360,152 384,152 408,152 504,152 528,152 552,152 576,152 600,152 624,152 648,152 672,152 696,152 720,152 744,152 768,152 792,152 816,152 840,152
0,190 24,190 48,190 72,190 96,190 120,190 144,190 168,190 192,190 216,190 240,190 264,190 288,190 312,190 336,190 360,190 384,190 408,190 504,190 528,190 552,190 576,190 600,190 624,190 648,190 672,190 696,190 720,190 744,190 768,190 792,190 816,190 840,190
0,228 24,228 48,228 72,228 96,228 120,228 144,228 168,228 192,228 216,228 240,228 264,228 288,228 312,228 336,228 360,228 384,228 408,228 504,228 528,228 552,228 576,228 600,228 624,228 648,228 672,228 696,228 720,228 744,228 768,228 792,228 816,228 840,228
0,266 24,266 48,266 72,266 96,266 120,266 144,266 168,266 192,266 216,266 240,266 264,266 288,266 312,266 336,266 360,266 384,266 408,266 504,266 528,266 552,266 576,266 600,266 624,266 648,266 672,266 696,266 720,266 744,266 768,266 792,266 816,266 840,266
0,304 24,304 48,304 72,304 96,304 120,304 144,304 168,304 192,304 216,304 240,304 264,304 288,304 312,304 336,304 360,304 384,304 408,304 504,304 528,304 552,304 576,304 600,304 624,304 648,304 672,304 696,304 720,304 744,304 768,304 792,304 816,304 840,304
0,342 24,342 48,342 72,342 96,342 120,342 144,342 168,342 192,342 216,342 240,342 264,342 288,342 312,342 336,342 360,342 384,342 408,342 504,342 528,342 552,342 576,342 600,342 624,342 648,342 672,342 696,342 720,342 744,342 768,342 792,342 816,342 840,342
0,380 124,380 48,380 72,380 96,380 120,380 144,380 168,380 192,380 216,380 240,380 264,380 288,380 312,380 336,380 360,380 384,380 408,380 504,380 528,380 552,380 576,380 600,380 624,380 648,380 672,380 696,380 720,380 744,380 768,380 792,380 816,380 840,380

3.4 Example URI

View the example site meant to illustrate usage of the Braille Image set.

3.5 SVG

Scalable Vector Graphics or SVG, are likely to be the format most used in the future. This has to do with raster graphics versus vector graphics. The important point to consider regarding vector graphics is they are comparatively very small files in terms of filesize. This equals quick download times compared to BMP, JPG, GIF etc. I am a novice using SVG, however I did make a SVG Graphic. Originally I had the graphic on this page (in an IFRAME), but took it off because I could not get the image to work inline using Netscape - it kept popping up. This SVG page uses XML markup, and will require a SVG viewer. I understand as of this writing the idea with SVG incorporates text to render an image, which is not what I achieved in making this graphic. I used the same .gif filetype which may not have been the correct choice. The graphic is scalelable, but as you zoom in you will see the radiant purple anti-aliasing on the edges. I believe there is a way to send text rather than an image to produce an image. If you do decide to download the Adobe SVG Viewer there is good example of this in the C:\WINDOWS\SYSTEM\Adobe\SVG Viewer 3.0\SVGAbout.svg. If you look at the source of this page you will see what I am getting at. These images are not pictures per se, but rather they are text which produces the image using an Active-X control in your browser. [I will publish this Adobe SVGAbout.svg here too for clarity] I may be wrong, what I don't know could fill volumes here. I mention SVG because the potential to developers is so great.

3.5.1 Adobe SVGView

Adobe offers free the SVG Viewer. Installation is easy and quick.
http://www.adobe.com/svg/viewer/install/main.html
Adobe SVGView.exe

4. Braille Font

I made this Braille font in order to make possible a lot of the punctuatation, special characters, mathematical symbols, etc that I didn't see in any other Braille font (I have not reviewed any of Macintosh fonts). Below is a key to all the glyphs or glyph combinations (not including A-Z, a-z, 0-9). I have included the 10 glyphs that I did not find anywhere in my reading. There are arrows to be had with this font, and a number of glyph combinations or abbreviations that are common in Braille. This is a True Type Font with 148 glyph or glyph combinations. You may download the font brl.ttf, or download the ZIP archive brl.zip. [ Destination folder for Windows is C:\WINDOWS\FONTS ]

` accent sign
^ capital sign
´ letter Alt + 0180
# number sign

‘ single quote left Alt + 0145
’ single quote right Alt + 0146
“ double quote left Alt + 0147
” double quote right Alt + 0148
¶ Paragraph Alt + 0182
¦ stress Alt + 0166
† dagger Alt + 0134
‡ double dagger Alt + 0135
§ Section Alt + 0167
: boldface or symbolic colon Alt + 0235
" ditto Alt + 0236
|| parallel Alt + 0237
. period Alt + 0234
checkmark Alt + 0233
termination Alt + 0254

€ Euro Alt + 0128
£ Pound Alt + 0163
¢ cent Alt + 0162
¥ Yen Alt + 0165
© Copyright Alt + 0169
™ Trademark Alt + 0153

× times Alt + 0215
÷ divide Alt + 0247
± plus minus Alt + 0177
° degree Alt + 0176
″ seconds Alt + 0231
′ minute Alt + 0232
Ø Oslash Alt + 0216
' foot ' Alt + 0238
" inch " Alt + 0239
pound of weight + 0240

→ arrow right Alt + 0224
← arrow left Alt + 0225
↔ arrow left and right Alt + 0226
↑ arrow up Alt + 0227
↓ arrow down Alt + 0228
arrow up and down Alt + 0229
arrow northeast Alt + 0230
arrow southeast Alt + 0231

glyph 1-2-3-5-6 Alt + 0200
glyph 1-2-3-6 Alt + 0201
glyph 1-2-4-5-6 Alt + 0202
glyph 1-2-6 Alt + 0203
glyph 1-4-5-6 Alt + 0204
glyph 1-4-6 Alt + 0205
glyph 1-5-6 Alt + 0206
glyph 2-3-4-5-6 Alt + 0207
glyph 2-3-4-6 Alt + 0208
glyph 4-5 Alt + 0209

5. Braille ASCII

Another option developers may consider is the use of ASCII. ASCII may be arranged to form pictures of text (see 5.1 ASCII Art), or as in the below Braille set glyphs. This may be useful where the user has a viewer which can not see images of any kind, yet the text can be seen or read by touch. I have yet to find an editor that can automatically arrange the text properly and so I made each glyph by hand, one dot at a time.

0
space
1
a
1-2
b
1-2-3
l
1-2-3-4
p
1-2-3-4-5
q
1-2-3-4-5-6
module
1-2-3-4-6
&

· ·
· ·
· ·


© ·
· ·
· ·


© ·
© ·
· ·


© ·
© ·
© ·


© ©
© ·
© ·


© ©
© ©
© ·


© ©
© ©
© ©


© ©
© ·
© ©

1-2-3-5
r
1-2-3-5-6
1-2-3-6
1-2-4
f
1-2-4-5
g
1-2-4-5-6
1-2-4-6
1-2-5
h

© ·
© ©
© ·


© ·
© ©
© ©


© ·
© ·
© ©


© ©
© ·
· ·


© ©
© ©
· ·


© ©
© ©
· ©


© ©
© ·
· ©


© ·
© ©
· ·

1-2-5-6
1-2-6
1-3
k
1-3-4
m
1-3-4-5
n
1-3-4-5-6
y
1-3-4-6
x
1-3-5
o

© ·
© ©
· ©


© ·
© ·
· ©


© ·
· ·
© ·


© ©
· ·
© ·


© ©
· ©
© ·


© ©
· ©
© ©


© ©
· ·
© ©


© ·
· ©
© ·

1-3-5-6
z
1-3-6
u
1-4
c
1-4-5
d
1-4-5-6
1-4-6
1-5
e
1-5-6

© ·
· ©
© ©


© ·
· ·
© ©


© ©
· ·
· ·


© ©
· ©
· ·


© ©
· ©
· ©


© ©
· ·
· ©


© ·
· ©
· ·


© ·
· ©
· ©

1-6
\
2
,
2-3
;
2-3-4
s
2-3-4-5
t
2-3-4-5-6
2-3-4-6
2-3-5
!

© ·
· ·
· ©


· ·
© ·
· ·


· ·
© ·
© ·


· ©
© ·
© ·


· ©
© ©
© ·


· ©
© ©
© ©


· ©
© ·
© ©


· ·
© ©
© ·

2-3-5-6
2-3-6
2-4
i
2-4-5
j
2-4-5-6
w
2-4-6
2-5
:
2-5-6
.

· ·
© ©
© ©


· ·
© ·
© ©


· ©
© ·
· ·


· ©
© ©
· ·


· ©
© ©
· ©


· ©
© ·
· ©


· ·
© ©
· ·


· ·
© ©
· ©

2-6
3
3-4
/
3-4-5
3-4-5-6
#
3-4-6
+
3-5
*
3-5-6

· ·
© ·
· ©


· ·
· ·
© ·


· ©
· ·
© ·


· ©
· ©
© ·


· ©
· ©
© ©


· ©
· ·
© ©


· ·
· ©
© ·


· ·
· ©
© ©

3-6
-
4
'
4-5
4-5-6
4-6
5
5-6
letter
6

· ·
· ·
© ©


· ©
· ·
· ·


· ©
· ©
· ·


· ©
· ©
· ©


· ©
· ·
· ©


· ·
· ©
· ·


· ·
· ©
· ©


· ·
· ·
· ©


6. Braille AutoCAD

I made this three dimensional AutoCAD drawing (available in ZIP acadbrl.zip) of the 64 Braille glyphs not so much for the internet, but more for sign makers or engineers. This set would not make a good embosser because the specifications refer to paper itself. This means that if you sculpted the 3D drawings into plastic, wood, linoleum, etc with the idea to then lay paper over the forms to press, you would find that the dots were too big. The specifications describe the final result - not the dies. The order of the glyphs is numerical 0-64. Each glyph has its own layer in the drawing, which is numbered by the same numerical order to facillitate isolation by turning off layers. If you do not have AutoCAD but are still interested in seeing the 3D drawings, you may download the Volo View.

brlacad (42K)

6.1 Autodesk Volo View

volo (21K) This is the free DWG viewer offered by AutoDesk. It can see .dwg and .dxf filetypes, and gives an idea what the 3D drawings look like in the round so to speak. There is a green circle in the center of the interface whenever 3D Orbit mode is used. In the drawing I used no lighting, thinking that anyone who uses this file will want the drawing raw just so they do not have to spend time undoing. The viewer may be downloaded below, and there are requirements.
[FTP] Autodesk
[ZDNET] Autodesk Volo View Express
[CNET] Autodesk Volo View Express

7. Braille Numerical Order

0
1
1-2
1-2-3
1-2-3-4
1-2-3-4-5
1-2-3-4-5-6
1-2-3-4-6
1-2-3-5
1-2-3-5-6
1-2-3-6
1-2-4
1-2-4-5
1-2-4-5-6
1-2-4-6
1-2-5
1-2-5-6
1-2-6
1-3
1-3-4
1-3-4-5
1-3-4-5-6
1-3-4-6
1-3-5
1-3-5-6
1-3-6
1-4
1-4-5
1-4-5-6
1-4-6
1-5
1-5-6
1-6
2
2-3
2-3-4
2-3-4-5
2-3-4-5-6
2-3-4-6
2-3-5
2-3-5-6
2-3-6
2-4
2-4-5
2-4-5-6
2-4-6
2-5
2-5-6
2-6
3
3-4
3-4-5
3-4-5-6
3-4-6
3-5
3-5-6
3-6
4
4-5
4-5-6
4-6
5
5-6
6

8. Browser Tests

Amaya 7.0
NCSA Mosaic version 3.0
Netscape 7.0 (Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.0.1) Gecko/20020823)
Mozilla 1.2.1 (Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.2.1) Gecko/20021130)
NeoPlanet Inc. version 5.2 Build 1704
Microsoft Internet Explorer version 6.0

9. Legend

     This is to highlight a section of text that is central to the theme of this document. Also used for table orientation.

     This is to highlight a section of text which I still need to amend.

     This is a general highlight.

10. Appendix A - links

http://www.uronramp.net/~lizgray/links.html
http://www.tiresias.org/reports/braille_cell.htm
http://www.dotlessbraille.org/tactiledisplays.htm#rbd
http://www.techno-vision.co.uk/toc.htm
http://www.louisbrailleaudio.com/help.asp
http://www.dodiesis.com/asp/bmk.asp?language=2
http://www.nyise.org/braille.htm
http://www.ghbraille.com/ebrl.html
http://www.rnib.org.uk/wesupply/archive/welcome.htm
http://www.rnib.org.uk/wesupply/archive/rnibbrl.zip
http://www.brl.org/simbraille.html
http://www.shodor.org
http://www.shodor.org/pub/SIMBRL.TTF
http://www.astigmatic.com/braille.html
http://www.astigmatic.com/win/braille.zip
http://www.duxburysystems.com/
http://www.duxburysystems.com/freeware.asp
http://www.duxburysystems.com/downloads/duxbrlf.exe
http://www.tsbvi.edu/Education/fonts.html
http://www.uky.edu/AS/ModernStudies/braille.htm
http://www.uky.edu/AS/ModernStudies/download/brlkiama.zip
http://www.esa.int:8080/handy/om/distr/apps/uk_home.html
http://www.esa.int:8080/handy/om/distr/apps/pc/braille1.zip
http://www.cnib.ca/divisions/bc_yukon/faqs/
http://www.cnib.ca/downloads/braille.zip
http://www.braille.se/downloads/winbraille.htm
http://www.braille.se/winbupd/winb300/singleImage/setup.exe
http://perso.wanadoo.fr/dephitro/brailf1.htm
http://perso.wanadoo.fr/dephitro/ZIP/braille1.zip
http://www.w3.org/International/O-charset.html
http://www.hotbraille.com/