evoluteur / braille-tools

CSS and Javascript to display Braille grade 1 in web pages (for sighted people).

Braille-Tools

CSS and Javascript to display Braille (grade 1) in web pages (for sighted people).

Check out the live demo.

It comes in 3 different styles:

See your name in Braille

Braille Alphabet

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

License

Copyright (c) 2016-2024 Olivier Giulieri.

Braille-Tools is released under the MIT license.

braille-tools's Issues

This one just screams <braille-string> Web Component

In a Web Component you can scope all your CSS and JS so you don't have any global dependencies.
The user then loads just one JS file defining the Web Component, and does not have to use DIV or classnames

Just a quick proof of concept (not refactoring JS and CSS):

JSFiddle: https://jsfiddle.net/WebComponents/yv6scarL/

<link href="https://evoluteur.github.io/braille-tools/css/braille-big.css" rel="stylesheet" type="text/css">
<script src="https://evoluteur.github.io/braille-tools/braille-tools.js" type="text/javascript" charset="utf-8"></script>

<braille-string>Hello World!</braille-string>
<braille-string>I can write Web Components</braille-string>

<script>
  customElements.define("braille-string", class extends HTMLElement {
    connectedCallback() {
      const braille = char => Object.assign(document.createElement("div"), {
        className: `br br-${char}`
      })
      this.render = (txt) => this.replaceWith(...txt.split("").map(braille));
      setTimeout(() => this.render(this.innerHTML)); // wait till innerHTML is parsed
    }
  });
</script>

Note: Every Braille character is a six bit value, so a PNG with all characters is not required, create them 6 dots dynamically