Copyright © DAISY Consortium 2024

…

The eBraille Working Group is seeking input on all aspects of this document. It is particularly interested in implementation experience both creating eBraille publication and creating reading systems in which to read them.

Any suggestions for formatting requirements that have not been covered in this best practices document yet, are welcomed. In particular, there are a number of specific formatting requirements for which examples are sought, and are indicated within this document as “issues”. Please follow the respective Github issue link and comment if you plan to provide an example, or create a new Github issue if you have another suggestion.

A suitable example consists of a short snippet of a content document, marked up according to the eBraille Tagging Best Practices, along with the expected formatted braille (for a certain row length), as rows of Unicode braille. It is valued if a short description in words (in English) of the braille formatting rule is included too.

Introduction

Overview

…

eBraille styling

The examples in this section assume that eBraille reading systems do not use the same default style sheets that web browsers do. To try these examples in a browser, make sure the following style sheet is applied and the same monospaced font and font size is used for all text:

* {
   font-weight: normal;
   line-height: 1rem;
   letter-spacing: 0;
   margin: 0;
   padding: 0;
   border: none;
   list-style: none;
   color: black;
   text-decoration: none;
}

Media queries

Through media queries, styles may be applied conditionally depending on the type and characteristics of the device. For instance:

The following example shows how style sheets for different media may be linked from a XHTML content document using the [[html]] link element. As per the recommendation, no media queries that discriminate between a braille display and a screen are used.

The following example shows how the number of columns in a column layout may be adapted according to the width of the viewport, using the @media rule [[css-conditional]] and width media feature [[mediaqueries]]:

Spacing

The following examples show how the margin-top and margin-bottom properties [[css-box]] may be used to create blank lines between blocks of text, and how margin-left and margin-right may be used to offset blocks of text from the left and right page boundaries.

A property of vertical margins is that they “collapse” with adjoining margins, meaning that they combine to form a single margin with a width that is the maximum of the collapsing margins' widths. This feature is useful to ensure that you don't get two blank lines because two adjacent elements both required a blank line in the same location.

Indentation

The following examples show how the margin-left [[css-box]] and text-indent [[css-text]] properties may be used to mark the start of paragraphs with an indent of two cells, or to mark the start of list items with a “hanging” indent.

When the indentation required for overrun lines depends on the maximum hierarchy level of the entire list, the :has() pseudo-class [[selectors]] may be used:

Alignment, positioning and spatial arrangement

The following example shows how the text-align property [[css-text]] may be used to horizontally align text within a block.

The following example shows how content may be spatially arranged using the flexible box layout module [[css-flexbox]]. flex-grow is used to align content horizontally. align-self is used to align content vertically. flex-shrink is used to ensure text in the right column doesn't wrap.

Text spacing

White space handling

Wrapping and breaking text

The following example shows how the text-wrap-style property [[css-text-4]] property may be used to balance the remaining space on each row when text spans multiple rows.

Page breaking and column layout

Borders and lines

The following examples show how the border-style and border-width properties [[css-backgrounds]] may be used to create box lines. margin and padding are used to control the spacing between the box lines, the text within the box, and the surrounding text.

Using border-style and border-width, one can draw lines with a certain thickness and pattern, but ultimately it is the eBraille reading system that approximates the lines with a series of raised braille dots. More control over the exact braille dot patterns used to make up the lines can be achieved through border images [[css-backgrounds]], as the following example demonstrates.

Another way to create lines is by specifying line patterns consisting of Unicode braille characters as the content [[css-content]] of ::before and ::after pseudo-elements [[css-pseudo]], as shown in the following examples. To make the layout adapt to varying device widths, the line pattern is extended long enough to always overflow the viewport. The overflow [[css-overflow]] and white-space [[css-text]] properties are used to hide the overflowing part of the line, while the justify-content property [[css-flexbox]] is used to align it to the right or left.

The following examples show how the same technique may be used to create a line of guide dots preceding a print page number.

Guide dots may also be used within a table layout, as the following examples shows.

Rendering of tables

This section will contain guidance for formatting requirements such as:

  • spatial layout of a table (see Alignment)
  • laying out a table as a list
  • abbreviating table headings
  • repeating table headers/footers on subsequent pages (in paged mode)
  • sticky table headers/footers (in scrolling mode)

Automatic numbering

Floating content

A float is an element that is shifted to the left or right side of the line, allowing surrounding content to flow around it. The next example demonstrates the principle. Line numbers are taken out of the normal flow and are floated to the right side.

Miscellaneous examples