All directives - triplecanopy/b-ber GitHub Wiki

All directives

b-ber extends Markdown with custom directives that are based off the EPUB 3 Structural Semantics Vocabulary. We selected a sub-set of terms from that vocabulary that allows for a rich markup language that is still easily readable for writers and editors but contains the majority of structural elements required for a published work. In addition to the directives based off the EPUB 3 Semantic Vocabulary, and following the same principles of readability, we developed an additional set of directives for handling different media layouts and interactive paradigms.

Directives are broken down into three categories: block, inline, and miscellaneous. Information as well as supported attributes are listed below. The id attribute is required on all directives and immediately follows a colon after the directive name.

::: chapter:my-chapter-id

Some content

::: exit:my-chapter-id

Block directives

Block directives act as containers for other content and give the markup semantic structure. Block directives must be exited with an exit tag with the corresponding directive id.

Attributes

Attribute Description
classes A list of HTML classes
title The section title

Directive names

frontmatter
halftitlepage
titlepage
dedication
epigraph
foreword
preface
acknowledgments
bodymatter
introduction
prologue
chapter
subchapter
epilogue
conclusion
part
volume
section
article
backmatter
afterword
loi
appendix
seriespage
credits
contributors
colophon

Example

::: chapter:chapter-one classes:"class-one class-two" title:"My First Chapter"

# Chapter One

::: exit:chapter-one

Inline directives

Inline directives are for presentational data like images, audio, and video. They are typically written on a single line, unless they support a caption. Each inline directive supports slightly different attributes.

Directive names

figure
figure-inline
video
video-inline
audio
audio-inline
iframe
iframe-inline
logo

Attributes

Figure and figure-inline

Attribute Description
alt Content for the image's alt attribute
caption The image caption. Supports markdown
classes A list of HTML classes
source The relative path to the image

Audio, video, audio-inline and video-inline

Attribute Description
source The relative path to the media
poster The relative path to the poster image
autoplay See the HTML5 media attribute *
loop See the HTML5 media attribute *
controls See the HTML5 media attribute *
muted See the HTML5 media attribute *
preload See the HTML5 media attribute *
autobuffer See the HTML5 media attribute *
buffered See the HTML5 media attribute *
mozCurrentSampleOffset See the HTML5 media attribute *
played See the HTML5 media attribute *
volume See the HTML5 media attribute *
crossorigin See the HTML5 media attribute *

iframe, iframe-inline

Attribute Description
title Content for the iframe's alt attribute
caption The iframe caption. Supports markdown
classes A list of HTML classes
source The online path to the iframe
poster The relative path to the poster image
height The height of the iframe
width The width of the iframe

Logo

Attribute Description
alt Content for the image's alt attribute
source The relative path to the image

Example

::: figure-inline:epigraph-image-one source:image-one.jpg
:: Caption for *image one*
::

::: video:video-one source:demo-video poster:square.jpg controls:yes
:: *Video* caption.
::

* For more information on HTML5 media attributes see MDN

⚠️ **GitHub.com Fallback** ⚠️