10.5.1 The hyphens property

Hyphenation is controlled with the hyphens property. Values have the following meanings:

none

Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.

manual

Words are only hyphenated where there are soft hyphens (U+00AD soft hyphen (shy)) inside the word. Soft hyphens are invisible format characters that explicitly suggest hyphenation opportunities, and that produce a hyphenation character only when a line is broken at that point. A translator may drop soft hyphens, e.g. when they appears inside a contraction.

Note

[UAX14] describes the role of soft hyphens in Unicode line breaking.

auto

Words may be broken at appropriate hyphenation points either as determined by soft hyphens inside the word or as determined automatically by the user agent (i.e. braille translator), based on document language and braille code. Hyphenation characters inside a word, if present, take priority over automatic hyphenation.

10.5.2 The hyphenate-character property

The hyphenate-character property specifies the character that is rendered at the end of the line before a hyphenation break.

The auto value means that it is up to the user agent to find an appropriate value.

11.1.1 The ::before and ::after pseudo-elements

The ::before and ::after pseudo-elements are used to insert content immediately before and immediately after the content of an element (or other pseudo-element). The generated boxes are contained within the superior parent's box. The content property is used to specify the content to insert.

11.1.2 Markers: the ::marker pseudo-element

The ::marker pseudo-element is used to represent a list item's marker (the bullet or number identifying the item). For a ::marker pseudo-element to be generated, its superior parent must have a computed display value of list-item. The default value of the pseudo-element's content property is determined by the list-style-type property of its superior parent.

11.2.1 Manipulating Counters: the counter-increment, counter-set and counter-reset properties

The counter-reset property creates new counters on an element. Its values are defined as follows:

none

The element does not create any new counters.

[ <custom-ident> <integer>? ]+

The element creates one or more new counters. If an <integer> is provided after a <custom-ident>, it is the starting value of the counter. Otherwise, the starting value of the new counter is 0.

The counter-set and counter-increment properties manipulate the value of existing counters. They only create new counters if there is no counter of the given name on the element yet. Their values are defined as follows:

none

The element does not alter the value of any counters.

[ <custom-ident> <integer>? ]+

The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name. If an <integer> is provided after a <custom-ident>, the value of the innermost counter of the given name is set to that integer (for counter-set) or incremented by that integer (for counter-increment). Otherwise, the value of the innermost counter of the given name is set to 0 (for counter-set) or incremented by 1 (for counter-increment).

Inheriting counters must be done before resetting counters, which must be done before setting counters, which must be done before incrementing counters, which must be done before using counters.

A counter in an element that does not generate a box cannot be set, reset, or incremented.

11.2.2 Creating and Inheriting Counters

Every element has a collection of zero or more counters, which are inherited through the document tree in a special way. A counter and its value are inherited separately, possibly from different elements.

If an element has preceding siblings, it inherits all of the immediately preceding sibling's counters. Otherwise, if the element has a parent, it inherits all of the parent's counters.

The element then inherits counter values from the immediately preceding element in document order. This is done by examining the set of counters that the immediately preceding element has, and, for every counter that exists in both the element's set and the preceding element's set, giving the element's counter the same value.

Additional counters can be created on elements with the counter-reset property. The effect depends on what other counters of that name exist on the element:

• If no counters of that name exist on the element, create a new counter with that name.
• Otherwise, if a counter of that name exists on the element, and it was created by a preceding sibling, replace the innermost counter of that name on the element with a newly-created counter with that name.
• Otherwise, create a new counter with that name and nest it inside of the innermost counter with that name.

The value of the new counter is set to the provided starting value.

A page counter is created automatically on the root element. Its purpose is for numbering braille pages. The counter is implicitely incremented on each page. Depending on the implementation, explicitely setting or incrementing this counter may or may not have an effect. No new counters can be created with the name page.

Implementations may define additional automatic counters.

11.2.3 Printing Counters: the counter() function

Counters can be used with the counter() function. This happens automatically in the default contents of ::marker pseudo-elements, but the function can be used anywhere a string value is allowed. The function takes the name of a counter and an optional <counter-style> name (which defaults to decimal) and returns a <string> value:

counter() = counter( <custom-ident> [, [ <counter-style> | none ] ]? )

The <string> value returned by the function is obtained as follows:

• If the second argument to the function is none, the function returns the empty string.
• Otherwise, the function generates a counter representation for the value of the innermost counter of that name on the element (or 0 if the element has no counter of that name), using the <counter-style> specified by the second argument.

<body>
  ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
  ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
  ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
</body>

@page {
  size: 10 5;
  margin-top: 1;
  @top-right {
    content: counter(page);
  }
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="5" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠀⠀⠼⠁</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠀⠀⠼⠃</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

11.2.4 Defining Counter Styles: the @counter-style rule

The @counter-style rule allows the definition of custom counter styles. A @counter-style rule consists of the keyword @counter-style, a name, and a block of declaractions (called desciptors) which define how a counter value is converted into a string. A counter styles's name must be a <custom-ident> not equal to none or decimal. The various descriptors that make up a counter style are described in [CSS3COUNTERSTYLES]. In addition, a counter style in Braille CSS can also have a text-transform descriptor.

User agents must define the decimal counter style as an ultimate fallback style. Agents may include additional predefined styles in their UA stylesheet. All counter styles, predefined or not, except for decimal, can be overridden.

@counter-style decimal {
  system: numeric;
  symbols: '⠚' '⠁' '⠃' '⠉' '⠙' '⠑' '⠋' '⠛' '⠓' '⠊'
}

In addition to the steps listed in [CSS3COUNTERSTYLES] for generating a counter representation, user agents in the ‘translator’ category must perform the necessary steps to ensure that the resulting representation is a braille string. The transformation to braille is influenced by the text-transform descriptor.

11.2.5 Default Marker Contents: the list-style-type property

The list-style-type property is used to construct the default contents of a list item's marker; otherwise, list-style-type is ignored. The values are defined as follows:

none

The marker's default contents are none.

<braille-string>

The <braille-string> is used as the marker's default contents.

<counter-style>

The marker's default content are <counter-prefix> counter( list-item, <counter-style> ) <counter-suffix> where <counter-prefix> and <counter-suffix> are the values of the prefix and suffix descriptors for the specified counter style.

11.3.1 The string-set property

The string-set property contains one or more pairs, each consisting of a custom identifier followed by a content-list describing how to construct the value of the named string.

<content-list> expands to one or more of the following values, in any order. The generated content is the concatenation of all values in the list.

content-list = [ <string> | <attr(<identifier>)> | <content()> ]+

<string>

A string.

<attr(<identifier>)>

An attr() function, as defined in [CSS3VAL].

<content()>

A content() function, which returns the string value of the element. Any text that is generated inside ::before or ::after pseudo-elements are not part of this. Elements that do not generate boxes can also have a non-empty string value.

Named strings contain unformatted text. XML structure and CSS styling are not preserved. Text transformation and white space processing of strings happens after evaluation of the variable (with the string() function) and not before assignment (with the string-set property). This means that text-transform and white-space properties can have an effect at the place of insertion, but not at the original position in the DOM.

The content values of named strings are assigned at the point when the content box (or first content box fragment) of the element is created, or if the element does not generate any boxes, would have been created if it was a non-empty inline element.

11.3.2 The string() function

The string() function is used to insert the value of a named string into the document via the content property. This function requires one argument, the name of the named string. Since the value of a named string may change several times on a page an optional second argument indicates which value of the named string should be used.

string() = string( <custom-ident> [ , [ first | start | last | start-except-last | last-except-start | page-first | page-start | page-last | page-start-except-last | page-last-except-start | spread-first | spread-start | spread-last | spread-start-except-last | spread-last-except-start | ] ]? )

The second argument of the string() function is one of the following keywords:

first

page-first

The value of the first assignment on the page is used. If there is no assignment on the page, the assignment in effect at the end of the previous page (entry value) is used. first is the default value.

start

page-start

The value of the first assignment on the page is used if the content box (fragment) of that element does not follow any other content boxes on the page. Otherwise the assignment in effect at the end of the previous page (entry value) is used.

last

page-last

The assignment in effect at the end of the current page (exit value) is used.

start-except-last

page-start-except-last

The assignment that would be used by start is used if it precedes another assignment on the current page. Otherwise the empty string is used.

last-except-start

page-last-except-start

The last assignment following a content box on the current page is used, or the empty string if there is no such assignment. Effectively this is the same as last but excluding the assignment that would be used by start (and all assignments that precede it).

spread-first

Analogous to first with ‘page’ replaced by ‘page spread’.

spread-start

Analogous to start with ‘page’ replaced by ‘page spread’.

spread-last

Analogous to last with ‘page’ replaced by ‘page spread’.

spread-start-except-last

Analogous to start-except-last with ‘page’ replaced by ‘page spread’.

spread-last-except-start

Analogous to last-except-start with ‘page’ replaced by ‘page spread’.

<body>
  <p foo="⠁">
    ⠁⠁⠁ ⠁⠁⠁ ⠁⠁⠁ ⠁⠁⠁ ⠁⠁⠁
  </p>
  <p foo="⠿">
    ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
  </p>
  <p foo="⠤">
    ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤
  </p>
  <p foo="⠸">
    ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸
  </p>
  <p foo="⠛">
    ⠛⠛⠛ ⠛⠛⠛ ⠛⠛⠛ ⠛⠛⠛ ⠛⠛⠛ ⠛⠛⠛ ⠛⠛⠛
  </p>
  <p foo="⠌">
    ⠌⠌⠌ ⠌⠌⠌ ⠌⠌⠌ ⠌⠌⠌ ⠌⠌⠌
  </p>
</body>

@page {
  size: 10 6;
  @top-left {
    content: string(foo, first); }
  @top-right {
    content: string(foo, start); }
  @bottom-left {
    content: string(foo, last); }
  @bottom-right {
    content: string(foo, last-except-start); }
}
p {
  display: block;
  string-set: foo attr(foo);
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="6" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠁⠀⠀⠀⠀⠀⠀⠀⠀⠁</row>
          <row>⠁⠁⠁⠀⠁⠁⠁</row>
          <row>⠁⠁⠁⠀⠁⠁⠁</row>
          <row>⠁⠁⠁</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠀⠀⠀⠀⠀⠀⠀⠀⠿</row>
        </page>
        <page>
          <row>⠤⠀⠀⠀⠀⠀⠀⠀⠀⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠀⠀⠀⠀⠀⠀⠀⠀⠤</row>
        </page>
        <page>
          <row>⠸⠀⠀⠀⠀⠀⠀⠀⠀⠤</row>
          <row>⠤⠤⠤</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸</row>
          <row>⠸⠀⠀⠀⠀⠀⠀⠀⠀⠸</row>
        </page>
        <page>
          <row>⠛⠀⠀⠀⠀⠀⠀⠀⠀⠛</row>
          <row>⠛⠛⠛⠀⠛⠛⠛</row>
          <row>⠛⠛⠛⠀⠛⠛⠛</row>
          <row>⠛⠛⠛⠀⠛⠛⠛</row>
          <row>⠛⠛⠛</row>
          <row>⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀</row>
        </page>
        <page>
          <row>⠌⠀⠀⠀⠀⠀⠀⠀⠀⠌</row>
          <row>⠌⠌⠌⠀⠌⠌⠌</row>
          <row>⠌⠌⠌⠀⠌⠌⠌</row>
          <row>⠌⠌⠌</row>
          <row/>
          <row>⠌⠀⠀⠀⠀⠀⠀⠀⠀⠀</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

11.5.1 The target-counter() function

The target-counter() function retrieves the value of the named counter at the element referred to by the <url>. The second argument is the name of the counter.

target-counter() = target-counter( <url>, <custom-ident> )

11.5.2 The target-string() function

The target-string() function retrieves the value of the named string at the element referred to by the <url>. The second argument is the name of the counter.

target-string() = target-string( <url>, <custom-ident> )

11.5.3 The target-text() function

The target-text() function retrieves the text value of the element referred to by the <url>.

target-text() = target-text( <url> )

12.1.1 The @page rule

The properties of a page box, such as its dimensions, are determined by properties declared within the page context, using @page rules.

A @page rule consists of the keyword @page, an optional page type selector, an optional page pseudo-class, and a block of declarations and margin at-rules (said to be in the page context). The page type selector matches pages of the named page type generated by the page property. Valid page pseudo-classes are :left, :right, :first and :blank. The :left and :right classes only match left or right pages, respectively. :first matches the first printed page of a volume. :blank matches content-empty pages that appear as the result of forced page breaks.

Declarations in page and margin contexts cascade as explained in the section Cascading in the page context [CSS3PAGE].

12.1.2 Page Size: the size property

The size property specifies the size of the page box's containing block. Values have the following meanings:

auto

The page box will be set to a size by the user agent. In the usual case, the size is chosen to match the printable area of the target page sheet.

<length>{2}

The page box will be set to the given dimensions. The first value establishes the page box width, and the second the page box height. Negative lengths are illegal.

The size property is not allowed within @page rules with a :left or :right pseudo-class.

12.1.3 Page-Margin Boxes

Page-margin boxes are boxes within the page margin that can contain generated content. Page margins can be used to create page headers and footers, which are portions of the page set aside for supplementary information such as the page number or document title. The 16 page-margin boxes are defined and illustrated in [CSS3PAGE].

Only 6 of the 16 page-margin boxes are relevant in braille CSS, namely top-left, top-center, top-right, bottom-left, bottom-center and bottom-right.

Page-margin boxes are created by margin at-rules inside the page context. A margin at-rule consists of an ATKEYWORD that identifies the page-margin box (e.g. @top-left) and a block of declaractions (said to be in the margin context).

A page-margin box is generated if and only if the computed value of its content property is not none and does not consist of collapsible white space only. The height of a page-margin box is determined by the number of line boxes it contains. Soft wrapping is not allowed in page-margin boxes, but forced line breaks are. This means that if white-space is normal, the height is 1, and if white-space is pre-wrap or pre-line, the height is equal to the number of segment breaks plus 1. Text that falls outside of the page-margin box edges (horizontally) is clipped.

The top-left, top-center and top-right boxes, if they are generated, touch the page box's top edge. The offset between the page box's top edge and the page area is determined by the margin-top property, which defaults to 0. Page-margin boxes with a height less than this offset have empty space between them and the page area. Page-margin boxes with a height greater than margin-top extend into the page area, with the text in the page area wrapping around the page-margin boxes.

Analogous rules govern the properties of the bottom page-margin area (with ‘top’ replaced by ‘bottom’ everywhere).

Text in top-left and bottom-left boxes is left-aligned (as if text-align was set to left), text in top-center and bottom-center boxes is centered (as if text-align was set to center) and text in top-right and bottom-right boxes is right-aligned (as if text-align was set to right). Further alignment can be achieved by padding text with preserved spaces.

12.1.4 Using Named Pages: the page property

The page property is used to specify a particular type of page (called a named page) on which an element must be displayed. If necessary, a forced page break is introduced and a new page generated of the specified type. The page can be styled by using the same type name in a page selector.

The page property does not inherit. However, if the page value on an element is auto, then its used value is the value specified on its nearest ancestor with a non-auto value. When specified on the root element, the used value for auto is the empty string.

<body>
  <div id="a">
    <p>
      ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤
      ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤
    </p>
  </div>
  <div id="b">
    <p>
      ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
      ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿
    </p>
  </div>
</body>

@page {
  size: 10 7;
  margin-top: 1;
  margin-bottom: 2;
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="7" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row/>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
        </page>
        <page>
          <row/>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row/>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page a { size: 8 4; }
@page b { size: 4 8; }
#a { page: a; }
#b { page: b; }

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="4" cols="8" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
        </page>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
        </page>
      </section>
      <section rows="8" cols="4">
        <page>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
        </page>
        <page>
          <row>⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page {
  size: 10 6;
  margin-top: 1;
  @top-right {
    content: '⠒⠒⠒⠒';
  }
}
@page b { margin-top: 2; }
#b { page: b; }

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="6" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠒⠒⠒⠒</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
        </page>
      </section>
      <section>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠒⠒⠒⠒</row>
          <row/>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠒⠒⠒⠒</row>
          <row/>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page {
  size: 10 6;
  margin-top: 2;
  @top-right {
    content: '⠒⠒⠒\A⠸⠸';
    white-space: pre-line;
  }
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="6" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠀⠒⠒⠒</row>
          <row>⠀⠀⠀⠀⠀⠀⠀⠀⠸⠸</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
        </page>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠀⠒⠒⠒</row>
          <row>⠀⠀⠀⠀⠀⠀⠀⠀⠸⠸</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠀⠀⠀⠀⠀⠀⠀⠒⠒⠒</row>
          <row>⠀⠀⠀⠀⠀⠀⠀⠀⠸⠸</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page {
  size: 10 6;
  @top-right {
    content: '⠒⠒⠒⠒';
  }
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="6" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠀⠀⠒⠒⠒⠒</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠿⠿⠿⠀⠀⠀⠒⠒⠒⠒</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page { size: 10 6; }
@page:left {
  @bottom-center {
    content: '⠂⠂⠂⠂⠂⠂'
  }
}

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="6" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row/>
          <row>⠀⠀⠂⠂⠂⠂⠂⠂⠀⠀</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

12.2.1 Controlling Page Breaks: the page-break-before, page-break-after, page-break-inside, orphans and widows properties

A page break opportunity between two boxes is under the influence of the containing block's page-break-inside property, the page-break-after property of the preceding element, and the page-break-before property of the following element. A page break opportunity between line boxes is under the influence of the containing block's widows and orphans properties. A break can be allowed, forced, or discouraged depending on the values of these properties. See the section Rules for Page Breaking below for the exact rules on how these properties affect page breaking.

These properties control page break behaviour before, after and within the element's principle box. Values have the following meanings:

auto

Neither force nor forbid a page break before/after/inside the principle box.

always

Always force a page break before/after the principle box.

avoid

Avoid a page break before/after/inside the principle box.

left

Force one or two page breaks before/after the principle box so that the next page is formatted as a left page.

right

Force one or two page breaks before/after the principle box so that the next page is formatted as a right page.

Since breaks are allowed between siblings, but not between a box and its container (see Rules for Page Breaking), a page-break-before value on a first-child box is propagated to its container. Likewise a page-break-after value on a last-child box is propagated to its container.

The orphans property specifies the minimum number of line boxes in a block container that must be left in a fragment before a page break. The widows property specifies the minimum number of line boxes of a block container that must be left in a fragment after a page break. Only positive integers are allowed. If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

<body>
  <p id="1"> ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ ⠤⠤⠤ </p>
  <p id="2"> ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ ⠿⠿⠿ </p>
  <p id="3"> ⠛⠛⠛ </p>
  <p id="4"> ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸ ⠸⠸⠸ </p>
</body>

@page { size: 10 5; }
p { display: block; }
p#1 { page-break-before: always; }
p#2 { page-break-after: always; }
p#3 { page-break-after: right; }

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="5" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠿⠿⠿</row>
        </page>
        <page>
          <row>⠛⠛⠛</row>
        </page>
      </section>
      <section>
        <page>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page { size: 10 5; }
p { display: block; }
p#2 { page-break-inside: avoid;}
p#3 { margin-top: 1; }
p#4 { page-break-before: avoid; }

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="5" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤</row>
        </page>
        <page>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
        </page>
        <page>
          <row/>
          <row>⠛⠛⠛</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

@page { size: 10 5; }
p { display: block; }
p#2 { widows: 2; }
p#3 { margin-top: 1; }
p#4 { orphans: 2; }
         

<pef xmlns="http://www.daisy.org/ns/2008/pef" version="2008-1">
  <head xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta>
      <dc:format>application/x-pef+xml</dc:format>
    </meta>
  </head>
  <body>
    <volume rows="5" cols="10" rowgap="0" duplex="true">
      <section>
        <page>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤⠀⠤⠤⠤</row>
          <row>⠤⠤⠤</row>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
        </page>
        <page>
          <row>⠿⠿⠿⠀⠿⠿⠿</row>
          <row>⠿⠿⠿</row>
          <row/>
          <row>⠛⠛⠛</row>
        </page>
        <page>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸⠀⠸⠸⠸</row>
          <row>⠸⠸⠸</row>
        </page>
      </section>
    </volume>
  </body>
</pef>

12.2.2 Rules for Page Breaking

A flow may be broken across pages at a number of possible break points. In the case of forced breaks, the UA is required to break the flow at that point. In the case of unforced breaks the UA has to choose among the possible breaks that are allowed. Page breaks can occur between sibling block-level boxes (class A break point), or between line boxes inside a block container box (class B break point).

A forced page break occurs at a class A break point if, among the page-break-after and page-break-before properties of all the elements generating boxes that meet at this margin, there is at least one with a forced break value (always, left, or right).

A forced break takes precedence over any break restrictions acting at that point. When multiple forced break values apply to a single break point, they combine such that all types of break are honored. When left, and right are combined, the value specified on the latest element in the flow wins.

A forced page break (type right) also occurs at a class A break point if the last line box above this margin and the first one below it do not have the same value for page.

Unforced page breaks are inserted automatically in order to prevent content from overflowing the page. The following rules control whether unforced breaking at a break point opportunity is allowed:

1. A page may be broken at a class A break point only if the page-break-after and page-break-before values applicable to this break point allow it, which is when at least one of them forces a break or when all of them are auto.
2. However, if all of them are auto and a common ancestor of all the elements has a page-break-inside value of avoid, then breaking here is not allowed.
3. Breaking at a class B break point is allowed only if the number of line boxes between the break and the start of the enclosing block box is the value of orphans or more, and the number of line boxes between the break and the end of the box is the value of widows or more.
4. Additionally, breaking at a class B break point is allowed only if the page-break-inside property of all ancestors is auto.

If the above doesn't provide enough break points to keep content from overflowing the page, then rules 1, 2 and 4 are dropped in order to find additional break points. If that still does not lead to sufficient break points, rule 3 is dropped as well.

12.2.3 Box Model for Page Breaking

Exactly how content breaks across pages is described in the section Box Model for Breaking [CSS3BREAK]. In short:

• When a page break splits a block-level box, the box's margins, borders, and padding have no visual effect where the split occurs.
• When a page break splits a block-level box, the box fragments may have different widths if the according page boxes have different widths.

13.5.1 Controlling Volume Breaks: the volume-break-before, volume-break-after and volume-break-inside properties

A volume break opportunity between two boxes is under the influence of the containing block's volume-break-inside property, the volume-break-after property of the preceding element, and the volume-break-before property of the following element. See the section Rules for Volume Breaking below for the exact rules on how these properties affect volume breaking.

These properties control volume break behaviour before, after and within the element's principle box. Values have the following meanings:

auto

Neither force nor forbid nor encourage a volume break before/after/inside the principle box.

always

Always force a volume break before/after the principle box.

prefer

Encourage a volume break before/after the principle box

avoid

Avoid a volume break before/after/inside the principle box.

Since breaks are allowed between siblings, but not between a box and its container (see Rules for Volume Breaking), a volume-break-before value on a first-child box is propagated to its container. Likewise a volume-break-after value on a last-child box is propagated to its container.

13.5.2 Rules for Volume Breaking

A flow may be broken across volumes at a number of possible break points. In the case of forced breaks, the UA is required to break the flow at that point. In the case of unforced breaks the UA has to choose among the possible breaks that are allowed. Volume breaks can occur between sibling block-level boxes (class A break point), or between line boxes inside a block container box (class B break point).

A forced volume break occurs at a class A break point if, among the volume-break-after and volume-break-before properties of all the elements generating boxes that meet at this margin, there is at least one with a forced break value (always). A forced break takes precedence over any break restrictions acting at that point.

A forced volume break also occurs at a class A break point if the last line box above this margin and the first one below it do not have the same value for volume.

Unforced volume breaks are inserted automatically in order to meet the max-length constraints. The following rules control whether unforced breaking at a break point opportunity is allowed:

1. A volume may be broken at a class A break point only if the volume-break-after and volume-break-before values applicable to this break point allow it, which is when at least one of them forces a break or when none of them are avoid.
2. However, if none of them force a break and a common ancestor of all the elements has a volume-break-inside value of avoid, then breaking here is not allowed.
3. Breaking at a class B break point is allowed only if the volume-break-inside property of all ancestors is auto.

If the above doesn't provide enough break points, the UA may break anywhere in order to avoid violating the max-length constraints.

In the end, all min-length constraints must be met as well, unless a volume being to short is the result of forced volume breaks.

14.1.1 The flow property

The flow property causes an element to participate in the specified flow. The value must be one of the following:

normal

This value causes an element or pseudo-element to participate in the normal flow.

<custom-ident>

This value causes an element or pseudo-element to participate in the named flow with the specified name. The element or pseudo-element will not generate a box at the original position in the DOM.

The flow property does not affect the DOM position of an element or its contents, and it does not affect the CSS cascade and inheritance.

The visual formatting model however uses the relationships between content in the named flow as input, rather than the contents' original position in the DOM. Elements channelled into a named flow become siblings. A box establishes a containing block for the content it consumes using the flow() function. Elements in a named flow are ordered according to their document order.

14.1.2 The ::alternate and ::duplicate pseudo-elements

Content can be generated or duplicated using the ::alternate and ::duplicate pseudo-elements. The content of an ::alternate pseudo-element is determined by its content property. The content of a ::duplicate pseudo-element is copied from the element in the document tree to which it is associated. The ::alternate(<n>) and ::duplicate(<n>) notations can be used to create several ::alternate or ::duplicate pseudo-elements for one given element.

The flow property dictates in which flow a pseudo-element participates. A value normal causes the pseudo-element to be included where the element in the document tree to which it is associated would be positioned. It is not allowed that several pseudo-elements associated to the same element participate in the same flow (normal or named flow), nor that they participate in the same flow as the element they are associated to.

Unlike other pseudo-elements, these pseudo-elements inherit from the parent of the element to which it they are associated, not from that element itself.

14.1.3 The flow() function

The flow() function is used to consume named flows, via the content property. The function requires one argument, the name of the flow. Elements in the named flow are rendered as children of the block container on which the content property is specified. In the default case, all elements in a named flow are consumed as many times as there are flow() calls. This behaviour can be overridden with an optional second argument that specifies which elements should be included. Elements in a flow are duplicated as many times as needed in order to meet the demand.

flow() = flow( <custom-ident> [, [ document | volume ] ]? )

The second argument dictates the search direction and range and is one of the following keywords:

document

All the elements that have been added to the flow or will be added later are inserted here.

volume

All the elements that have been added to the flow within the current volume or will be added later within the current volume are inserted here.

14.3.1 The @footnotes area