Ornaments

Ornaments are typically for print edition titles and whenever possible should be removed as they interfere with reading on devices/apps and do not render well in some device color modes.

Ornament names should be descriptive and if multiple ornaments are needed the naming should be distinct, example:

• topOrna.png: ornament assumed at the top maybe before a header.
• botOrna.png: ornament assumed for the bottom of something like a header or paragraph.

If an ornament is requested the height is usually set with CSS and no more than 3em should be used but this should be tested.

Use the following as a starter for an ornament:

HTML

html
1
<div class="ornament">
2
  <img src="../img/ornament.png" alt="ornament" />
3
</div>

CSS

css
1
.ornament {
2
  text-align: center;
3
  margin: 1em auto;
4
  height: 2.5em;
5
  max-height: 2.5em;
6
  position: relative;
7
}
8
.ornament img {
9
  display: inline-block;
10
  page-break-inside: avoid !important;
11
  text-align: center;
12
  margin: 0 auto;
13
  height: 100%;
14
}

Ornaments should never be placed in the toc.xhtml loi as they are for aesthetics and usually are not valuable to the content.