-
Notifications
You must be signed in to change notification settings - Fork 5
eBraille Examples
Here is a library of examples showing how various things may be coded in the eBraille format. It is a developing archive and examples may change as the project develops.
An eBraille file consists of (at least) three parts:
- Spine or Navigation Control Centre (NCC) to link the document together
- Header and metadata information
- Formatting or Cascading Style Sheet(s)
- Document Content
- Any graphics
This document provides examples of each of these, but does not attempt to give a full or definitive set of possibilities. Each example is intended to be a portion of a complete eBraille document, so only the part under discussion is given.
Simple and more complex examples are given, further examples are welcomed.
Unicode braille characters plus ordinary spaces are used for the braille. Except where noted, all braille is written in Uncontracted (grade 1) Unified English Braille.
This has not yet been defined.
This has not yet been defined.
This has not yet been defined.
The document content consists of HTML-like tags and attributes with Unicode braille characters.
A standard HTML file has a head and a body element, the same basic structure is used with eBraille. All of the below examples would normally occur within the body section of the document.
Tags used: div with CSS.
Note: the CSS tags in these examples are for illustration only.
See issue 73
<div class="boxsingle">
<p>⠠⠎⠑⠑ ⠁⠇⠎⠕ ⠠⠉⠓⠁⠏⠞⠑⠗ ⠼⠃⠑</p>
</div>
<div class="boxdouble">
<p class="center">,⠏⠕⠊⠝⠞⠎ ⠞⠕ ⠗⠑⠍⠑⠍⠃⠑⠗</p>
<ol>
<li>⠠⠍⠑⠁⠎⠥⠗⠑ ⠉⠁⠗⠑⠋⠥⠇⠇⠽</li>
<li>⠠⠁⠇⠺⠁⠽⠎ ⠺⠗⠊⠞⠑ ⠞⠓⠑ ⠥⠝⠊⠞⠎</li>
</ol>
</div>
Tags used: em, strong
Note: tags b, i, mark, u, are not recommended.
See issue 72
Note: CSS classes in these examples are for illustration only.
<p>⠠⠏⠗⠑⠎⠎ ⠞⠓⠑ <strong>⠘⠂⠎⠟⠥⠁⠗⠑</strong> ⠃⠥⠞⠞⠕⠝⠲</p>
<p>⠠⠏⠗⠑⠎⠎ ⠞⠓⠑ <strong><span class="boldind">⠘⠂</span>⠎⠟⠥⠁⠗⠑</strong> ⠃⠥⠞⠞⠕⠝⠲</p>
Assume the braille signs ⠸⠼⠶ ... ⠸⠼⠄ have been defined for three or more words in blue:
<p>⠲⠲⠲ ⠎⠁⠊⠙ ⠓⠑ <span class="colorblue"><span class="brlind">⠸⠼⠶</span>⠑⠝⠄⠞ ⠛⠕⠄ ⠝⠕ ⠍⠕⠗⠑ ⠙⠕⠥⠛⠓<span class="brlind">⠸⠼⠄</span></span>
⠐⠣⠓⠁⠙⠝⠄⠞ ⠁⠝⠽ ⠍⠕⠗⠑ ⠍⠕⠝⠑⠽⠐⠜⠲</p>
Tags used: a for links.
The DPUB-ARIA module role attributes of doc-noteref, doc-footnote and doc-endnotes are used for identify notes.
The footnotes and endnotes are likely to be shown as a list.
See issue 85
<p>⠲⠲⠲ ⠎⠞⠁⠞⠑⠎ ⠞⠓⠊⠎ ⠊⠝ ⠠⠞⠓⠕⠍⠏⠎⠕⠝⠲
<a href="#footnote_28" role="doc-noteref">⠰⠔⠼⠃⠓</a></p>
<ol class="nonumber">
...
<li id="footnote_28" role="doc-footnote">⠰⠔⠼⠃⠓ ⠠⠞⠓⠕⠍⠏⠎⠕⠝⠂ ⠠⠞⠲⠒ ⠠⠏⠥⠃⠇⠊⠉ ⠠⠎⠏⠑⠁⠅⠊⠝⠛ ⠠⠙⠑⠍⠽⠎⠞⠊⠋⠊⠑⠙ ⠲⠲⠲</li>
...
</ol>
Note that endnotes are handled in a similar way, except the
- would be given the role of "doc-endnotes" instead of the individual notes within the list.
Tags used: img, svg
Attributes to these tags give details of the graphic. Graphics may be in several formats and are separate resources.
See issue 75
<img width="54px" height="27px" src="..\graphics\diagram187.jpg"
alt="⠠⠙⠊⠁⠛⠗⠁⠍ ⠕⠋ ⠞⠺⠕ ⠊⠝⠞⠑⠗⠎⠑⠉⠞⠊⠝⠛ ⠉⠊⠗⠉⠇⠑⠎"/>
Tags used: h1, h2, h3, h4, h5, h6
See issue 66
The heading tags set the overall document heading structure.
Note: a "header" is not classed as a "heading", see Running Page Header.
Headings are formatted in various ways in braille, and the precise detail may even vary per book, depending on how many levels of heading are needed in a particular work. The precise layout detail is set by CSS.
Note: the names of CSS classes are for illustration only.
All details of layout are left to the CSS.
<h1>⠠⠊⠝⠞⠗⠕⠙⠥⠉⠞⠊⠕⠝</h1>
The below heading has some new lines in it to make it appear on multiple lines:
<h1>⠠⠉⠓⠁⠏⠞⠑⠗ ⠼⠛<br/>
⠠⠞⠓⠑ ⠠⠗⠑⠍⠁⠗⠅⠁⠃⠇⠑ ⠠⠞⠗⠥⠞⠓<br/>
⠁⠃⠕⠥⠞ ⠠⠚⠕⠓⠝ ⠠⠎⠍⠊⠞⠓</h1>
Below are a few headings, one of which has special layout requirements.
<h1>⠠⠊⠝⠞⠗⠕⠙⠥⠉⠞⠊⠕⠝</h1>
<p>⠠⠺⠑⠇⠉⠕⠍⠑ ⠞⠕ ⠲⠲⠲</p>
<h1 class="newpage">⠠⠃⠁⠎⠊⠉ ⠠⠕⠏⠑⠗⠁⠞⠊⠕⠝</h1>
<h2 class="sidenoblankline">⠠⠍⠁⠊⠝ ⠠⠙⠊⠎⠏⠇⠁⠽</h2>
<p>⠠⠞⠓⠑ ⠍⠁⠊⠝ ⠎⠉⠗⠑⠑⠝ ⠎⠓⠕⠺⠎ ⠲⠲⠲</p>
<h2>⠠⠎⠞⠁⠞⠥⠎ ⠠⠇⠊⠝⠑</h2>
<p>444</p>
The below heading is given an id, so a link somewhere else in the document can gopoint here:
<h1 id="chapt_04">⠠⠉⠓⠁⠏⠞⠑⠗ ⠠⠠⠊⠧</h1>
to do
Tags used: span (with specific attributes)
Note: A role of doc-linenumber is used in these examples, it is not listed as part of the DPUB-ARIA module.
See issue 71
Line numbers are inserted into the text at the position they would occur. CSS is used to position the lines in the appropriate place when the braille is rendered. The whole of a line numbered section is enclosed in a div so that margins can be adjusted as needed.
This example simply shows possible codeing for a line number:
<span id="line50" role="doc-linenum" aria-label="⠼⠑⠚">
Following is a paragraph of text with line numbers:
<div class="linenumbers">
...
<p>⠲⠲⠲ ⠺⠁⠝⠙⠑⠗⠑⠙ ⠥⠏ ⠞⠓⠑ ⠎⠞⠕⠝⠽ ⠏⠁⠞⠓⠲
<span id="line135" role="doc-linenum" aria-label="⠼⠁⠉⠑"</span>
⠠⠞⠕ ⠞⠓⠑⠊⠗ ⠇⠑⠋⠞⠂ ⠁ ⠎⠍⠕⠅⠽ ⠓⠁⠵⠑ ⠋⠗⠕⠍ ⠞⠓⠑ ⠧⠁⠇⠇⠑⠽ ⠃⠑⠇⠕⠺⠂
⠞⠕ ⠞⠓⠑⠊⠗ ⠗⠊⠛⠓⠞⠂ ⠁⠝ ⠁⠇⠍⠕⠎⠞ ⠧⠑⠗⠞⠊⠉⠁⠇ ⠉⠇⠊⠋⠋⠲ ⠲⠲⠲</p>
</div>
Tags used: a
Attribute href detail where a link points.
Note that an eBraille package may consist of multiple files and also point to resources outside the bundle.
See issue 74
See also Footnotes.
<p>⠠⠎⠑⠑
<a href="#sect_24">⠠⠎⠑⠉⠞⠊⠕⠝ ⠼⠃⠙</a> ⠋⠕⠗ ⠋⠥⠗⠞⠓⠑⠗ ⠊⠝⠋⠕⠗⠍⠁⠞i⠕⠝⠲</p>
Note that this link gives a file and the name of an id within the file. It is vital that the reading system jumps directly to the correct place within the file, not just displaying the first part of the new file.
<p>⠠⠎⠑⠑
<a href="appendices.htm#app_b">⠠⠁⠏⠏⠑⠝⠙⠊⠭ ⠠⠃</a>
⠋⠕⠗ ⠋⠥⠗⠞⠓⠑⠗ ⠊⠝f⠕⠗⠍⠁⠞⠊⠕⠝⠲</p>
The below link would open a file on a (fictitious) internet site:
<p>⠠⠍⠕⠗⠑ ⠙⠑⠞⠁⠊⠇⠎ ⠁⠗⠑ ⠁⠧⠁⠊⠇⠁⠃⠇⠑ ⠁⠞
<a href="https://somesite.com/pages/.../details.aspx?sl=1&ui=37">
⠠⠉⠇⠑⠁⠝ ⠠⠺⠁⠞⠑⠗ ⠠⠏⠗⠕⠚⠑⠉⠞</a> ⠺⠑⠃⠎⠊⠞⠑⠲</p>
Tags used: dd, dl, dt, li, ol, ul
See issue 68
Various document features can be coded as lists. This includes numbered and bulleted lists, glossaries, tables of contents, indexes, footnote definitions and poetry.
A lot of the precise formatting detail is left to CSS. This would include left/right margins, any need for blank lines above/below, any generated symbol (bullet, number etc) and so on.
In this list, all formatting detail is left to the CSS. Thus, this is a "default layout" unordered (bulleted) list:
<p>⠠⠎⠓⠕⠏⠏⠊⠝⠛ ⠇⠊⠎⠞⠒</p>
<ul>
<li>⠠⠉⠁⠗⠗⠕⠞⠎</li>
<li>⠠⠉⠓⠑⠑⠎⠑</li>
...
<li>⠠⠞⠕⠍⠁⠞⠕⠑⠎</li>
</ul>
A multichoice exercise might be coded like this. Note the CSS classes are for illustration only:
<ol class="nonumber">
<li>⠼⠁⠲ ⠠⠺⠓⠊⠉⠓ ⠏⠇⠁⠝⠑⠞ ⠊⠎ ⠉⠇⠕⠑⠎⠞ ⠞⠕ ⠞⠓⠑ ⠎⠥⠝⠦</li>
<ol class="nonumber">
<li>⠁⠲ ⠠⠧⠑⠝⠥⠎</li>
<li>⠃⠲ ⠠⠍⠑⠗⠉⠥⠗⠽</li>
<li>⠉⠲ ⠠⠍⠁⠗⠎</li>
</ol>
<li>⠼⠃⠲ ⠠⠓⠕⠺ ⠍⠁⠝⠽ ⠍⠕⠕⠝⠎ ⠙⠕⠑⠎ ⠠⠍⠁⠗⠎ ⠓⠁⠧⠑⠦</li>
<ol class="nonumber">
<li>⠁⠲ ⠼⠚</li>
<li>⠃⠲ ⠼⠁</li>
<li>⠉⠲ ⠼⠃</li>
</ol>
...
</ol>
to do: example of table of contents and poetry.
Tags used: span (with specific attributes)
Note: the DPUB-ARIA module role of doc-pagebreak is used. An ARIA label may be used for the number.
See issue 70
A new print page number may occur either within or between paragraphs. Information in the CSS determines how the new print page number is shown in the braille output. An aria-label may be used for the braille that represents the actual number part of the page number.
The text of the paragraph is interrupted by the new print page number:
<p>⠲⠲⠲ ⠁⠝⠙ ⠁⠇⠇ ⠞⠓⠑
<span id="page23" role="doc-pagebreak">⠼⠃⠉</span>
⠕⠞⠓⠑⠗⠎ ⠁⠛⠛⠗⠑⠑⠙⠲ ⠲⠲⠲</p>
The new page coincides with a heading and in this example, the new page number must be kept together with the heading:
<div class="keeptgr">
<span class="keepwithnext" id="pagexvii" role="doc-pagebreak" aria-label="⠠⠠⠭⠧⠊⠊"/>
<h2>⠠⠋⠕⠗⠑⠺⠕⠗⠙</h2>
</div>
<p>⠠⠞⠓⠊⠎ ⠃⠕⠕⠅ ⠊⠎ ⠁⠊⠍⠑⠙ ⠁⠞ ⠲⠲⠲</p>
Tags used: blockquote, code, p, pre, samp
See issue 67
Specific formatting requirements such as margins, blank lines, keep together and so on are controlled with CSS attributes.
Here is a simple "ordinary" paragraph. The words will be wrapped to fill the available space on the reading system:
<p>⠠⠞⠓⠑ ⠟⠥⠊⠉⠅ ⠃⠗⠕⠺⠝ ⠋⠕⠭ ⠚⠥⠍⠏⠎ ⠕⠧⠑⠗ ⠞⠓⠑ ⠇⠁⠵⠽ ⠙⠕⠛⠲</p>
No CSS information is given here, so the settings for indentation and blank lines will be the default settings in the style sheet.
This example includes two different kinds of paragraph. The "class" attribute in the second paragraph points to additional details given in the CSS file to change the margins. The CSS is not shown and the class name is for illustration only
<p>⠠⠞⠓⠊⠎ ⠊⠎ ⠁⠝ ⠕⠗⠙⠊⠝⠁⠗⠽ ⠏⠁⠗⠁⠛⠗⠁⠏⠓⠲</p>
<p class="display-57">⠠⠞⠓⠊⠎ ⠊⠎ ⠊⠝⠙⠑⠝⠞⠑⠙ ⠲⠲⠲</p>
<p>⠠⠁⠝⠕⠞⠓⠑⠗ ⠕⠗⠙⠊⠝⠁⠗⠽ ⠏⠁⠗⠁⠛⠗⠁⠏⠓⠲</p>
The following example uses the pre tag for text which must appear exactly as shown: spaces and line breaks will be preserved, text will not be wrapped to the available space.
The following example is a couple of bars of music in the bar-over-bar format. The "keeptgr" class (name for illustration only) in the CSS would make sure the lines are not separated over a page break.
<pre class="keeptgr">⠁ ⠨⠜⠨⠝⠫⠳ ⠺⠄⠽⠉⠵⠹⠧ ⠨⠎⠳⠰⠹
⠸⠜⠐⠙⠓⠋⠓⠶ ⠑⠓⠛⠓⠙⠓⠋⠓ ⠙⠐⠊⠛⠊⠐⠙⠓⠋⠓
</pre>
Tags used footer, header.
Running headers and/or footers generally appear at the top and/or bottom of physical pages of hardcopy braille. They may be completely ignored when reading on a refreshable braille display.
Different running header lines may be needed to cater for different lengths of reading line, particularly as shorter line lengths may require the header to be summarised.
Typically, a running header would be specified just after the heading to which it applies.
Details of how the running header appear, along with placement of running print and/or braille page numbers, is left to CSS.
See issue 66
The following running header is for chapter 17 of a book. The chapter heading is also given:
<h1 id="ch-17">⠠⠉⠓⠁⠏⠞⠑⠗ ⠼⠁⠛</h1>
<header>⠠⠙⠗⠲ ⠠⠞⠓⠕⠗⠝⠑⠲ ⠼⠁⠛</header>
Tags used: table, tbody, td, tfoot, th, thead, tr
See issue 69
The semantic description of the table (that is, what each cell contains and any associated headings) is given with the standard tags for tables.
Tables may be laid out in several ways in braille, the best method may depend on the available space on the reading system, or a user may choose to override the default. Details of the table format and relative sizes of items is defined in the style sheet.
The following is a simple table showing names and scores (perhaps at a game):
<table>
<tr>
<td>⠠⠚⠕⠓⠝</td>
<td>⠼⠃⠑</td>
</tr>
<tr>
<td>⠠⠍⠁⠭</td>
<td>#ag</td>
</tr>
<tr>
<td>⠠⠞⠁⠗⠁</td>
<td>⠼⠃⠓</td>
</tr>
</table>
Add headings to the previous table:
<table>
<tr>
<th>⠠⠝⠁⠍⠑</th>
<th>⠠⠎⠉⠕⠗⠑</th>
</tr>
<tr>
<td>⠠⠚⠕⠓⠝</td>
... (as per previous example)
</table>
Using a table header and body section, the table headings can remain fixed on a multiline display, or will be reiterated at the top of each embossed page.
<table>
<thead>
<tr>
<th>⠠⠙⠁⠞⠑</th>
<th>⠠⠙⠑⠎⠉⠗⠊⠏⠞⠊⠕⠝</th>
<th>⠠⠉⠗⠑⠙⠊⠞</th>
<th>⠠⠙⠑⠃⠊⠞</th>
</tr>
</thead>
<tbody>
<tr>
<td>⠼⠛ ⠠⠚⠥⠝</td>
<td>⠠⠉⠁⠎⠓ ⠺⠊⠞⠓⠙⠗⠁⠺⠁⠇</td>
<td></td>
<td>⠈⠎⠼⠁⠚⠚⠲⠚⠚</td>
</tr>
... (further rows)
</tbody>
</table>
to do