查看您的名字（盲文）

• 项目在 GitHub 上
• 下载演示、代码和图片 - 22 KB

引言

本文提供了一些 CSS 和 JavaScript，用于在您的网页中显示盲文。它可以用来让视力正常的人熟悉盲文系统。此项目不用于真正的盲文转录或屏幕阅读器。

在最简单的形式（1 级）中，盲文只是一种不同的字符集

查看 演示。

使用 CSS Sprite 显示盲文

从上表可以看出，我们可以通过使用每个字符一个图像来轻松显示任何文本的盲文翻译。为了加快加载速度，我们将使用带有所有字符类名的 CSS，以及包含所有字符精灵的单个图片。

在盲文中显示“Abc”的 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>

使用 JavaScript 使其更简单

我们编写一个简单的 JavaScript 函数来生成 HTML。我们应该在脚本中添加一些额外的规则

• 大写字母必须以特殊的盲文字符为前缀
• 数字使用“a”表示“1”，“b”表示“2”... 并以特殊字符为前缀
• 标点符号使用更多的特殊字符

现在，我们可以调用它来生成更长的翻译，例如“Hello World”。

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

为了方便起见，另一个函数显示字母表。

document.write(br.alphabet())

否则，您可以使用该库向您的用户显示他们的名字的盲文。

Using the Code

它有 3 种不同的样式

要包含 CSS（将“braille-big.css”替换为“braille-small.css”或“braille-small-3d.css”）

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

请注意，每个 CSS 都需要包含相同名称的盲文字母表的精灵的图像。

要包含 JavaScript

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

在 GitHub 上的 braille-tools 上实时试用此演示。

另一种在网页中显示盲文的方法是使用 盲文网页字体。

最终，如果您真的想学习盲文，我建议从 Schneider 和 Kathy Kifer 的《盲人也能读懂的盲文》这本书开始。

历史

• 2016 年 12 月 8 日：初始版本