Example
As is often the case in textbooks, authors will include
examples in the middle of a chapter or section. For thisreason CNXML provides a tag that allows an author to include
examples in a document. The example tag has a unique
id
attribute and can contain most tags as
children, the first being an optional
title . For specifics you should
always consult the
CNXML
Spec .
<example id='tboneexam'><figure id='tbonefig'><title>T-Bone Steak</title><media id="image-example" display="block" alt="A T-bone Steak."><image type='image/jpg' src='tbone.jpg'/></media></figure></example>
Figure
The
figure
tag provides the structure for
creating a figure within a document. They can contain eithertwo or more
subfigure tags, or
a single
media ,
table , or
code tag.
The
figure
tag has two attributes:
-
id
- a unique ID, required -
orient
- defines how multiple subfigure s are to be displayed. It takes two values,vertical
orhorizontal
, and will default tohorizontal
.
The optional first tag of the
figure
tag is
title which is used to
title a figure.
The
title
tag is followed by any of the tags
listed above; however, the most commonly used tag is media,which is used to include any sort of media such as images,
video, music, or java applets. The media object tags have two requiredattributes:
-
src
- the location of the displayed media -
mime-type
- defines the type of media being displayed, which can be any valid MIME type.- audio - audio/mp3, audio/wav, etc.
- video - video/qt, video/mov, etc.
- image - image/png, image/gif, etc.
- application - application/PostScript, application/x-java-applet, etc.
The final tag is the optional
caption
which is
used to add a small caption to the figure.
<figure id='tbone'><title>T-Bone Steak</title><media id="image-example" display="block" alt="A T-bone Steak."><image mime-type='image/jpeg' src='tbone.jpg'/></media><caption>Upon successful completion of these documents, you should be able
to grill a steak that looks just as good!</caption></figure>
Subfigure
The
subfigure
tag is used when you want to
include more than one
media ,
code or
table within the same
figure .
The usage of the
subfigure
tag is similar to that
of
figure . It has an optional
id
attribute, an optional first child
title tag, a single
media ,
code or
table , followed by an optional
caption .
Now the
orient
attribute for
figure becomes very important.
orient
lets you specify whether the subfigures
should be displayed side-to-side or one on top of the other.
<figure orient='horizontal' id='horfig'><title>Steaks</title><subfigure id='subfigtbone1'><title>T-Bone</title><media id="image-example" display="block" alt="A T-bone Steak."><image type='image/jpeg' src='tbone.jpg'/></media></subfigure><subfigure id='subfingnystrip1'><title>New York Strip</title><media id="image-example" display="block" alt="A NY Strip."><image mime-type='image/jpeg' src='ny_strip.gif'/></media></subfigure><caption>Upon successful completion of these documents, you
should be able to grill a steak that looks just as good!</caption></figure>
Or
<figure orient='vertical' id='verfig'><title>Steaks</title><subfigure id='subfigtbone2'><title>T-Bone</title><media id="image-example" display="block" alt="A T-bone Steak."><image mime-type='image/jpeg' src='tbone.jpg'/></media></subfigure><subfigure id='subfig2'><title>New York Strip</title><media id="image-example" display="block" alt="A NY Strip."><image mime-type='image/jpeg' src='ny_strip.jpg'/></media></subfigure><caption>Upon successful completion of these documents, you
should be able to grill a steak that looks just as good!</caption></figure>