Add the first draft of the unified manual

This commit is contained in:
Alex Cabal 2020-03-12 22:10:14 -05:00
parent 4b8cbeb268
commit d78d2ee402
18 changed files with 3626 additions and 65 deletions

View file

@ -155,7 +155,7 @@ Define domain standardebooks.org
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-d
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI}.php -f
RewriteRule ^([^\.]+)$ $1.php [QSA]
RewriteRule ^(.+)$ $1.php [QSA]
# End PHP-FPM configuration
# Received: /filename and /filename.xml exists in filesystem; Result: rewrite to /filename.xml and end request

View file

@ -154,7 +154,7 @@ Define domain standardebooks.test
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-d
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI}.php -f
RewriteRule ^([^\.]+)$ $1.php [QSA]
RewriteRule ^(.+)$ $1.php [QSA]
# End PHP-FPM configuration
# Received: /filename and /filename.xml exists in filesystem; Result: rewrite to /filename.xml and end request

View file

@ -12,6 +12,10 @@ if(!isset($description)){
$description = '';
}
if(!isset($manual)){
$manual = false;
}
if(!isset($js)){
$js = false;
}
@ -24,6 +28,9 @@ if(!isset($js)){
<? if($description != ''){ ?><meta content="<?= Formatter::ToPlainText($description) ?>" name="description"><? } ?>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/css/core.css" media="screen" rel="stylesheet" type="text/css">
<? if($manual){ ?>
<link href="/css/manual.css" media="screen" rel="stylesheet" type="text/css">
<? } ?>
<link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">

View file

@ -1609,69 +1609,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
text-transform: uppercase;
}
.manual section,
.manual ol{
counter-reset: item;
}
.manual section{
margin-top: 2rem;
}
.manual section section{
margin-left: 2rem;
}
.manual section ol{
margin-top: 1rem;
margin-left: 2rem;
}
.manual section + section,
.manual ol + section{
counter-reset: none;
}
.manual ol li{
list-style: none;
}
.manual section::before,
.manual ol li::before{
counter-increment: item;
content: counters(item, ".");
font-style: italic;
position: absolute;
margin-left: -3rem;
}
.manual section::before{
font-family: 'League Spartan', sans-serif;
line-height: 1.2;
}
.manual > section::before{
font-size: 1.2rem;
}
.manual h2,
.manual h3,
.manual h4{
margin-top: 0;
}
.manual figure p{
hyphens: none;
}
.manual table td:first-child{
width: auto;
}
.manual table td code.path{
white-space: nowrap;
}
@media(max-width: 1100px){
article.ebook header{
width: calc(100% + 4rem);

163
www/css/manual.css Normal file
View file

@ -0,0 +1,163 @@
@import url("monokai.css");
.manual > section[data-start-at='1']{
counter-reset: root 1;
}
.manual > section[data-start-at='2']{
counter-reset: root 2;
}
.manual > section[data-start-at='3']{
counter-reset: root 3;
}
.manual > section[data-start-at='4']{
counter-reset: root 4;
}
.manual > section[data-start-at='5']{
counter-reset: root 5;
}
.manual > section[data-start-at='6']{
counter-reset: root 6;
}
.manual > section[data-start-at='7']{
counter-reset: root 7;
}
.manual > section[data-start-at='8']{
counter-reset: root 8;
}
.manual > section[data-start-at='9']{
counter-reset: root 9;
}
.manual > section[data-start-at='10']{
counter-reset: root 10;
}
.manual > section[data-start-at='11']{
counter-reset: root 11;
}
.manual > section[data-start-at='12']{
counter-reset: root 12;
}
.manual > section[data-start-at='13']{
counter-reset: root 13;
}
.manual > section[data-start-at='14']{
counter-reset: root 14;
}
.manual > section[data-start-at='15']{
counter-reset: root 15;
}
.manual > section section,
.manual ol{
counter-reset: item;
}
.manual section{
margin-top: 2rem;
}
.manual section section{
margin-left: 2rem;
}
.manual section ol{
margin-top: 1rem;
margin-left: 2rem;
}
.manual section + section,
.manual ol + section{
counter-reset: none;
}
.manual section[data-start-at] ol > li{
list-style: none;
}
.manual > section[data-start-at]::before{
content: counters(root, '.');
position: absolute;
width: 10rem;
text-align: right;
margin-left: -11rem;
margin-top: 2rem;
font-size: 2rem;
}
.manual h1 + section > h2:first-child{
margin-top: 0;
}
.manual > section[data-start-at] section::before,
.manual section[data-start-at] ol > li::before{
counter-increment: item;
content: counters(root, '.') '.' counters(item, ".");
position: absolute;
width: 10rem;
margin-left: -10.5rem;
text-align: right;
font-family: 'League Spartan', sans-serif;
font-weight: normal;
}
.manual .no-numbering::before{
content: none !important;
display: none !important;
}
.manual section[data-start-at] ol > li::before{
font-size: .75rem;
margin-top: .15rem;
}
.manual > section[data-start-at] > section::before{
font-style: normal;
margin-left: -11.5rem;
}
.manual section::before{
font-family: 'League Spartan', sans-serif;
line-height: 1.2;
}
.manual > section::before{
font-size: 1.2rem;
}
.manual h2,
.manual h3,
.manual h4,
.manual h5,
.manual h6{
margin-top: 0;
}
.manual figure p{
hyphens: none;
}
.manual table td:first-child{
width: auto;
}
.manual table td code.path{
white-space: nowrap;
}
.manual aside.tip{
font-style: italic;
margin: 1rem;
}

65
www/css/monokai.css Normal file
View file

@ -0,0 +1,65 @@
.hll { background-color: #49483e }
.c { color: #75715e } /* Comment */
.err { color: #960050; background-color: #1e0010 } /* Error */
.k { color: #66d9ef } /* Keyword */
.l { color: #ae81ff } /* Literal */
.n { color: #f8f8f2 } /* Name */
.o { color: #f92672 } /* Operator */
.p { color: #f8f8f2 } /* Punctuation */
.ch { color: #75715e } /* Comment.Hashbang */
.cm { color: #75715e } /* Comment.Multiline */
.cp { color: #75715e } /* Comment.Preproc */
.cpf { color: #75715e } /* Comment.PreprocFile */
.c1 { color: #75715e } /* Comment.Single */
.cs { color: #75715e } /* Comment.Special */
.gd { color: #f92672 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gi { color: #a6e22e } /* Generic.Inserted */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #75715e } /* Generic.Subheading */
.kc { color: #66d9ef } /* Keyword.Constant */
.kd { color: #66d9ef } /* Keyword.Declaration */
.kn { color: #f92672 } /* Keyword.Namespace */
.kp { color: #66d9ef } /* Keyword.Pseudo */
.kr { color: #66d9ef } /* Keyword.Reserved */
.kt { color: #66d9ef } /* Keyword.Type */
.ld { color: #e6db74 } /* Literal.Date */
.m { color: #ae81ff } /* Literal.Number */
.s { color: #e6db74 } /* Literal.String */
.na { color: #a6e22e } /* Name.Attribute */
.nb { color: #f8f8f2 } /* Name.Builtin */
.nc { color: #a6e22e } /* Name.Class */
.no { color: #66d9ef } /* Name.Constant */
.nd { color: #a6e22e } /* Name.Decorator */
.ni { color: #f8f8f2 } /* Name.Entity */
.ne { color: #a6e22e } /* Name.Exception */
.nf { color: #a6e22e } /* Name.Function */
.nl { color: #f8f8f2 } /* Name.Label */
.nn { color: #f8f8f2 } /* Name.Namespace */
.nx { color: #a6e22e } /* Name.Other */
.py { color: #f8f8f2 } /* Name.Property */
.nt { color: #f92672 } /* Name.Tag */
.nv { color: #f8f8f2 } /* Name.Variable */
.ow { color: #f92672 } /* Operator.Word */
.w { color: #f8f8f2 } /* Text.Whitespace */
.mb { color: #ae81ff } /* Literal.Number.Bin */
.mf { color: #ae81ff } /* Literal.Number.Float */
.mh { color: #ae81ff } /* Literal.Number.Hex */
.mi { color: #ae81ff } /* Literal.Number.Integer */
.mo { color: #ae81ff } /* Literal.Number.Oct */
.sb { color: #e6db74 } /* Literal.String.Backtick */
.sc { color: #e6db74 } /* Literal.String.Char */
.sd { color: #e6db74 } /* Literal.String.Doc */
.s2 { color: #e6db74 } /* Literal.String.Double */
.se { color: #ae81ff } /* Literal.String.Escape */
.sh { color: #e6db74 } /* Literal.String.Heredoc */
.si { color: #e6db74 } /* Literal.String.Interpol */
.sx { color: #e6db74 } /* Literal.String.Other */
.sr { color: #e6db74 } /* Literal.String.Regex */
.s1 { color: #e6db74 } /* Literal.String.Single */
.ss { color: #e6db74 } /* Literal.String.Symbol */
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.vc { color: #f8f8f2 } /* Name.Variable.Class */
.vg { color: #f8f8f2 } /* Name.Variable.Global */
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
.il { color: #ae81ff } /* Literal.Number.Integer.Long */

233
www/manual/1.0/art.php Normal file
View file

@ -0,0 +1,233 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '10. Art - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="10" id="art">
<h1>Art</h1>
<p>When you create a new Standard Ebooks draft using the <code class="bash">se create-draft</code> tool, youll already have templates for the cover and titlepage images present in <code class="path">./images/</code>.</p>
<p>Text in these SVG files is represented as text, not paths, so you can edit them using a text editor and not an SVG editor. Then, the <code class="bash">se build-images</code> tool converts these text-based source images into path-based compiled images, for distribution in the final epub file. We do this so to avoid having to distribute the font files along with the epub.</p>
<p>To develop cover and titlepage images, you must have the free <a href="https://github.com/theleagueof/league-spartan">League Spartan</a> and <a href="https://github.com/theleagueof/sorts-mill-goudy">Sorts Mill Goudy</a> fonts installed on your system.</p>
<section id="complete-list-of-files">
<h2>Complete list of files</h2>
<p>A complete set of image source files consists of:</p>
<ul>
<li><code class="path">./images/cover.source.jpg</code>: The full source image used for the cover art, in as high a resolution as possible. Can be of any image format, but typically we end up with JPGs.</li>
<li><code class="path">./images/cover.jpg</code>: A cropped part of the source image that will serve as the actual image file we use in the cover. Must be exactly 1400w × 2100h.</li>
<li><code class="path">./images/cover.svg</code>: The SVG source file for the cover, with any text represented as actual, editable text. Must be exactly 1400w × 2100h pixels. Since the final cover image SVG has the text converted to paths, we keep this file around to make it easier to make changes to the cover in the future.</li>
<li><code class="path">./src/epub/images/cover.svg</code>: The final SVG cover image. This image should be exactly like <code class="path">./images/cover.svg</code>, but with the text converted to paths.
<p>This image is generated by the <code class="bash">se build-images</code> tool.</p>
</li>
<li><code class="path">./images/titlepage.svg</code>: The SVG source file for the titlepage, with any text represented as actual, editable text. Must be exactly 1400 pixels wide, but the height must exactly match the text height plus some padding (described below).</li>
<li><code class="path">./src/epub/images/titlepage.svg</code>: The final SVG titlepage image, with text converted to paths just like the cover page.
<p>This image is generated by the <code class="bash">se build-images</code> tool.</p>
</li>
</ul>
</section>
<section id="svg-patterns">
<h2>SVG patterns</h2>
<ol type="1">
<li>SVGs are only sized with <code class="html">viewBox</code>, not <code class="html">height</code> or <code class="html">width</code>.
<ol type="1">
<li>The <code class="html">viewBox</code> attribute consists of whole numbers, without fractions.</li>
</ol>
</li>
<li>The only attributes on the <code class="html"><span class="p">&lt;</span><span class="nt">svg</span><span class="p">&gt;</span></code> root element are: <code class="html">xmlns</code>, <code class="html">version</code>, and <code class="html">viewBox</code>.</li>
<li>The contents of the SVGs <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element matches the <code class="html">alt</code> attribut of its <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> element in the text.</li>
<li>Grouping with <code class="html"><span class="p">&lt;</span><span class="nt">g</span><span class="p">&gt;</span></code> is avoided, unless it makes semantic sense. Groups whose sole purpose is to apply transforms should have those transforms applied to the children, and the group removed.</li>
<li>The use of fill color is avoided unless strictly necessary. Not defining a fill color allows for night mode compatibility.</li>
<li>The <code class="html">transform</code> attribute is illegal; transforms are applied to their elements directly.</li>
</ol>
</section>
<section id="the-cover-image">
<h2>The cover image</h2>
<aside class="warning">
<p>The SE Editor-in-Chief must review and approve of the cover art you select before you can commit it to your repository.</p>
<p><strong>Do not commit cover art without contacting the mailing list first!</strong></p>
</aside>
<p>The cover image is auto-generated by the <code class="bash">se create-draft</code> tool. The arrangement of the text is a suggestion, and may be changed by the producer in case a more visually-pleasing arrangment is desired.</p>
<p>After completing <code class="path">./images/cover.svg</code>, use the <code class="bash">se build-images</code> tool to build the rasterized distribution SVG in <code class="path">./src/epub/images/cover.svg</code>.</p>
<section id="cover-image-layout">
<h3>Cover image layout</h3>
<p><code class="bash">se create-draft</code> generates <code class="path">./images/cover.svg</code> for you with correct dimensions and layout. Its rarely necessary to edit the cover.</p>
<ol type="1">
<li>Both the title and author are in League Spartan font with 5px letter spacing in ALL CAPS.</li>
<li>The left and right sides of the black title box have at least 40px padding. More padding is preferrable over cramming the title in.</li>
<li>Translators, illustrators, and other contributors besides the author do not appear on the cover.</li>
<li>The group of both the title and author lines is horizontally centered in the black title box.</li>
</ol>
<section id="title-line-dimensions">
<h4>Title line dimensions</h4>
<ol type="1">
<li>One-line titles: the line is 80px tall. Example: <i><a href="/ebooks/niccolo-machiavelli/the-prince/w-k-marriott">The Prince</a></i>, by Niccolò Machiavelli.</li>
<li>Two-line titles: each line is 80px tall, and the second title line is 20px below the first line. Example: <i><a href="/ebooks/fyodor-dostoevsky/crime-and-punishment/constance-garnett">Crime and Punishment</a></i>, by Fyodor Dostoevsky.</li>
<li>Two-line, very long titles: each line is 60px tall, and the second line is 20px below the first line. Example: <i><a href="/ebooks/selma-lagerlof/the-wonderful-adventures-of-nils/velma-swanston-howard">The Wonderful Adventures of Nils</a></i>, by Selma Lagerlöf.</li>
<li>Two-line, extremely long titles: each line is 50px tall, and the second line is 20px below the first line. Example: <i><a href="/ebooks/rudolph-erich-raspe/the-surprising-adventures-of-baron-munchausen">The Surprising Adventures of Baron Munchausen</a></i>, by Rudolph Erich Raspe.</li>
</ol>
</section>
<section id="author-line-dimensions">
<h4>Author line dimensions</h4>
<ol type="1">
<li>The first author line begins 60px below the last title line.</li>
<li>One-line authors: the line is 40px tall.</li>
<li>Two-line authors: each line is 40px tall, and the second author line is 20px below the first line.</li>
</ol>
</section>
</section>
<section id="cover-art">
<h3>Cover art</h3>
<ol type="1">
<li><code class="path">./images/cover.svg</code> links to <code class="path">./images/cover.jpg</code> as the canvas background.</li>
<li><code class="path">./images/cover.jpg</code> is 1400w × 2100h in pixels, and is compressed as much as possible while maintaining an acceptable image quality. An acceptable level of image quality is more important than file size.</li>
<li>Because <code class="path">./images/cover.jpg</code> is an image with large dimensions, it must be sourced from a high-resolution scan. It may not always be possible to locate a high-resolution scan, so a smaller source image may be upscaled <em>a small amount</em> to meet the target dimensions.</li>
<li>Cover art is in the “fine art oil painting” style. Art not in this style, like modern CG art, is not acceptable.</li>
<li><code class="path">./images/cover.source.svg</code> is the unmodified source image used to create <code class="path">./images/cover.jpg</code>. This image is kept in case changes to the source images are to be made in the future.</li>
</ol>
<section id="us-pd-clearance">
<h4>US-PD clearance</h4>
<p>The paintings we use are all in the U.S. public domain (US-PD). Your task is to locate a painting suitable for the kind of book youre producing, and then demonstrate that the painting is indeed in the U.S. public domain.</p>
<p>U.S. copyright law is complicated. Because of this, <strong>we require that you provide a link to a page scan of a 1924-or-older book that reproduces the painting you selected.</strong> <em>This is a hard requirement</em> to demonstrate that the painting you selected is in fact in the U.S. public domain. Just because a painting is very old, or Wikipedia says its PD, or its PD in a country besides the U.S., doesnt necessarily mean it actually <em>is</em> PD in the U.S.</p>
<section id="clearance-procedure">
<h5>Clearance procedure</h5>
<p>To actually demonstrate that a painting is PD, you must locate a reproduction of that painting in a 1924-or-older book.</p>
<p>This can be quite difficult. Many people find this to be the most time-consuming part of the ebook production process.</p>
<p>Because of the difficulty, finding suitable cover at is <em>all about compromise</em>. Youre unlikely to find the perfect cover image. Youll find a lot of paintings that would be great matches, but that you cant find reproductions of and thus we cant use. So, be ready to compromise.</p>
<p>Note that in <code class="path">./images/cover.svg</code>, the black title and author box always goes in the lower half of the work. Thus, paintings in which some important detail would be obscured by the box cannot be used.</p>
<ul>
<li>Before you can go looking for a reproduction of a specific painting to prove its PD status, you have to find a suitable painting to begin with. <a href="https://www.wikiart.org/">Wikiart.org</a> is a great resource to search for paintings by keyword. Museum online collections are another good place to look for inspiration.
<p>Once you find a potential candidate you can start researching its PD status.</p>
</li>
<li>Many museum online catalogs have a “bibliography” or “references” section for each painting in their collection. This is usually a list of books in which the painting was either mentioned or reproduced. This is a good shortcut to finding the names of books in which a painting was reproduced, and if youre lucky, a search for the book title in Google Books will turn up scans.</li>
<li>Visit <a href="https://books.google.com/">Google Books</a>, <a href="https://www.hathitrust.org">HathiTrust</a>, and the <a href="https://archive.org">Internet Archive</a> to begin searching for books where your art is reproduced.
<p>(Note that if your IP address is not in the U.S., many book archives like Google Books and HathiTrust may disable book previews.)</p>
<p>When searching for cover art, remember that artist names and painting titles may be spelled in many different ways. Often a painting went by multiple titles, or if the title was not in English, by many different translations. Your best bet is to simply search for an artists last name, and not the painting title.</p>
</li>
<li>Once you locate a book with reproductions, open the book up in thumbnail view and quickly eyeball the pages to see if the artwork is reproduced there.</li>
</ul>
<section id="gotchas">
<h6>Gotchas</h6>
<ul>
<li>In older books it was common to have <em>etchings</em> of paintings. Etchings are not strict reproductions, and so we cannot count them for PD clearance.
<p>Additionally, it was common for painters to produce several different versions of the same artwork. These different versions are also not enough for PD clearance. The version you find in print must exactly match the scan you located online.</p>
<p>Before completing PD clearance, carefully compare the reproduction in the page scan with the high-resolution scan to ensure they are the same painting. Small details like the position of trees, clouds, reflections, or water are good ways to check if the painting is identical, or if youre looking at a different version.</p>
</li>
<li>Sometimes the catalog record for a book has an incorrect publication year. Please verify the page scan of the copyright page to ensure the book is 1924 or older.</li>
</ul>
</section>
</section>
<section id="resources-for-locating-high-resolution-scans">
<h5>Resources for locating high resolution scans</h5>
<ul>
<li><a href="https://commons.wikimedia.org">Wikimedia Commons</a></li>
<li><a href="https://www.google.com/culturalinstitute/project/art-project">Google Art Project</a></li>
<li><a href="https://www.wikiart.org">WikiArt</a></li>
</ul>
</section>
<section id="resources-for-locating-print-reproductions">
<h5>Resources for locating print reproductions</h5>
<ul>
<li><a href="https://books.google.com">Google Books</a>
<p><a href="https://www.google.com/webhp?tbs=cdr:1,cd_min:,cd_max:1924&amp;amp;tbm=bks">Use this shortcut</a> to search for books that were published in 1924 or earlier.</p>
<p>Google Books is a convenient first stop because its thumbnail view is very fast, and it does a better job of highlighting search results than HathiTrust or Internet Archive.</p>
</li>
<li><a href="https://www.hathitrust.org">HathiTrust</a>
<p><a href="https://babel.hathitrust.org/cgi/ls?a=srchls&amp;amp;anyall1=all&amp;amp;q1=&amp;amp;field1=ocr&amp;amp;op3=AND&amp;amp;yop=before&amp;amp;pdate_end=1924">Use this shortcut</a> to search for books that were published in 1924 or earlier.</p>
</li>
<li><a href="https://archive.org">Internet Archive</a>
<p><a href="https://archive.org/search.php?query=+date%3A%5B1850-01-01+TO+1924-12-31%5D&amp;amp;sin=TXT&amp;amp;sort=-date">Use this shortcut</a> to search for books that were published in 1924 or earlier.</p>
</li>
<li>Our own <a href="uncategorized-art-resources">list of uncategorized art books</a> may be helpful to browse through for inspiration and easy US-PD clearance.</li>
</ul>
</section>
<section id="museums-with-cc0-collections">
<h5>Museums with CC0 collections</h5>
<p>Images that are explicitly marked as CC0 from these museums can be used without further research. Not all of their images are CC0; you must confirm the presence of a CC0 license on the specific image you want to use.</p>
<ul>
<li><a href="https://www.rijksmuseum.nl/en/search?q=&amp;f=1&amp;p=1&amp;ps=12&amp;type=painting&amp;imgonly=True&amp;st=Objects">Rijksmuseum</a> (Open the “Object Data” section and check they “Copyright” entry under the “Acquisition and right” section to confirm CC0)</li>
<li><a href="https://www.europeana.eu/portal/en/collections/art?f%5BDATA_PROVIDER%5D%5B%5D=Finnish+National+Gallery&amp;f%5BREUSABILITY%5D%5B%5D=open&amp;f%5BRIGHTS%5D%5B%5D=http%2A%3A%2F%2Fcreativecommons.org%2F%2Apublicdomain%2Fzero%2A&amp;per_page=96&amp;view=grid">Finnish National Gallery via Europeana</a> (Use the “View at” link under the “Find out more” header to confirm CC0 license at the museums site)</li>
<li><a href="https://www.metmuseum.org/art/collection/search#!/search?material=Paintings&amp;showOnly=withImage%7Copenaccess&amp;sortBy=Relevance&amp;sortOrder=asc&amp;perPage=20&amp;offset=0&amp;pageSize=0">Met Museum</a> (CC0 items have the CC0 logo under the image)</li>
<li><a href="https://www.nationalmuseum.se/en/samlingarna/fria-bilder">National Museum Sweden</a> (CC-PD items have the CC-PD mark in the lower left of the items detail view)</li>
<li><a href="https://collections.artsmia.org/">Minneapolis Institute of Art</a> (Public domain items are listed as such under “Rights”)</li>
<li><a href="https://art.thewalters.org/">The Walters Art Museum</a> (Public domain items are listed as "CC Creative Commons License" which links to a CC0 rights page)</li>
<li><a href="https://www.artic.edu/collection?q=test&amp;is_public_domain=1&amp;department_ids=European+Painting+and+Sculpture">Art Institute of Chicago</a> (CC0 items say CC0 in the lower left of the painting in the art detail page)</li>
<li><a href="http://www.clevelandart.org/art/collection/search?only-open-access=1&amp;filter-type=Painting">Cleveland Museum of Art</a> (CC0 items have the CC0 logo near the download button.)</li>
<li><a href="http://parismuseescollections.paris.fr/en/recherche/image-libre/true/avec-image/true/denominations/peinture-166168?mode=mosaique&amp;solrsort=ds_created%20desc">Paris Musées</a> (CC0 items have the CC0 logo near the download button.)</li>
<li><a href="https://www.si.edu/search/collection-images?edan_q=landscape&amp;edan_fq[0]=object_type%3A&#34;Paintings&#34;">The Smithsonian</a> (CC0 items say CC0 under the Usage header in the item details.)</li>
</ul>
</section>
<section id="clearance-faq">
<h5>Clearance FAQ</h5>
<ul>
<li><strong>I found a great painting, and Wikipedia says its public domain, but I cant find a reproduction in a book. Can I use it?</strong>
<p>No. You must find a reproduction of your selected painting in a book published in 1924 or earlier.</p>
</li>
<li><strong>I found a great painting, and its really old, and the author died a long time ago, but I cant find a reproduction in a book. Can I use it?</strong>
<p>No. You must find a reproduction of your selected painting in a book published in 1924 or earlier.</p>
</li>
<li><strong>Ive found a reproduction in a book, but the book is from 1925. Is that OK?</strong>
<p>No. You must find a reproduction of your selected painting in a book published in 1924 or earlier.</p>
</li>
<li><strong>Ive found scan on a random museum site. Is that OK?</strong>
<p>No. You must find a reproduction of your selected painting in a book published in 1924 or earlier.</p>
</li>
<li><strong>But...</strong>
<p>No. You must find a reproduction of your selected painting in a book published in 1924 or earlier.</p>
</li>
</ul>
</section>
</section>
</section>
</section>
<section id="the-titlepage-image">
<h2>The titlepage image</h2>
<p>The titlepage image is auto-generated by the <code class="bash">se create-draft</code> tool. The arrangement of the text is a suggestion, and may be changed by the producer in case a more visually-pleasing arrangment is desired.</p>
<p>After completing <code class="path">./images/titlepage.svg</code>, use the <code class="bash">se build-images</code> tool to build the rasterized distribution SVG in <code class="path">./src/epub/images/titlepage.svg</code>.</p>
<section id="titlepage-image-layout">
<h3>Titlepage image layout</h3>
<ol type="1">
<li>The title, author, other contributors are in League Spartan font with 5px letter spacing in ALL CAPS.</li>
<li>The titlepage does not include subtitles.
<p>For example, the titlepage would contain <code class="html">THE MAN WHO WAS THURSDAY</code>, but not <code class="html">THE MAN WHO WAS THURSDAY: A NIGHTMARE</code>.</p>
</li>
<li>Names of contributors besides the author are preceded by <code class="html">translated by</code> or <code class="html">illustrated by</code>. <code class="html">translated by</code> and <code class="html">illustrated by</code> are set in lowercase Sorts Mill Goudy Italic font.</li>
<li>Only the author, translator, and illustrator are on the titlepage. Other contributors like writers of introductions or annotators are not included.</li>
<li>The canvas has a padding area of 50px vertically and 100px horizontally in which text must not enter.</li>
<li>The viewbox width is exactly 1400px wide.</li>
<li>The viewbox height must <em>precisely fit the titlepage contents, plus 50px padding</em>.</li>
</ol>
<section id="id1">
<h4>Title line dimensions</h4>
<ol type="1">
<li>Each title line is 80px tall.</li>
<li>The title is split into as many lines as necessary to fit.</li>
<li>Title lines are separated by a 20px margin between each line.</li>
</ol>
</section>
<section id="id2">
<h4>Author line dimensions</h4>
<ol type="1">
<li>The first author line begins 100px below the last title line.</li>
<li>Each author line is 60px tall.</li>
<li>If an author line must be split, the next line begins 20px below the previous one.</li>
<li>For works with multiple authors, subsequent author lines begin 20px below the last author line.</li>
</ol>
</section>
<section id="contributor-lines-dimensions">
<h4>Contributor lines dimensions</h4>
<ol type="1">
<li>“Contributors” are a “contributor descriptor, like <code class="html">translated by</code>, followed by the contributor name on a new line.</li>
<li>The first contributor descriptor line begins 150px below the last author line.</li>
<li>Contributor descriptor lines are 40px tall, all lowercase, in the Sorts Mill Goudy Italic font.</li>
<li>The contributor name begins 20px below the contributor descriptor line.</li>
<li>The contributor name is 40px tall, ALL CAPS, in the League Spartan font.</li>
<li>If there is more than one contributor of the same type (like multiple translators), they are listed on one line. If there are two, separate them with <code class="html">AND</code>. If there are more than two, separate them with commas, and <code class="html">AND</code> after the final comma. Example: <i><a href="/ebooks/hermann-hesse/siddhartha/gunther-olesch_anke-dreher_amy-coulter_stefan-langer_semyon-chaichenets">Siddhartha</a></i>, by Hermann Hesse.</li>
<li>If there is more than one contributor type (like both a translator and an illustrator), the next contributor descriptor begins 80px after the last contributor name.</li>
</ol>
</section>
</section>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,182 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '1. XHTML, CSS, and SVG Code Style - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="1" id="xhtml-css-and-svg-code-style">
<h1>XHTML, CSS, and SVG Code Style</h1>
<p>The <code class="bash">se clean</code> tool in the <a href="https://github.com/standardebooks/tools">Standard Ebooks toolset</a> formats XHTML code according to our style guidelines. The vast majority of the time its output is correct and no further modifications to code style are necessary.</p>
<section id="xhtml-formatting">
<h2>XHTML formatting</h2>
<ol type="1">
<li>The first line of all XHTML files is:
<figure><code class="html full"><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span></code></figure>
</li>
<li>The second line of all XHTML files is (replace <code class="html">xml:lang="en-US"</code> with the <a href="https://en.wikipedia.org/wiki/IETF_language_tag">appropriate language tag</a> for the file):
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xmlns:epub</span><span class="o">=</span><span class="s">&quot;http://www.idpf.org/2007/ops&quot;</span> <span class="na">epub:prefix</span><span class="o">=</span><span class="s">&quot;z3998: http://www.daisy.org/z3998/2012/vocab/structure/, se: https://standardebooks.org/vocab/1.0&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-US&quot;</span><span class="p">&gt;</span></code></figure>
</li>
<li>Tabs are used for indentation.</li>
<li>Tag names are lowercase.</li>
<li>Tags whose content is <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a> are on a single line, with no whitespace between the opening and closing tags and the content.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
It was a dark and stormy night...
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was a dark and stormy night...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="br-elements">
<h3><code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> elements</h3>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> elements within <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a> are on the same line as the precediong phrasing content, and are followed by a newline.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>Demoiselle Jeanne DYs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>The next indentation level after a <code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> element is the same as the previous indentation level.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs,<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
who died<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
in her youth for love of<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Philip, a Stranger.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs,<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
who died<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
in her youth for love of<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Philip, a Stranger.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>The closing tag of the phrasing content broken by a <code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> element is on the same line as the last line of the phrasing content.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs.
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> elements have phrasing content both before and after; they dont appear with phrasing content only before, or only after.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Pray for the soul of the<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Demoiselle Jeanne DYs<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="attributes">
<h3>Attributes</h3>
<ol type="1">
<li>Attributes are in alphabetical order.</li>
<li>Attributes, their namespaces, and their values are lowercase, except for values which are IETF language tags. In IETF language tags, the language subtag is capitalized.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">EPUB:TYPE</span><span class="o">=</span><span class="s">&quot;CHAPTER&quot;</span> <span class="na">XML:LANG</span><span class="o">=</span><span class="s">&quot;EN-US&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-US&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
</li>
<li>The string <code class="html">utf-8</code> is lowercase.</li>
</ol>
<section id="classes">
<h4>Classes</h4>
<ol type="1">
<li>Classes are not used as one-time style hooks. There is almost always a clever selector that can be constructed instead of taking the shortcut of adding a class to an element.</li>
<li>Classes are named semantically, describing <em>what they are styling</em> instead of the <em>resulting visual style</em>.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>There was one great tomb more lordly than all the rest; huge it was, and nobly proportioned. On it was but one word<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;small-caps&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dracula.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>There was one great tomb more lordly than all the rest; huge it was, and nobly proportioned. On it was but one word<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tomb&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dracula.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</section>
<section id="css-formatting">
<h2>CSS formatting</h2>
<ol type="1">
<li>The first two lines of all CSS files are:
<figure><code class="css full"><span class="p">@</span><span class="k">charset</span> <span class="s2">&quot;utf-8&quot;</span><span class="p">;</span>
<span class="p">@</span><span class="k">namespace</span> <span class="nt">epub</span> <span class="s2">&quot;http://www.idpf.org/2007/ops&quot;</span><span class="p">;</span></code></figure>
</li>
<li>Tabs are used for indentation.</li>
<li>Selectors, properties, and values are lowercase.</li>
</ol>
<section id="selectors">
<h3>Selectors</h3>
<ol type="1">
<li>Selectors are each on their own line, directly followed by a comma or a brace with no whitespace inbetween.
<figure class="wrong"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="o">,</span> <span class="p">.</span><span class="nc">signature</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="o">,</span>
<span class="p">.</span><span class="nc">signature</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Complete selectors are separated by exactly one blank line.
<figure class="wrong"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">strong</span><span class="p">{</span>
<span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">strong</span><span class="p">{</span>
<span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Closing braces are on their own line.</li>
</ol>
</section>
<section id="properties">
<h3>Properties</h3>
<ol type="1">
<li>Properties are each on their own line (even if the selector only has one property) and indented with a single tab.
<figure class="wrong"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span> <span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li><em>Where possible</em>, properties are in alphabetical order.
<p>This isnt always possible if a property is attempting to override a previous property in the same selector, and in some other cases.</p>
</li>
<li>Properties are directly followed by a colon, then a single space, then the property value.
<figure class="wrong"><code class="css full"><span class="nt">blockquote</span><span class="p">{</span>
<span class="k">margin-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">margin-right</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">border</span><span class="p">:</span><span class="kc">none</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">blockquote</span><span class="p">{</span>
<span class="k">margin-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">margin-right</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">border</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Property values are directly followed by a semicolon, even if its the last value in a selector.
<figure class="wrong"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="svg-formatting">
<h2>SVG Formatting</h2>
<ol type="1">
<li>SVG formatting follows the same directives as <a href="/manual/1.0/code-style#1.1">XHTML formatting</a>.</li>
</ol>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,231 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '2. Filesystem Layout and File Naming Conventions - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="2" id="filesystem-layout-and-file-naming-conventions">
<h1>Filesystem Layout and File Naming Conventions</h1>
<!-- An introduction is required for the data-start-at class to take effect. -->
<p>Filenames aim to be clear, common-sense descriptions of their contents.</p>
<section id="file-locations">
<h2>File locations</h2>
<ol type="1">
<li>XHTML files containing the actual text of the ebook are located in <code class="path">./src/epub/text/</code>. All files in this directory end in <code class="path">.xhtml</code>.</li>
<li>CSS files used in the ebook are located in <code class="path">./src/epub/css/</code>. All files in this directory end in <code class="path">.css</code>. This directory contains only two CSS files:
<ol type="1">
<li><code class="path">./src/epub/css/core.css</code> is distributed with all ebooks and is not meant to be edited.</li>
<li><code class="path">./src/epub/css/local.css</code> is used for custom CSS local to the particular ebook.</li>
</ol>
</li>
<li>Raw source images used in the ebook, but not distributed with the ebook, are located in <code class="path">./src/images/</code>. These images may be, for example, very high resolution that are later converted to lower resolution for distribution, or raw bitmaps that are later converted to SVG for distribution. Every ebook contains the following images in this directory:
<ol type="1">
<li><code class="path">./src/images/titlepage.svg</code> is the editable titlepage file that is later compiled for distribution.</li>
<li><code class="path">./src/images/cover.svg</code> is the editable cover file that is later compiled for distribution.</li>
<li><code class="path">./src/images/cover.source.(jpg|png|bmp|tiff)</code> is the raw cover art file that may be cropped, resized, or otherwise edited to create <code class="path">./src/images/cover.jpg</code>.</li>
<li><code class="path">./src/images/cover.jpg</code> is the final edited cover art that will be compiled in to <code class="path">./src/epub/images/cover.svg</code> for distribution.</li>
</ol>
</li>
<li>Images compiled or derived from raw source images, that are then distributed with the ebook, are located in <code class="path">./src/epub/images/</code>.</li>
<li>The table of contents is located in <code class="path">./src/epub/toc.xhtml</code>.</li>
<li>The epub metadata file is located in <code class="path">./src/epub/content.opf</code>.</li>
<li>The ONIX metadata file is located in <code class="path">./src/epub/onix.xml</code>. This file is identical for all ebooks.</li>
<li>The ONIX metadata file is located in <code class="path">./src/epub/onix.xml</code>. This file is identical for all ebooks.</li>
<li>The <code class="path">./src/META-INF/</code> and <code class="path">./src/mimetype</code> directory and files are epub structural files that are identical for all ebooks.</li>
<li>The <code class="path">./LICENSE.md</code> contains th ebook license and is identical for all ebooks.</li>
</ol>
</section>
<section id="xhtml-file-naming-conventions">
<h2>XHTML file naming conventions</h2>
<ol type="1">
<li>Numbers in filenames dont include leading <code class="path">0</code>s.</li>
<li>Files containing a short story, essay, or other short work in a larger collection, are named with the URL-safe title of the work, excluding any subtitles.
<table>
<thead>
<tr>
<th>Work</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>A short story named “The Variable Man”</td>
<td><code class="path">the-variable-man.xhtml</code></td>
</tr>
<tr>
<td>A short story named “The Sayings of Limpang-Tung (The God of Mirth and of Melodious Minstrels)</td>
<td><code class="path">the-sayings-of-limpang-tung.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>Works that are divided into larger parts (sometimes called “parts, “books, “volumes, “sections, etc.) have their part divisions contained in individual files named after the type of part, followed by a number starting at <code class="path">1</code>.
<div class="text corrected">
<p><code class="path">book-1.xhtml</code></p>
<p><code class="path">book-2.xhtml</code></p>
<p><code class="path">part-1.xhtml</code></p>
<p><code class="path">part-2.xhtml</code></p>
</div>
</li>
<li>Works that are composed of chapters, short stories, essays, or other short- to medium-length sections have each of those sections in an individual file.
<ol type="1">
<li>Chapters <em>not</em> contained in separate volumes are named <code class="path">chapter-N.xhtml</code>, where <code class="path">N</code> is the chapter number starting at <code class="path">1</code>.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chapter 1</td>
<td><code class="path">chapter-1.xhtml</code></td>
</tr>
<tr>
<td>Chapter 2</td>
<td><code class="path">chapter-2.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>Chapters contained in separate volumes, where the chapter number re-starts at 1 in each volume, are named <code class="path">chapter-X-N.xhtml</code>, where <code class="path">X</code> is the part number starting at <code class="path">1</code>, and <code class="path">N</code> is the chapter number <em>within the part</em>, starting at <code class="path">1</code>.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>Part 1</td>
<td><code class="path">part-1.xhtml</code></td>
</tr>
<tr>
<td>Part 1 Chapter 1</td>
<td><code class="path">chapter-1-1.xhtml</code></td>
</tr>
<tr>
<td>Part 1 Chapter 2</td>
<td><code class="path">chapter-1-2.xhtml</code></td>
</tr>
<tr>
<td>Part 1 Chapter 3</td>
<td><code class="path">chapter-1-3.xhtml</code></td>
</tr>
<tr>
<td>Part 2</td>
<td><code class="path">part-2.xhtml</code></td>
</tr>
<tr>
<td>Part 2 Chapter 1</td>
<td><code class="path">chapter-2-1.xhtml</code></td>
</tr>
<tr>
<td>Part 2 Chapter 2</td>
<td><code class="path">chapter-2-2.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>Chapters contained in separate volumes, where the chapter number does not re-start at 1 in each volume, are named <code class="path">chapter-N.xhtml</code>, where <code class="path">N</code> is the chapter number, starting at <code class="path">1</code>.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>Part 1</td>
<td><code class="path">part-1.xhtml</code></td>
</tr>
<tr>
<td>Chapter 1</td>
<td><code class="path">chapter-1.xhtml</code></td>
</tr>
<tr>
<td>Chapter 2</td>
<td><code class="path">chapter-2.xhtml</code></td>
</tr>
<tr>
<td>Chapter 3</td>
<td><code class="path">chapter-3.xhtml</code></td>
</tr>
<tr>
<td>Part 2</td>
<td><code class="path">part-2.xhtml</code></td>
</tr>
<tr>
<td>Chapter 4</td>
<td><code class="path">chapter-4.xhtml</code></td>
</tr>
<tr>
<td>Chapter 5</td>
<td><code class="path">chapter-5.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>Works that are composed of extremely short sections, like a volume of short poems, are in a single file containing all of those short sections. The filename is the URL-safe name of the work.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>A book of short poems called “North of Boston”</td>
<td><code class="path">north-of-boston.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>Frontmatter and backmatter sections have filenames that are named after the type of section, regardless of what the actual title of the section is.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>A preface titled “Note from the author”</td>
<td><code class="path">preface.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
<li>If a work contains more than one section of the same type (for example multiple prefaces), the filename is followed by <code class="path">-N</code>, where <code class="path">N</code> is a number representing the order of the section, starting at <code class="path">1</code>.
<table>
<thead>
<tr>
<th>Section</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>The works first preface, titled “Preface to the 1850 Edition”</td>
<td><code class="path">preface-1.xhtml</code></td>
</tr>
<tr>
<td>The works second preface, titled “Preface to the Charles Dickens Edition”</td>
<td><code class="path">preface-2.xhtml</code></td>
</tr>
</tbody>
</table>
</li>
</ol>
</li>
</ol>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,240 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '5. General XHTML Patterns - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="5" id="general-xhtml-patterns">
<h1>General XHTML Patterns</h1>
<p>Intro.</p>
<section id="the-id-attribute">
<h2>The <code class="html">id</code> attribute</h2>
<section id="id-attributes-of-section-elements">
<h3><code class="html">id</code> attributes of <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> elements</h3>
<ol type="1">
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> has an <code class="html">id</code> attribute identical to the filename containing that <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code>, without the trailing extension.</li>
<li>In files containing multiple <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> elements, each <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> has an <code class="html">id</code> attribute identical to what the filename <em>would</em> be if the section was in an individual file, without the trailing extension.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;the-fox-and-the-grapes&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:short-story&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>The Fox and the Grapes<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;the-goose-that-laid-the-golden-eggs&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:short-story&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>The Goose That Laid the Golden Eggs<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="id-attributes-of-other-elements">
<h3><code class="html">id</code> attributes of other elements</h3>
<ol type="1">
<li>Elements that are not <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> elements do not have an <code class="html">id</code> attribute, unless a part of the ebook, like an endnote, refers to a specific point in the book, and a direct link is desirable.</li>
<li><code class="html">id</code> attributes are generally used to identify parts of the document that a reader may wish to navigate to using a hash in the URL. That generally means major structural divisions.</li>
<li><code class="html">id</code> attributes are not used as hooks for CSS styling.</li>
<li>If an element that is not a <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> requires an <code class="html">id</code> attribute, the attributes value is the name of the tag followed by <code class="path">-N</code>, where <code class="path">N</code> is the sequence number of the tag start at <code class="path">1</code>.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>See <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#p-4&quot;</span><span class="p">&gt;</span>this paragraph<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> for more details.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;p-4&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="the-class-attribute">
<h2>The <code class="html">class</code> attribute</h2>
<p>Classes denote a group of elements sharing a similar style.</p>
<ol type="1">
<li>Classes are <em>not</em> used as single-use style hooks. There is almost always a way to compose a CSS selector to select a single element without the use of a one-off class.
<figure class="wrong"><code class="css full"><span class="p">.</span><span class="nc">business-card</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;business-card&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>John Doe, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;eoc&quot;</span><span class="p">&gt;</span>Esq.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="css full"><span class="p">#</span><span class="nn">chapter-3</span> <span class="nt">blockquote</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>John Doe, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;eoc&quot;</span><span class="p">&gt;</span>Esq.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
<li>Classes are used to style a recurring <em>class</em> of elements, i.e. a class of element that appears more than once in an ebook.
<figure class="corrected"><code class="css full"><span class="p">.</span><span class="nc">business-card</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;business-card&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Jane Doe, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;eoc&quot;</span><span class="p">&gt;</span>Esq.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;business-card&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>John Doe, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;eoc&quot;</span><span class="p">&gt;</span>Esq.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
<li>Class names describe <em>what</em> they are styling semantically, <em>not</em> the actual style the class is applying.
<figure class="wrong"><code class="css full"><span class="p">.</span><span class="nc">black-border</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="css full"><span class="p">.</span><span class="nc">business-card</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
</ol>
</section>
<section id="the-title-element">
<h2>The <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element</h2>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element contains an appropriate description of the local file only. It does not contain the book title.</li>
</ol>
<section id="titles-of-files-that-are-an-individual-chapter-or-part-division">
<h3>Titles of files that are an individual chapter or part division</h3>
<ol type="1">
<li>Convert chapter or part numbers that are in Roman numerals to decimal numbers. Do not convert other Roman numerals that may be in the chapter title.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Chapter 10<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a chapter or part is only an ordinal and has no title or subtitle, the <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element is <code class="html">Chapter</code> followed by the chapter number.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Chapter 4<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>IV<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The chapter body...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a chapter or part has a title or subtitle, the <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element is <code class="html">Chapter</code>, followed by the chapter number in decimal, followed by a colon and a single space, followed by the title or subtitle.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Chapter 6: The Reign of Louis XVI<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>VI<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>&gt;
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;subtitle&quot;</span><span class="p">&gt;</span>The Reign of Louis <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>XVI<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The chapter body...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="titles-of-files-that-are-not-chapter-or-part-divisions">
<h3>Titles of files that are not chapter or part divisions</h3>
<ol type="1">
<li>Files that are not a chapter or a part division, like a preface, introduction, or epigraph, have a <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element that contains the complete title of the section.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Preface<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a file contains a section with a title or subtitle, the <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element contains the title, followed by a colon and a single space, followed by the title or subtitle.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Quevedo and His Works: With an Essay on the Picaresque Novel<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="ordered-numbered-and-unordered-lists">
<h2>Ordered/numbered and unordered lists</h2>
<ol type="1">
<li>All <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> children of <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> and <code class="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span></code> elements have at least one direct child block-level tag. This is usually a <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> element, but not necessarily; for example, a <code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code> element might also be appropriate.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Dont forget to feed the pigs.<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dont forget to feed the pigs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="tables">
<h2>Tables</h2>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code> elements have a direct child <code class="html"><span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span></code> element.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span></code></figure>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code> elements may have an optional direct child <code class="html"><span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span></code> element, if a table heading is desired.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code> elements that are used to display tabular numerical data, for example columns of sums, have CSS styling for tabular numbers: <code class="css"><span class="p">{</span> <span class="k">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span> <span class="p">}</span></code>.
<figure class="corrected"><code class="css full"><span class="nt">table</span> <span class="nt">td</span><span class="p">:</span><span class="nd">last-child</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="k">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Amount 1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>100<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Amount 2<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>300<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Total<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>400<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="xml-lang-attributes">
<h2><code class="html">xml:lang</code> attributes</h2>
<ol type="1">
<li>When words are required to be pronounced in a language other than English, the <code class="html">xml:lang</code> attribute is used to indicate the IETF language tag in use.
<ol type="1">
<li>The <code class="html">xml:lang</code> attribute is used even if a word is not required to be italicized. This allows screen readers to understand that a particular word or phrase should be pronounced in a certain way.</li>
<li>The <code class="html">xml:lang</code> attribute is included in <em>any</em> word that requires special pronunciation, including names of places and titles of books.</li>
</ol>
<figure class="corrected"><code class="html full">She opened the book titled <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:name.publication.book&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;la&quot;</span><span class="p">&gt;</span>Mortis Imago<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.</code></figure>
<ol type="1">
<li>The <code class="html">xml:lang</code> attribute is applied to the highest-level tag possible. If italics are required and moving the <code class="html">xml:lang</code> attribute would also remove an <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> element, the parent element can be styled with <code class="css"><span class="nt">body</span> <span class="o">[</span><span class="nt">xml</span><span class="o">|</span><span class="nt">lang</span><span class="o">]</span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span> <span class="p">}</span></code>.</li>
</ol>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;es&quot;</span><span class="p">&gt;</span>“Como estas? el preguntó.<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;es&quot;</span><span class="p">&gt;</span>“Bien, gracias, dijo ella.<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;es&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Como estas? el preguntó.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Bien, gracias, dijo ella.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,927 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '6. High Level Structural Patterns - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="6" id="high-level-structural-patterns">
<h1>High Level Structural Patterns</h1>
<p>Section should contain high-level structural patterns for common formatting situations.</p>
<section id="sectioning">
<h2>Sectioning</h2>
<ol type="1">
<li>Major structural divisions of a larger work, like parts, volumes, books, chapters, or subchapters, are contained in a <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> element.</li>
<li>Individual items in a larger collection (like a poem in a poetry collection) are contained in a <code class="html"><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span></code> element.</li>
<li>In <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">articles</span><span class="p">&gt;</span></code> elements that have titles, the first child element is an <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> element, or a <code class="html"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span></code> element containing the section's title.</li>
</ol>
<section id="recomposability">
<h3>Recomposability</h3>
<p>“Recomposability” is the concept of generating a single structurally-correct HTML5 file out of an epub file. All SE ebooks are recomposable.</p>
<ol type="1">
<li>XHTML files that contain <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">articles</span><span class="p">&gt;</span></code> elements that are semantic children of <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">articles</span><span class="p">&gt;</span></code> elements in other files, are wrapped in stubs of all parent <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">articles</span><span class="p">&gt;</span></code> elements, up to the root.</li>
<li>Each such included parent element has the identical <code class="html">id</code> and <code class="html">epub:type</code> attributes of its real counterpart.</li>
</ol>
<section id="examples" class="no-numbering">
<h4>Examples</h4>
<p>Consider a book that contains several top-level subdivisions: Books 14, with each book having 3 parts, and each part having 10 chapters. Below is an example of three files demonstrating the structure necessary to achieve recomposability:</p>
<p>Book 1 (<code class="path">book-1.xhtml</code>):</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;book-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;division&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<p>Book 1, Part 2 (<code class="path">part-1-2.xhtml</code>):</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;book-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;division&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;part-1-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;part&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Part <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<p>Book 1, Part 2, Chapter 3 (<code class="path">chapter-1-2-3.xhtml</code>):</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;book-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;division&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;part-1-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;part&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Chapter <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>III<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
</section>
</section>
</section>
<section id="headers">
<h2>Headers</h2>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> elements are used for headers of sections that are structural divisions of a document, i.e., divisions that appear in the table of contents. <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> elements <em>are not</em> used for headers of components that are not in the table of contents. For example, they are not used to mark up the the title of a short poem in a chapter, where the poem itself is not a structural component of the larger ebook.</li>
<li>A section containing an <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> appears in the table of contents.</li>
<li>The book's title is implicitly at the <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code> level, even if <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code> is not present in the ebook. Because of the implicit <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code>, all other sections begin at <code class="html"><span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span></code>.</li>
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> element uses the correct number for the section's heading level in the overall book, <em>not</em> the section's heading level in the individual file. For example, given an ebook with a file named <code class="path">part-2.xhtml</code> containing:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;part-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;part&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Part <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<p>Consider this example for the file <code class="path">chapter-2-3.xhtml</code>:</p>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;part-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;part&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-2-3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>III<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;part-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;part&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-2-3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h3</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>III<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
</li>
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span></code><code class="html"><span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span></code> element has a direct parent <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span></code> element.</li>
</ol>
<section id="header-patterns">
<h3>Header patterns</h3>
<ol type="1">
<li>Sections without titles:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>XI<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
</li>
<li>Sections with titles but no ordinal (i.e. chapter) numbers:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>A Daughter of Albion<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
</li>
<li>Sections with titles and ordinal (i.e. chapter) numbers:
<figure><code class="css full"><span class="nt">span</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;subtitle&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>XI<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;subtitle&quot;</span><span class="p">&gt;</span>Who Stole the Tarts?<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
</li>
<li>Sections titles and subtitles but no ordinal (i.e. chapter) numbers:
<figure><code class="css full"><span class="nt">span</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;subtitle&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>An Adventure<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;subtitle&quot;</span><span class="p">&gt;</span>(A Drivers Story)<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
</li>
<li>Sections that require titles, but that are not in the table of contents:
<figure><code class="css full"><span class="nt">header</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The Title of a Short Poem<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="bridgeheads">
<h3>Bridgeheads</h3>
<p>Bridgeheads are sections in a chapter header that give an abstract or summary of the following chapter. They may be in prose or in a short list with clauses separated by em dashes.</p>
<ol type="1">
<li>The last clause in a bridgehead ends in appropriate punctuation, like a period.</li>
<li>Bridgeheads have the following CSS and HTML structure:
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;bridgehead&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="k">max-width</span><span class="p">:</span> <span class="mi">60</span><span class="kt">%</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">justify</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;bridgehead&quot;</span><span class="o">]</span> <span class="nt">i</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bridgehead&quot;</span><span class="p">&gt;</span>Which treats of the character and pursuits of the famous gentleman Don Quixote of La Mancha.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>X<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bridgehead&quot;</span><span class="p">&gt;</span>Our first night—Under canvas—An appeal for help—Contrariness of teakettles, how to overcome—Supper—How to feel virtuous—Wanted! a comfortably-appointed, well-drained desert island, neighbourhood of South Pacific Ocean preferred—Funny thing that happened to Georges father—a restless night.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="epigraphs">
<h2>Epigraphs</h2>
<ol type="1">
<li>All epigraphs include this CSS:
<figure><code class="css full"><span class="c">/* All epigraphs */</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="k">hyphens</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">em</span><span class="o">,</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">i</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">cite</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">cite</span> <span class="nt">i</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* End all epigraphs */</span></code></figure>
</li>
</ol>
<section id="epigraphs-in-section-headers">
<h3>Epigraphs in section headers</h3>
<ol type="1">
<li>Epigraphs in section headers have the quote source in a <code class="html"><span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span></code> element set in small caps, without a leading em-dash and without a trailing period.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Desire no more than to thy lot may fall.…”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span>—Chaucer.<span class="p">&lt;/</span><span class="nt">cite</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">header</span> <span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">cite</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Desire no more than to thy lot may fall.…”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span>Chaucer<span class="p">&lt;/</span><span class="nt">cite</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
</li>
<li>In addition to the <a href="/manual/1.0/high-level-structural-patterns#6.3.1">CSS used for all epigraphs</a>, this additional CSS is included for epigraphs in section headers:
<figure><code class="css full"><span class="c">/* Epigraphs in section headers */</span>
<span class="nt">section</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">max-width</span><span class="p">:</span> <span class="mi">80</span><span class="kt">%</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="o">+</span> <span class="o">*</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">@</span><span class="k">supports</span><span class="o">(</span><span class="nt">display</span><span class="o">:</span> <span class="nt">table</span><span class="o">)</span><span class="p">{</span>
<span class="nt">section</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">table</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c">/* End epigraphs in section headers */</span></code></figure>
</li>
</ol>
</section>
<section id="full-page-epigraphs">
<h3>Full-page epigraphs</h3>
<ol type="1">
<li>In full-page epigraphs, the epigraph is centered on the page for ereaders that support advanced CSS. For all other ereaders, the epigraph is horizontally centered with a small margin above it.</li>
<li>Full-page epigraphs that contain multiple quotations are represented by multiple <code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code> elements.</li>
<li>In addition to the <a href="/manual/1.0/high-level-structural-patterns#6.3.1">CSS used for all epigraphs</a>, this additional CSS is included for full-page epigraphs:
<figure><code class="css full"><span class="c">/* Full-page epigraphs */</span>
<span class="nt">section</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="o">&gt;</span> <span class="o">*</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="k">max-width</span><span class="p">:</span> <span class="mi">80</span><span class="kt">%</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">@</span><span class="k">supports</span><span class="o">(</span><span class="nt">display</span><span class="o">:</span> <span class="nt">flex</span><span class="o">)</span><span class="p">{</span>
<span class="nt">section</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">align-items</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="k">box-sizing</span><span class="p">:</span> <span class="kc">border-box</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">flex</span><span class="p">;</span>
<span class="k">flex-direction</span><span class="p">:</span> <span class="kc">column</span><span class="p">;</span>
<span class="k">justify-content</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="k">min-height</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mi">98</span><span class="kt">vh</span> <span class="o">-</span> <span class="mi">3</span><span class="kt">em</span><span class="p">);</span>
<span class="k">padding-top</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="o">&gt;</span> <span class="o">*</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="o">&gt;</span> <span class="o">*</span> <span class="o">+</span> <span class="o">*</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c">/* End full-page epigraphs */</span></code></figure>
</li>
<li>Example HTML:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;frontmatter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Reorganisation, irrespectively of God or king, by the worship of Humanity, systematically adopted.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Mans only right is to do his duty.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The Intellect should always be the servant of the Heart, and should never be its slave.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“We tire of thinking and even of acting; we never tire of loving.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="poetry-verse-and-songs">
<h2>Poetry, verse, and songs</h2>
<p>Unfortunately theres no great way to semantically format poetry in HTML. As such, unrelated elements are conscripted for use in poetry.</p>
<ol type="1">
<li>A stanza is represented by a <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> element.
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Each stanza contains <code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code> elements, each one representing a line in the stanza.
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">&gt;</span> <span class="nt">span</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code> line is followed by a <code class="html"><span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span></code> element, except for the last line in a stanza.
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">&gt;</span> <span class="nt">span</span> <span class="o">+</span> <span class="nt">br</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Indented <code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code> lines have the <code class="css"><span class="nt">i1</span></code> class. <i>Do not</i> use <code class="ws">nbsp</code> for indentation. Indenting to different levels is done by incrementing the class to <code class="css"><span class="nt">i2</span></code>, <code class="css"><span class="nt">i3</span></code>, and so on, and including the appropriate CSS.
<figure><code class="css full"><span class="nt">p</span> <span class="nt">span</span><span class="p">.</span><span class="nc">i1</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="nt">span</span><span class="p">.</span><span class="nc">i2</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>Poems, songs, and verse that are shorter part of a longer work, like a novel, are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:poem&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">br</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
<li>The parent element of poetry, verse, or song, has the semantic inflection of <code class="html">z3998:poem</code>, <code class="html">z3998:verse</code>, <code class="html">z3998:song</code>, or <code class="html">z3998:hymn</code>.</li>
<li>If a poem is quoted and has one or more lines removed, the removed lines are represented with a vertical ellipses (<code class="utf"></code> or u+22EE) in a <code class="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"elision"</span><span class="p">&gt;</span></code> element:
<figure><code class="css full"><span class="nt">span</span><span class="p">.</span><span class="nc">elision</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
<span class="k">margin-left</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* If eliding within an epigraph, include this additional style: */</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">span</span><span class="p">.</span><span class="nc">elision</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:verse&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>O Lady! we receive but what we give,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>And in our life alone does nature live:<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Ours is her wedding garments, ours her shroud!<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;elision&quot;</span><span class="p">&gt;</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;i1&quot;</span><span class="p">&gt;</span>Ah! from the soul itself must issue forth<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>A light, a glory, a fair luminous cloud,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="id1" class="no-numbering">
<h3>Examples</h3>
<p>Note that below we include CSS for the <code class="css"><span class="nt">i2</span></code> class, even though its not used in the example. Its included to demonstrate how to adjust the CSS for indentation levels after the first.</p>
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">&gt;</span> <span class="nt">span</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">&gt;</span> <span class="nt">span</span> <span class="o">+</span> <span class="nt">br</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="nt">p</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:poem&quot;</span><span class="o">]</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="nt">span</span><span class="p">.</span><span class="nc">i1</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="nt">span</span><span class="p">.</span><span class="nc">i2</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:poem&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>“How doth the little crocodile<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;i1&quot;</span><span class="p">&gt;</span>Improve his shining tail,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>And pour the waters of the Nile<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;i1&quot;</span><span class="p">&gt;</span>On every golden scale!<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>“How cheerfully he seems to grin,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;i1&quot;</span><span class="p">&gt;</span>How neatly spread his claws,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>And welcome little fishes in<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;i1&quot;</span><span class="p">&gt;&lt;</span><span class="nt">em</span><span class="p">&gt;</span>With gently smiling jaws!<span class="p">&lt;/</span><span class="nt">em</span><span class="p">&gt;</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="plays-drama">
<h2>Plays &amp; Drama</h2>
<ol type="1">
<li>Dialog in plays is structured using <code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code> elements.</li>
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span></code> is either a block of dialog or a standalone stage direction.</li>
<li>Works that are plays or that contain sections of dramatic dialog have this core CSS:
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">border-collapse</span><span class="p">:</span> <span class="kc">collapse</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">tr</span><span class="p">:</span><span class="nd">first-child</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">padding-top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">tr</span><span class="p">:</span><span class="nd">last-child</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">padding-bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">vertical-align</span><span class="p">:</span> <span class="kc">top</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">td</span><span class="p">:</span><span class="nd">last-child</span><span class="p">{</span>
<span class="k">padding-right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">td</span><span class="p">:</span><span class="nd">first-child</span><span class="p">{</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">td</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:persona&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">hyphens</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">20</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">td</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">],</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="nt">table</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span> <span class="kc">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:stage-direction&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:stage-direction&quot;</span><span class="o">]</span><span class="p">::</span><span class="nd">before</span><span class="p">{</span>
<span class="k">content</span><span class="p">:</span> <span class="s2">&quot;(&quot;</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:stage-direction&quot;</span><span class="o">]</span><span class="p">::</span><span class="nd">after</span><span class="p">{</span>
<span class="k">content</span><span class="p">:</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:persona&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
</ol>
<section id="dialog-rows">
<h3>Dialog rows</h3>
<ol type="1">
<li>The first child of a row of dialog is a <code class="html"><span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span></code> element with the semantic inflection of <code class="html">z3998:persona</code>.</li>
<li>The second child of a row of dialog is a <code class="html"><span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span></code> element containing the actual dialog. Elements that contain only one line of dialog do not have a block-level child (like <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code>).
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>Algernon<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Did you hear what I was playing, Lane?<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>Lane<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>I didnt think it polite to listen, sir.<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span></code></figure>
</li>
<li>When several personas speak at once, or a group of personas ("The Actors") speaks at once, the containing <code class="html"><span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span></code> element has the <code class="html">together</code> class, and the the first <code class="html"><span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span></code> child has a <code class="html">rowspan</code> attribute corresponding to the number of lines spoken together.
<figure><code class="css full"><span class="nt">tr</span><span class="p">.</span><span class="nc">together</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="mf">.5</span><span class="kt">em</span> <span class="mi">0</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">vertical-align</span><span class="p">:</span> <span class="kc">middle</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">tr</span><span class="p">.</span><span class="nc">together</span> <span class="nt">td</span><span class="p">:</span><span class="nd">only-child</span><span class="o">,</span>
<span class="nt">tr</span><span class="p">.</span><span class="nc">together</span> <span class="nt">td</span> <span class="o">+</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">border-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">together</span> <span class="o">+</span> <span class="p">.</span><span class="nc">together</span> <span class="nt">td</span><span class="o">[</span><span class="nt">rowspan</span><span class="o">],</span>
<span class="p">.</span><span class="nc">together</span> <span class="o">+</span> <span class="p">.</span><span class="nc">together</span> <span class="nt">td</span><span class="o">[</span><span class="nt">rowspan</span><span class="o">]</span> <span class="o">+</span> <span class="nt">td</span><span class="p">{</span>
<span class="k">padding-top</span><span class="p">:</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:drama&quot;</span><span class="o">]</span> <span class="p">.</span><span class="nc">together</span> <span class="nt">td</span><span class="p">:</span><span class="nd">last-child</span><span class="p">{</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;together&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span> <span class="na">rowspan</span><span class="o">=</span><span class="s">&quot;3&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>The Actors<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Oh, what dyou think of that?<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;together&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Only the mantle?<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;together&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>He must be mad.<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;together&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span> <span class="na">rowspan</span><span class="o">=</span><span class="s">&quot;2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>Some Actresses<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>But why?<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;together&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Mantles as well?<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="stage-direction-rows">
<h3>Stage direction rows</h3>
<ol type="1">
<li>The first child of a row of stage direction is an empty <code class="html"><span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span></code> element.</li>
<li>The second child of a row of dialog is a <code class="html"><span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span></code> element containing the stage direction</li>
<li>Stage direction is wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"z3998:stage-direction"</span><span class="p">&gt;</span></code> element.</li>
<li>Personas mentioned in stage direction are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">b</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"z3998:persona"</span><span class="p">&gt;</span></code> element.</li>
</ol>
<section id="id2" class="no-numbering">
<h4>Examples</h4>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:stage-direction&quot;</span><span class="p">&gt;&lt;</span><span class="nt">b</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>Lane<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span> is arranging afternoon tea on the table, and after the music has ceased, <span class="p">&lt;</span><span class="nt">b</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:persona&quot;</span><span class="p">&gt;</span>Algernon<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span> enters.<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="works-that-are-complete-plays">
<h3>Works that are complete plays</h3>
<ol type="1">
<li>The top-level element (usually <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code>) has the <code class="html">z3998:drama</code> semantic inflection.</li>
<li>Acts are <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> elements containing at least one <code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code> for dialog, and optionally containing an act title and other top-level stage direction.</li>
<li>Introductory or high-level stage direction is presented using <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> elements outside of the dialog table.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction z3998:drama&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;act-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter z3998:scene&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Act <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Scene: Morning-room in Algernons flat in Half-Moon Street. The room is luxuriously and artistically furnished. The sound of a piano is heard in the adjoining room.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:stage-direction&quot;</span><span class="p">&gt;</span>Act Drop<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
<li>Dramatis personae are presented as a <code class="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span></code> element listing the characters.
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:dramatis-personae&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:dramatis-personae&quot;</span><span class="o">]</span> <span class="nt">ul</span><span class="p">{</span>
<span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:dramatis-personae&quot;</span><span class="o">]</span> <span class="nt">ul</span> <span class="nt">li</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;dramatis-personae&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:dramatis-personae&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Dramatis Personae<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>King Henry <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>V<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Duke of Clarence, brother to the King<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="letters">
<h2>Letters</h2>
<p>Letters require particular attention to styling and semantic tagging. Letters may not exactly match the formatting in the source scans, but they are in visual sympathy with the source.</p>
<ol type="1">
<li>Letters are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code> element with the appropriate semantic inflection, usually <code class="html">z3998:letter</code>.</li>
</ol>
<section id="letter-headers">
<h3>Letter headers</h3>
<ol type="1">
<li>Parts of a letter prior to the body of the letter, for example the location where it is written, the date, and the salutation, are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span></code> element.</li>
<li>If there is only a salutation and no other header content, the <code class="html"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span></code> element is ommitted.</li>
<li>The location and date of a letter have the semantic inflection of <code class="html">se:letter.dateline</code>. Dates are in a <code class="html"><span class="p">&lt;</span><span class="nt">time</span><span class="p">&gt;</span></code> element with a computer-readable date.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:letter.dateline&quot;</span><span class="p">&gt;</span>Blarney Castle, <span class="p">&lt;</span><span class="nt">time</span> <span class="na">datetime</span><span class="o">=</span><span class="s">&quot;1863-10-11&quot;</span><span class="p">&gt;</span>11th of October, 1863<span class="p">&lt;/</span><span class="nt">time</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
</li>
<li>The salutation (for example, “Dear Sir” or “My dearest Jane”) has the semantic inflection of <code class="html">z3998:salutation</code>.</li>
<li>The first line of a letter after the salutation is not indented.</li>
<li>Salutations that are within the first line of the letter are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"z3998:salutation</span><span class="p">&gt;</span></code> element (or a <code class="html"><span class="p">&lt;</span><span class="nt">b</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"z3998:salutation</span><span class="p">&gt;</span></code> element if small-caps are desired).
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">b</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:salutation&quot;</span><span class="p">&gt;</span>Dear Mother<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span>, I was so happy to hear from you.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>The name of the recipient of the letter, when set out other than within a saluation (for example a letter headed “To: John Smith Esquire”), is given the semantic inflection of <code class="html">z3998:recipient</code>. Sometimes this may occur at the end of a letter, particularly for more formal communications, in which case it is placed within a <code class="html"><span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span></code> element.</li>
</ol>
</section>
<section id="letter-footers">
<h3>Letter footers</h3>
<ol type="1">
<li>Parts of a letter after the body of the letter, for example the signature or postscript, are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span></code> element.</li>
<li>The <code class="html">footer</code> element has the following CSS:
<figure><code class="css full"><span class="nt">footer</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li>The valediction (for example, “Yours Truly” or “With best regards”) has the semantic inflection of <code class="html">z3998:valediction</code>.</li>
<li>The senders name has semantic inflection of <code class="html">z3998:sender</code>. If the name appears to be a signature to the letter, it has the <code class="html">signature</code> class and the corresponding <code class="css"><span class="p">.</span><span class="nc">signature</span></code> CSS.
<figure><code class="css full"><span class="p">.</span><span class="nc">signature</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;signature z3998:sender&quot;</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;name&quot;</span><span class="p">&gt;</span>R. A.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> Johnson<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;z3998:sender&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;signature&quot;</span><span class="p">&gt;</span>John Doe<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>, President<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span></code></figure>
</li>
<li>Postscripts have the semantic inflection of <code class="html">z3998:postscript</code> and the following CSS:
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">=~</span><span class="s2">&quot;z3998:postscript&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
</ol>
</section>
<section id="id3" class="no-numbering">
<h3>Examples</h3>
<figure><code class="css full"><span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:letter&quot;</span><span class="o">]</span> <span class="nt">header</span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:salutation&quot;</span><span class="o">]</span> <span class="o">+</span> <span class="nt">p</span><span class="o">,</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:letter&quot;</span><span class="o">]</span> <span class="nt">header</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:sender&quot;</span><span class="o">],</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:recipient&quot;</span><span class="o">],</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:salutation&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;z3998:postscript&quot;</span><span class="o">]</span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">signature</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:letter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:salutation&quot;</span><span class="p">&gt;</span>Dearest Auntie,<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Please may we have some things for a picnic? Gerald will bring them. I would come myself, but I am a little tired. I think I have been growing rather fast.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:valediction&quot;</span><span class="p">&gt;</span>Your loving niece,<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;signature&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:sender&quot;</span><span class="p">&gt;</span>Mabel<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:postscript&quot;</span><span class="p">&gt;</span>P.S.—Lots, please, because some of us are very hungry.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:letter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:letter.dateline&quot;</span><span class="p">&gt;</span>Gracechurch-street, <span class="p">&lt;</span><span class="nt">time</span> <span class="na">datetime</span><span class="o">=</span><span class="s">&quot;08-02&quot;</span><span class="p">&gt;</span>August 2<span class="p">&lt;/</span><span class="nt">time</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:salutation&quot;</span><span class="p">&gt;</span>My dear Brother<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>, At last I am able to send you some tidings of my niece, and such as, upon the whole, I hope will give you satisfaction. Soon after you left me on Saturday, I was fortunate enough to find out in what part of London they were. The particulars, I reserve till we meet. It is enough to know they are discovered, I have seen them both<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I shall write again as soon as anything more is determined on.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:valediction&quot;</span><span class="p">&gt;</span>Yours, etc.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;signature&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:sender&quot;</span><span class="p">&gt;</span>Edward Gardner<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="images">
<h2>Images</h2>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> elements have an <code class="html">alt</code> attribute that uses prose to describe the image in detail; this is what screen reading software will read aloud.
<ol type="1">
<li>The <code class="html">alt</code> attribute describes the visual image itself in words, which is not the same as writing a caption or describing its place in the book.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;The illustration for chapter 10&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;...&quot;</span> <span class="p">/&gt;</span></code></figure>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Pierre&#39;s fruit-filled dinner&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;...&quot;</span> <span class="p">/&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;An apple and a pear inside a bowl, resting on a table.&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;...&quot;</span> <span class="p">/&gt;</span></code></figure>
</li>
<li>The <code class="html">alt</code> attribute is one or more complete sentences ended with periods or other appropriate punctuation. It is not composed of sentence fragments or complete sentences without ending punctuation.</li>
<li>The <code class="html">alt</code> attribute is not necessarily the same as text in the images sibling <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> element, if one is present.</li>
</ol>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> elements have semantic inflection denoting the type of image. Common values are <code class="html">z3998:illustration</code> or <code class="html">z3998:photograph</code>.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> element whose image is black-on-white line art (i.e. exactly two colors, <strong>not</strong> grayscale!) are PNG files with a transparent background. They have the <code class="html">se:image.color-depth.black-on-transparent</code> semantic inflection.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> elements that are meant to be aligned on the block level or displayed as full-page images are contained in a parent <code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> element, with an optional <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> sibling.
<ol type="1">
<li>when contained in a <code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> element, the <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> element does not have an <code class="html">id</code> attribute; instead the <code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> element has the <code class="html">id</code> attribute.</li>
<li>An optional <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> element containing a concise context-dependent caption may follow the <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> element within a <code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> element. This caption depends on the surrounding context, and is not necessarily (or even ideally) identical to the <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> element's <code class="html">alt</code> attribute.</li>
<li>All figure elements, regardless of positioning, have this CSS:
<figure><code class="css full"><span class="nt">figure</span> <span class="nt">img</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">max-width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">figure</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">figcaption</span><span class="p">{</span>
<span class="k">font-size</span><span class="p">:</span> <span class="mf">.75</span><span class="kt">em</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> elements that are meant to be displayed as full-page images have the <code class="html">full-page</code> class and this additional CSS:
<figure><code class="css full"><span class="nt">figure</span><span class="p">.</span><span class="nc">full-page</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">max-height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="k">page-break-before</span><span class="p">:</span> <span class="kc">always</span><span class="p">;</span>
<span class="k">page-break-after</span><span class="p">:</span> <span class="kc">always</span><span class="p">;</span>
<span class="k">page-break-inside</span><span class="p">:</span> <span class="kc">avoid</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code> elements that meant to be aligned block-level with the text have this additional CSS:
<figure><code class="css full"><span class="nt">figure</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span></code></figure>
</li>
</ol>
</li>
</ol>
<section id="id4" class="no-numbering">
<h3>Examples</h3>
<figure><code class="css full"><span class="c">/* If the image is meant to be on its own page, use this selector... */</span>
<span class="nt">figure</span><span class="p">.</span><span class="nc">full-page</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">max-height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="k">page-break-before</span><span class="p">:</span> <span class="kc">always</span><span class="p">;</span>
<span class="k">page-break-after</span><span class="p">:</span> <span class="kc">always</span><span class="p">;</span>
<span class="k">page-break-inside</span><span class="p">:</span> <span class="kc">avoid</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* If the image is meant to be inline with the text, use this selector... */</span>
<span class="nt">figure</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* In all cases, also include the below styles */</span>
<span class="nt">figure</span> <span class="nt">img</span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
<span class="k">max-width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">figure</span> <span class="o">+</span> <span class="nt">p</span><span class="p">{</span>
<span class="k">text-indent</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">figcaption</span><span class="p">{</span>
<span class="k">font-size</span><span class="p">:</span> <span class="mf">.75</span><span class="kt">em</span><span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">figure</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;illustration-10&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;An apple and a pear inside a bowl, resting on a table.&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../images/illustration-10.jpg&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:photograph&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span>The Monks Repast<span class="p">&lt;/</span><span class="nt">figcaption</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">figure</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;full-page&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;image-11&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;A massive whale breaching the water, with a sailor floating in the water directly within the whales mouth.&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../images/illustration-11.jpg&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:illustration&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span>The Whale eats Sailor Jim.<span class="p">&lt;/</span><span class="nt">figcaption</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">figure</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He saw strange alien text that looked like this: <span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;A line of alien heiroglyphs.&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../images/alien-text.svg&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:illustration se:color-depth.black-on-transparent&quot;</span> <span class="p">/&gt;</span>. There was nothing else amongst the ruins.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="list-of-illustrations-the-loi">
<h2>List of Illustrations (the LoI)</h2>
<p>If an ebook has any illustrations that are <em>major structural components</em> of the work (even just one!), then the ebook includes an <code class="path">loi.xhtml</code> file at the end of the ebook. This file lists the illustrations in the ebook, along with a short caption or description. #. The LoI is an XHTML file located in <code class="path">./src/epub/text/loi.xhtml</code>.</p>
<ol type="1">
<li>The LoI file has the <code class="html">backmatter</code> semantic inflection.</li>
<li>The LoI only contains links to images that are major structural components of the work.
<ol type="1">
<li>An illustration is a major structural component if, for example: it is an illustration of events in the book, like a full-page drawing or end-of-chapter decoration; it is essential to the plot, like a diagram of a murder scene or a map; or it is a component of the text, like photographs in a documentary narrative.</li>
<li>An illustration is <em>not</em> a major structural components if, for example: it is a drawing used to represent a person's signature, like an X mark; it is an inline drawing representing text in alien languages; it is a drawing used as a layout element to illustrate forms, tables, or diagrams.</li>
</ol>
</li>
<li>The LoI file contains a single <code class="html"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">"loi"</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"loi"</span><span class="p">&gt;</span></code> element, which in turn contains an <code class="html"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">&gt;</span>List of Illustrations<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code> element, followed by a <code class="html"><span class="p">&lt;</span><span class="nt">nav</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"loi"</span><span class="p">&gt;</span></code> element containing an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element, which in turn contains list items representing the images.</li>
<li>If an image listed in the LoI has a <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> element, then that caption is used in the anchor text for that LoI entry. If not, the images <code class="html">alt</code> attribute is used. If the <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> element is too long for a concise LoI entry, the <code class="html">alt</code> attribute is used instead.</li>
<li>Links to the images go directly to the image's corresponding <code class="html">id</code> hashes, not just the top of the containing file.</li>
</ol>
<section id="id5" class="no-numbering">
<h3>Examples</h3>
<figure><code class="html full"><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xmlns:epub</span><span class="o">=</span><span class="s">&quot;http://www.idpf.org/2007/ops&quot;</span> <span class="na">epub:prefix</span><span class="o">=</span><span class="s">&quot;z3998: http://www.daisy.org/z3998/2012/vocab/structure/, se: http://standardebooks.org/vocab/1.0&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-GB&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>List of Illustrations<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../css/core.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../css/local.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;backmatter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;loi&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;loi&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">nav</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;loi&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>List of Illustrations<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../text/preface.xhtml#the-edge-of-the-world&quot;</span><span class="p">&gt;</span>The Edge of the World<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="endnotes">
<h2>Endnotes</h2>
<ol type="1">
<li>Ebooks do not have footnotes, only endnotes. Footnotes are instead converted to endnotes.</li>
<li>“Ibid. is a Latinism commonly used in endnotes to indicate that the source for a quotation or reference is the same as the last-mentioned source.
<p>When the last-mentioned source is in the previous endnote, Ibid. is replaced by the full reference; otherwise Ibid. is left as-is. Since ebooks use popup endnotes, “Ibid. becomes meaningless without context.</p>
</li>
</ol>
<section id="noterefs">
<h3>Noterefs</h3>
<p>The noteref is the superscripted number in the body text that links to the endnote at the end of the book.</p>
<ol type="1">
<li>Endnotes are referenced in the text by an <code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> tag with the semantic inflection <code class="html">noteref</code>.
<ol type="1">
<li>Noterefs point directly to the corresponding endnote <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> element in the endnotes file.</li>
<li>Noterefs have an <code class="html">id</code> attribute like <code class="html">noteref-n</code>, where <code class="html">n</code> is identical to the endnote number.</li>
<li>The text of the noteref is the endnote number.</li>
</ol>
</li>
<li>If located at the end of a sentence, noterefs are placed after ending punctuation.</li>
<li>If the endnote references an entire sentence in quotation marks, or the last word in a sentence in quotation marks, then the noteref is placed outside the quotation marks.</li>
</ol>
</section>
<section id="the-endnotes-file">
<h3>The endnotes file</h3>
<ol type="1">
<li>Endnotes are in an XHTML file located in <code class="path">./src/epub/text/endnotes.xhtml</code>.</li>
<li>The endnotes file has the <code class="html">backmatter</code> semantic inflection.</li>
<li>The endnotes file contains a single <code class="html"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">"endnotes"</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"endnotes"</span><span class="p">&gt;</span></code> element, which in turn contains an <code class="html"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">&gt;</span>Endnotes<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code> element, followed by an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element containing list items representing the endnotes.</li>
<li>Each endnotes <code class="html">id</code> attribute is in sequential ascending order.</li>
</ol>
</section>
<section id="individual-endnotes">
<h3>Individual endnotes</h3>
<ol type="1">
<li>An endnote is an <code class="html"><span class="p">&lt;</span><span class="nt">li</span> <span class="na">id</span><span class="o">=</span><span class="s">"note-n"</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"endnote"</span><span class="p">&gt;</span></code> element containing one or more block-level text elements and one backlink element.</li>
<li>Each endnotes contains a backlink, which has the semantic inflection <code class="html">backlink</code>, contains the text <code class="html"></code>, and has the <code class="html">href</code> attribute pointing to the corresponding noteref hash.
<ol type="1">
<li>In endnotes where the last block-level element is a <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> element, the backlink goes at the end of the <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> element, preceded by exactly one space.</li>
<li>In endnotes where the last block-level element is verse, quotation, or otherwise not plain prose text, the backlink goes in its own <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> element following the last block-level element in the endnote.</li>
</ol>
</li>
<li>Endnotes with ending citations have those citations are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span></code> element, including any em-dashes. A space follows the <code class="html"><span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span></code> element, before the backlink.</li>
</ol>
</section>
<section id="id6" class="no-numbering">
<h3>Examples</h3>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>... a continent that was not rent asunder by volcanic forces as was that legendary one of Atlantis in the Eastern Ocean.<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;endnotes.xhtml#note-1&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;noteref-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;noteref&quot;</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> My work in Java, in Papua, ...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xmlns:epub</span><span class="o">=</span><span class="s">&quot;http://www.idpf.org/2007/ops&quot;</span> <span class="na">epub:prefix</span><span class="o">=</span><span class="s">&quot;z3998: http://www.daisy.org/z3998/2012/vocab/structure/, se: http://standardebooks.org/vocab/1.0&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-GB&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Endnotes<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../css/core.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../css/local.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;backmatter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;endnotes&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;endnotes&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Endnotes<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;note-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;endnote&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>For more detailed observations on these points refer to <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;name&quot;</span><span class="p">&gt;</span>G.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> Volkens, “Uber die Karolinen Insel Yap. <span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;name eoc&quot;</span><span class="p">&gt;</span>W. T. G.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">cite</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;chapter-2.xhtml#noteref-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;backlink&quot;</span><span class="p">&gt;</span>↩<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;note-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;endnote&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:verse&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>“Who never ceases still to strive,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Tis him we can deliver.<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;chapter-4.xhtml#noteref-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;backlink&quot;</span><span class="p">&gt;</span>↩<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></code></figure>
</section>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

25
www/manual/1.0/index.php Normal file
View file

@ -0,0 +1,25 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => 'The Standard Ebooks Manual', 'highlight' => 'contribute']) ?>
<main>
<article class="manual">
<section id="the-standard-ebooks-manual">
<h1>The Standard Ebooks Manual</h1>
<h2>Table of Contents</h2>
<ol type="1">
<li><a href="/manual/1.0/code-style">XHTML, CSS, and SVG Code Style</a></li>
<li><a href="/manual/1.0/filesystem">Filesystem Layout and File Naming Conventions</a></li>
<li><a href="/manual/1.0/the-structure-of-an-ebook">The Structure of an Ebook</a></li>
<li><a href="/manual/1.0/semantics">Semantics</a></li>
<li><a href="/manual/1.0/general-xhtml-patterns">General XHTML Patterns</a></li>
<li><a href="/manual/1.0/high-level-structural-patterns">High-Level Structural Patterns</a></li>
<li><a href="/manual/1.0/table-of-contents-patterns">Table of Contents Patterns</a></li>
<li><a href="/manual/1.0/typography">Typography</a></li>
<li><a href="/manual/1.0/metadata">Metadata</a></li>
<li><a href="/manual/1.0/art">Art</a></li>
</ol>
</section>
</article>
</main>
<?= Template::Footer() ?>

350
www/manual/1.0/metadata.php Normal file
View file

@ -0,0 +1,350 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '9. Metadata - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="9" id="metadata">
<h1>Metadata</h1>
<p>Metadata in a Standard Ebooks epub is stored in the <code class="path">./src/epub/content.opf</code> file. The file contains some boilerplate that an ebook producer wont have to touch, and a lot of information that they <em>will</em> have to touch as an ebook is produced.</p>
<p>Follow the general structure of the <code class="path">content.opf</code> file present in the tools <code class="path">./templates/</code> directory. Dont rearrange the order of anything in there.</p>
<section id="general-url-rules">
<h2>General URL rules</h2>
<ol type="1">
<li>URLs used in metadata are https where possible.</li>
<li>URLs used in metadata do not contain query strings, or if a query string is required, only contain the minimum necessary query string to render the base resource.</li>
<li>URLs used for Project Gutenberg page scans look like: <code class="path">https://www.gutenberg.org/ebooks/&lt;BOOK-ID&gt;</code>.</li>
<li>URLs used for HathiTrust page scans look like: <code class="path">https://catalog.hathitrust.org/Record/&lt;RECORD-ID&gt;</code>.</li>
<li>URLs used for Google Books page scans look like: <code class="path">https://books.google.com/books?id=&lt;BOOK-ID&gt;</code>.</li>
<li>URLs used for Internet Archive page scans look like: <code class="path">https://archive.org/details/&lt;BOOK-ID&gt;</code>.</li>
</ol>
</section>
<section id="the-ebook-identifier">
<h2>The ebook identifier</h2>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:identifier</span><span class="p">&gt;</span></code> element contains the unique identifier for the ebook. The identifier is the Standard Ebooks URL for the ebook, prefaced by <code class="html">url:</code>.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:identifier</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;uid&quot;</span><span class="p">&gt;</span>url:https://standardebooks.org/ebooks/anton-chekhov/short-fiction/constance-garnett<span class="p">&lt;/</span><span class="nt">dc:identifier</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="forming-the-se-url">
<h3>Forming the SE URL</h3>
<p>The SE URL is formed by the following algorithm.</p>
<p>(Note: A string can be made URL-safe using the <code class="bash">se make-url-safe</code> tool.)</p>
<ul>
<li>Start with the URL-safe author of the work, as it appears on the titlepage. If there is more than one author, continue appending subsequent URL-safe authors, separated by an underscore. Do not alpha-sort the author name.</li>
<li>Append a forward slash, then the URL-safe title of the work. Do not alpha-sort the title.</li>
<li>If the work is translated, append a forward slash, then the URL-safe translator. If there is more than one translator, continue appending subsequent URL-safe translators, separated by an underscore. Do not alpha-sort translator names.</li>
<li>If the work is illustrated, append a foreward slash, then the URL-safe illustrator. If there is more than one illustrator, continue appending subsequent URL-safe illustrators, separated by an underscore. Do not alpha-sort illustrator names.</li>
<li>Finally, <em>do not</em> append a trailing forward slash.</li>
</ul>
</section>
</section>
<section id="publication-date-and-release-identifiers">
<h2>Publication date and release identifiers</h2>
<p>There are several elements in the metadata describing the publication date, updated date, and revision number of the ebook. Generally these are not updated by hand; instead, the <code class="bash">se prepare-release</code> tool updates them automatically.</p>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">dc:date</span><span class="p">&gt;</span></code> is a timestamp representing the first publication date of this ebook file. Once the ebook is released to the public, this value doesnt change.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"dcterms:modified"</span><span class="p">&gt;</span></code> is a timestamp representing the last time this ebook file was modified. This changes often.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:revision-number"</span><span class="p">&gt;</span></code> is a special SE extension representing the revision number of this ebook file. During production, this number will be 0. When the ebook is first released to the public, the number will increment to 1. Each time <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"dcterms:modified"</span><span class="p">&gt;</span></code> changes, the revision number is incremented.</li>
</ol>
</section>
<section id="book-titles">
<h2>Book titles</h2>
<section id="books-without-subtitles">
<h3>Books without subtitles</h3>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">"title"</span><span class="p">&gt;</span></code> element contains the title.</li>
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"file-as"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#title"</span><span class="p">&gt;</span></code> element contains alpha-sorted title, even if the alpha-sorted title is identical to the unsorted title.</li>
</ol>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>The Moon Pool<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Moon Pool, The<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Short Fiction<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Short Fiction<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>`</code></figure>
</section>
<section id="books-with-subtitles">
<h3>Books with subtitles</h3>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"title-type"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#title"</span><span class="p">&gt;</span>main<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code> element identifies the main part of the title.</li>
<li>A second <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">"subtitle"</span><span class="p">&gt;</span></code> element contain the subtitle, and is refined with <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"title-type"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#subtitle"</span><span class="p">&gt;</span>subtitle<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
<li>A third <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">"fulltitle"</span><span class="p">&gt;</span></code> element contains the complete title on one line, with the main title and subtitle separated by a colon and space, and is refined with <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"title-type"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#fulltitle"</span><span class="p">&gt;</span>extended<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
<li>All three <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span><span class="p">&gt;</span></code> elements have an accompanying <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"file-as"</span><span class="p">&gt;</span></code> element, even if the <code class="html">file-as</code> value is the same as the title.</li>
</ol>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>The Moon Pool<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Moon Pool, The<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>The Man Who Was Thursday<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Man Who Was Thursday, The<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;title-type&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>main<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;subtitle&quot;</span><span class="p">&gt;</span>A Nightmare<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subtitle&quot;</span><span class="p">&gt;</span>Nightmare, A<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;title-type&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subtitle&quot;</span><span class="p">&gt;</span>subtitle<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;fulltitle&quot;</span><span class="p">&gt;</span>The Man Who Was Thursday: A Nightmare<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#fulltitle&quot;</span><span class="p">&gt;</span>Man Who Was Thursday, The<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;title-type&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#fulltitle&quot;</span><span class="p">&gt;</span>extended<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
</section>
<section id="books-with-a-more-popular-alternate-title">
<h3>Books with a more popular alternate title</h3>
<p>Some books are commonly referred to by a shorter name than their actual title. For example, <i><a href="/ebooks/mark-twain/the-adventures-of-huckleberry-finn">The Adventures of Huckleberry Finn</a></i> is often simply known as <i>Huck Finn</i>.</p>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">"title-short"</span><span class="p">&gt;</span></code> element contains the common title. It is refined with <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"title-type"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#title-short"</span><span class="p">&gt;</span>short<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
<li>The common title does not have a corresponding <code class="html">file-as</code> element.</li>
</ol>
</section>
<section id="books-with-numbers-or-abbreviations-in-the-title">
<h3>Books with numbers or abbreviations in the title</h3>
<p>Books that contain numbers in their title may be difficult to find with a search query, if the query contains the Arabic number instead of the spelled-out number. For example, trying to find like <i><a href="/ebooks/jules-verne/around-the-world-in-eighty-days/george-makepeace-towle">Around the World in Eighty Days</a></i> by searching for <cite>80</cite> instead of <cite>eighty</cite>. To facilitate such queries, a special <code class="html"><span class="p">&lt;</span><span class="nt">meta</span><span class="p">&gt;</span></code> element is included.</p>
<ol type="1">
<li>If a book title contains numbers or abbreviations, a <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">id</span><span class="o">=</span><span class="s">"alternative-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"se:alternative-title"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#title"</span><span class="p">&gt;</span></code> element is placed after the main title block, containing the title with expanded or alternate spelling to facilitate possible search queries.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Around the World in Eighty Days<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Around the World in Eighty Days<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;alternative-title&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;se:alternative-title&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>Around the World in 80 Days<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:title</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>File No. 113<span class="p">&lt;/</span><span class="nt">dc:title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>File No. 113<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;alternative-title&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;se:alternative-title&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#title&quot;</span><span class="p">&gt;</span>File Number One Hundred and Thirteen<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="book-subjects">
<h2>Book subjects</h2>
<section id="library-of-congress-subjects">
<h3>Library of Congress subjects</h3>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> elements allow us to categorize the ebook. We use the Library of Congress categories assigned to the book for this purpose.</p>
<ol type="1">
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> has the <code class="html">id</code> attribute set to <code class="html">subject-#</code>, where # is a number starting at <code class="path">1</code>, without leading zeros, that increments with each subject.</li>
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> elements are arranged sequentially in a single block.</li>
<li>If the transcription for the ebook comes from Project Gutenberg, the value of <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> element comes from the Project Gutenberg page for the ebook. Otherwise, the value comes from the <a href="https://catalog.loc.gov">Library of Congress catalog</a>.</li>
<li>After the block of <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> elements there is a block of <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"meta-auth"</span><span class="p">&gt;</span></code> elements. The values of these elements represent the URLs at which each subject was found. Typically the value is the same for each element.</li>
<li>A <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"meta-auth"</span><span class="p">&gt;</span></code> element is required for each individual <code class="html"><span class="p">&lt;</span><span class="nt">dc:subject</span><span class="p">&gt;</span></code> element, even if the <code class="html">meta-auth</code> URL is the same for all of the subjects.</li>
</ol>
<p>This example shows how to mark up the subjects for <i><a href="/ebooks/david-lindsay/a-voyage-to-arcturus">A Voyage to Arcturus</a></i>, by David Lindsay:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:subject</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;subject-1&quot;</span><span class="p">&gt;</span>Science fiction<span class="p">&lt;/</span><span class="nt">dc:subject</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">dc:subject</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;subject-2&quot;</span><span class="p">&gt;</span>Psychological fiction<span class="p">&lt;/</span><span class="nt">dc:subject</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">dc:subject</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;subject-3&quot;</span><span class="p">&gt;</span>Quests (Expeditions) -- Fiction<span class="p">&lt;/</span><span class="nt">dc:subject</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">dc:subject</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;subject-4&quot;</span><span class="p">&gt;</span>Life on other planets -- Fiction<span class="p">&lt;/</span><span class="nt">dc:subject</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;meta-auth&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subject-1&quot;</span><span class="p">&gt;</span>https://www.gutenberg.org/ebooks/1329<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;meta-auth&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subject-2&quot;</span><span class="p">&gt;</span>https://www.gutenberg.org/ebooks/1329<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;meta-auth&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subject-3&quot;</span><span class="p">&gt;</span>https://www.gutenberg.org/ebooks/1329<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;meta-auth&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#subject-4&quot;</span><span class="p">&gt;</span>https://www.gutenberg.org/ebooks/1329<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
</section>
<section id="se-subjects">
<h3>SE subjects</h3>
<p>Along with the Library of Congress categories, we include a custom list of SE subjects in the ebook metadata. Unlike Library of Congress categories, SE subjects are purposefully broad. Theyre more like the subject categories in a medium-sized bookstore, as opposed to the precise, detailed, heirarchal Library of Congress categories.</p>
<p>Its the producers task to select appropriate SE subjects for the ebook. Usually just one or two of these categories will suffice.</p>
<section id="all-se-subjects">
<h4>All SE subjects</h4>
<ul>
<li>Adventure</li>
<li>Autobiography</li>
<li>Biography</li>
<li>Childrens</li>
<li>Comedy</li>
<li>Drama</li>
<li>Fantasy</li>
<li>Fiction</li>
<li>Horror</li>
<li>Memoir</li>
<li>Mystery</li>
<li>Nonfiction</li>
<li>Philosophy</li>
<li>Poetry</li>
<li>Satire</li>
<li>Science Fiction</li>
<li>Shorts</li>
<li>Spirituality</li>
<li>Travel</li>
</ul>
</section>
<section id="required-subjects-for-certain-kinds-of-books">
<h4>Required subjects for certain kinds of books</h4>
<ol type="1">
<li>Ebooks that are collections of short stories must have the SE subject <code class="html">Shorts</code>.</li>
<li>Ebooks that are young adult or childrens books must have the SE subject <code class="html">Childrens</code>.</li>
</ol>
</section>
</section>
</section>
<section id="book-descriptions">
<h2>Book descriptions</h2>
<p>An ebook has two kinds of descriptions: a short <code class="html"><span class="p">&lt;</span><span class="nt">dc:description</span><span class="p">&gt;</span></code> element, and a much longer <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:long-description"</span><span class="p">&gt;</span></code> element.</p>
<section id="the-short-description">
<h3>The short description</h3>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:description</span><span class="p">&gt;</span></code> element contains a short, single-sentence summary of the ebook.</p>
<ol type="1">
<li>The description is a single complete sentence ending in a period, not a sentence fragment or restatment of the title.</li>
<li>The description is typogrified, i.e. it contains Unicode curly quotes, em-dashes, and the like.</li>
</ol>
</section>
<section id="the-long-description">
<h3>The long description</h3>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:long-description"</span><span class="p">&gt;</span></code> element contains a much longer description of the ebook.</p>
<ol type="1">
<li>The long description is a non-biased, encyclopedia-like description of the book, including any relevant publication history, backstory, or historical notes. It is as detailed as possible without giving away plot spoilers. It does not impart the producers opinions of the book, or include content warnings. Think along the lines of a Wikipedia-like summary of the book and its history, <em>but under no circumstances can a producer copy and paste from Wikipedia!</em></li>
<li>The long descriptions is typogrified, i.e. it contains Unicode curly quotes, em-dashes, and the like.</li>
<li>The long description is in <em>escaped</em> HTML, with the HTML beginning on its own line after the <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:long-description"</span><span class="p">&gt;</span></code> element.
<aside class="tip">An easy way to escape HTML is to compose the long description in regular HTML, then insert it into the <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:long-description"</span><span class="p">&gt;</span></code> element surrounded by a <code class="html"><span class="cp">&lt;![CDATA[ ... ]]&gt;</span></code> element. Then, run the <code class="bash">se clean</code> tool, which will remove the <code class="html"><span class="cp">&lt;![CDATA[ ... ]]&gt;</span></code> element and escape the contained HTML.</aside>
</li>
<li>Long description HTML follows the <a href="/manual/1.0/code-style">code style conventions of this manual</a>.</li>
<li>The long description element is directly followed by: <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"meta-auth"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#long-description"</span><span class="p">&gt;</span>https://standardebooks.org<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></li>
</ol>
</section>
</section>
<section id="book-language">
<h2>Book language</h2>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:language</span><span class="p">&gt;</span></code> element follows the long description block. It contains the <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a> for the language that the work is in. Usually this is either <code class="html">en-US</code> or <code class="html">en-GB</code>.</li>
</ol>
</section>
<section id="book-transcription-and-page-scan-source">
<h2>Book transcription and page scan source</h2>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">dc:source</span><span class="p">&gt;</span></code> elements represent URLs to sources for the transcription the ebook is based on, and page scans of the print sources used to correct the transcriptions.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">dc:source</span><span class="p">&gt;</span></code> URLs are in https where possible.</li>
<li>A book can contain more than one such element if multiple sources for page scans were used.</li>
</ol>
</section>
<section id="book-production-notes">
<h2>Book production notes</h2>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:production-notes"</span><span class="p">&gt;</span></code> element contains any of the ebook producers production notes. For example, the producer might note that page scans were not available, so an editorial decision was made to add commas to sentences deemed to be transcription typos; or that certain archaic spellings were retained as a matter of prose style specific to this ebook.</li>
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:production-notes"</span><span class="p">&gt;</span></code> element is not present if there are no production notes.</li>
</ol>
</section>
<section id="readability-metadata">
<h2>Readability metadata</h2>
<p>These two elements are automatically computed by the <code class="bash">se prepare-release</code> tool.</p>
<ol type="1">
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:word-count"</span><span class="p">&gt;</span></code> element contains an integer representing the ebooks total word count, excluding some SE files like the colophon and Uncopyright.</li>
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:reading-ease.flesch"</span><span class="p">&gt;</span></code> element contains a decimal representing the computed Flesch reading ease for the book.</li>
</ol>
</section>
<section id="additional-book-metadata">
<h2>Additional book metadata</h2>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.encyclopedia.wikipedia"</span><span class="p">&gt;</span></code> contains the Wikipedia URL for the book. This element is not present if there is no Wikipedia entry for the book.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.vcs.github"</span><span class="p">&gt;</span></code> contains the SE GitHub URL for this ebook. This is calculated by taking the string <code class="html">https://github.com/standardebooks/</code> and appending the <a href="#the-ebook-identifier">SE identifier</a>, without <code class="html">https://standardebooks.org/ebooks/</code>, and with forward slashes replaced by underscores.</li>
</ol>
</section>
<section id="general-contributor-rules">
<h2>General contributor rules</h2>
<p>The following apply to all contributors, including the author(s), translator(s), and illustrator(s).</p>
<ol type="1">
<li>If there is exactly one contributor in a set (for example, only one author, or only one translator) then the <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"display-seq"</span><span class="p">&gt;</span></code> element is ommitted for that contributor.</li>
<li>If there is more than one contributor in a set (for example, multiple authors, or translators) then the <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"display-seq"</span><span class="p">&gt;</span></code> element is specified for each contributor, with a value equal to their position in the SE identifier.</li>
<li>The epub standard specifies that in a set of contributors, if at least one has the <code class="html">display-seq</code> attribute, then other contributors in the set without the <code class="html">display-seq</code> attribute are ignored. For SE purposes, this also means they will be excluded from the SE identifier.</li>
<li>By SE convention, contributors with <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"display-seq"</span><span class="p">&gt;</span>0<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code> are excluded from the SE identifier.</li>
</ol>
</section>
<section id="the-author-metadata-block">
<h2>The author metadata block</h2>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">"author"</span><span class="p">&gt;</span></code> contains the authors name as it appears on the cover.</li>
<li>If there is more than one author, the first authors <code class="html">id</code> is <code class="html">author-1</code>, the second <code class="html">author-2</code>, and so on.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"file-as"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span><span class="p">&gt;</span></code> contains the authors name as filed alphabetically. This element is included even if its identical to <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span><span class="p">&gt;</span></code>.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:name.person.full-name"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span><span class="p">&gt;</span></code> contains the authors full name, with any initials or middle names expanded, and including any titles. This element is not included if the value is identical to <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span><span class="p">&gt;</span></code>.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"alternate-script"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span><span class="p">&gt;</span></code> contains the authors name as it appears on the cover, but transliterated into their native alphabet if applicable. For example, Anton Chekhovs name would be contained here in the Cyrillic alphabet. This element is not included if not applicable.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.encyclopedia.wikipedia"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span><span class="p">&gt;</span></code> contains the URL of the authors Wikipedia page. This element is not included if there is no Wikipedia page.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.authority.nacoaf"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span><span class="p">&gt;</span></code> contains the URL of the authors <a href="http://id.loc.gov/authorities/names.html">Library of Congress Names Database</a> page. It does not include the <code class="path">.html</code> file extension. This element is not included if there is no LoC Names database entry.
<aside class="tip">
<p>This is easily found by visiting the persons Wikipedia page and looking at the very bottom in the “Authority Control” section, under “LCCN.</p>
<p>If you its not on Wikipedia, find it directly by visiting the <a href="http://id.loc.gov/authorities/names.html">Library of Congress Names Database</a>.</p>
</aside>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span></code> contains the <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> for the roles the author played in creating this book.
<p>There is always one element with the value of <code class="html">aut</code>. There may be additional elements for additional values, if applicable. For example, if the author also illustrated the book, there would be an additional <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#author"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span>ill<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code> element.</p>
</li>
</ol>
<p>This example shows a complete author metadata block for <i><a href="/ebooks/anton-chekhov/short-fiction/constance-garnett">Short Fiction</a></i>, by Anton Chekhov:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;author&quot;</span><span class="p">&gt;</span>Anton Chekhov<span class="p">&lt;/</span><span class="nt">dc:creator</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;file-as&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span><span class="p">&gt;</span>Chekhov, Anton<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;se:name.person.full-name&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span><span class="p">&gt;</span>Anton Pavlovich Chekhov<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;alternate-script&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span><span class="p">&gt;</span>Анто́н Па́влович Че́хов<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;se:url.encyclopedia.wikipedia&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span><span class="p">&gt;</span>https://en.wikipedia.org/wiki/Anton_Chekhov<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;se:url.authority.nacoaf&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span><span class="p">&gt;</span>http://id.loc.gov/authorities/names/n79130807<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">&quot;role&quot;</span> <span class="na">refines</span><span class="o">=</span><span class="s">&quot;#author&quot;</span> <span class="na">scheme</span><span class="o">=</span><span class="s">&quot;marc:relators&quot;</span><span class="p">&gt;</span>aut<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code></figure>
</section>
<section id="the-translator-metadata-block">
<h2>The translator metadata block</h2>
<ol type="1">
<li>If the work is translated, the <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span> <span class="na">id</span><span class="o">=</span><span class="s">"translator"</span><span class="p">&gt;</span></code> metadata block follows the author metadata block.</li>
<li>If there is more than one translator, then the first translator's <code class="html">id</code> is <code class="html">translator-1</code>, the second <code class="html">translator-2</code>, and so on.</li>
<li>Each block is identical to the author metadata block, but with <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span> <span class="na">id</span><span class="o">=</span><span class="s">"translator"</span><span class="p">&gt;</span></code> instead of <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">"author"</span><span class="p">&gt;</span></code>.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> is <code class="html">trl</code>: <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#translator"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span>trl<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
<li>Translators often annotate the work; if this is the case, the additional <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> <code class="html">ann</code> is included in a separate <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#translator"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span></code> element.</li>
</ol>
</section>
<section id="the-illustrator-metadata-block">
<h2>The illustrator metadata block</h2>
<ol type="1">
<li>If the work is illustrated by a person who is not the author, the illustrator metadata block follows.</li>
<li>If there is more than one illustrator, the first illustrator's <code class="html">id</code> is <code class="html">illustrator-1</code>, the second <code class="html">illustrator-2</code>, and so on.</li>
<li>Each block is identical to the author metadata block, but with <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span> <span class="na">id</span><span class="o">=</span><span class="s">"illustrator"</span><span class="p">&gt;</span></code> instead of <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">"author"</span><span class="p">&gt;</span></code>.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> is <code class="html">ill</code>: <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#illustrator"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span>ill<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
</ol>
</section>
<section id="the-cover-artist-metadata-block">
<h2>The cover artist metadata block</h2>
<p>The “cover artist” is the artist who painted the art the producer selected for the SE ebook cover.</p>
<ol type="1">
<li>The cover artist metadata block is identical to the author metadata block, but with <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span> <span class="na">id</span><span class="o">=</span><span class="s">"artist"</span><span class="p">&gt;</span></code> instead of <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">"author"</span><span class="p">&gt;</span></code>.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> is <code class="html">art</code>: <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#artist"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span>art<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
</ol>
</section>
<section id="metadata-for-additional-contributors">
<h2>Metadata for additional contributors</h2>
<p>Occasionally a book may have other contributors besides the author, translator, and illustrator; for example, a person who wrote a preface, an introduction, or who edited the work or added endnotes.</p>
<ol type="1">
<li>Additional contributor blocks are identical to the author metadata block, but with <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span><span class="p">&gt;</span></code> instead of <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span><span class="p">&gt;</span></code>.</li>
<li>The <code class="html">id</code> attribute of the <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span><span class="p">&gt;</span></code> is the lowercase, URL-safe, fully-spelled out version of the <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a>. For example, if the MARC relator tag is <code class="html">wpr</code>, the <code class="html">id</code> attribute would be <code class="html">writer-of-preface</code>.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> is one that is appropriate for the role of the additional contributor. Common roles for ebooks are: <code class="html">wpr</code>, <code class="html">ann</code>, and <code class="html">aui</code>.</li>
</ol>
</section>
<section id="transcriber-metadata">
<h2>Transcriber metadata</h2>
<ol type="1">
<li>If the ebook is based on a transcription by someone else, like Project Gutenberg, then transcriber blocks follow.</li>
<li>If there is more than one transcriber, the first transcriber is <code class="html">transcriber-1</code>, the second <code class="html">transcriber-2</code>, and so on.</li>
<li>The <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"file-as"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#transcriber-1"</span><span class="p">&gt;</span></code> element contains an alpha-sorted representation of the transcribers name.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tag</a> is <code class="html">trc</code>: <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"role"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#transcriber-1"</span> <span class="na">scheme</span><span class="o">=</span><span class="s">"marc:relators"</span><span class="p">&gt;</span>trc<span class="p">&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span></code>.</li>
<li>If the transcribers personal homepage is known, the element <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.homepage"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#transcriber-1"</span><span class="p">&gt;</span></code> is included, whose value is the URL of the transcribers homepage. The URL must link to a personal homepage only; no products, services, or other endorsements, commercial or otherwise.</li>
</ol>
</section>
<section id="producer-metadata">
<h2>Producer metadata</h2>
<p>These elements describe the SE producer who produced the ebook for the Standard Ebooks project.</p>
<ol type="1">
<li>If there is more than one producer, the first producer is <code class="html">producer-1</code>, the second <code class="html">producere-2</code>, and so on.</li>
<li>The producer metadata block is identical to the author metadata block, but with <code class="html"><span class="p">&lt;</span><span class="nt">dc:contributor</span> <span class="na">id</span><span class="o">=</span><span class="s">"producer-1"</span><span class="p">&gt;</span></code> instead of <code class="html"><span class="p">&lt;</span><span class="nt">dc:creator</span> <span class="na">id</span><span class="o">=</span><span class="s">"author"</span><span class="p">&gt;</span></code>.</li>
<li>If the producers personal homepage is known, the element <code class="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"se:url.homepage"</span> <span class="na">refines</span><span class="o">=</span><span class="s">"#producer-1"</span><span class="p">&gt;</span></code> is included, whose value is the URL of the transcribers homepage. The URL must link to a personal homepage only; no products, services, or other endorsements, commercial or otherwise.</li>
<li>The <a href="http://www.loc.gov/marc/relators/relacode.html">MARC relator tags</a> for the SE producer usually include all of the following:
<ul>
<li><code class="html">bkp</code>: The producer produced the ebook.</li>
<li><code class="html">blw</code>: The producer wrote the blurb (the long description).</li>
<li><code class="html">cov</code>: The producer selected the cover art.</li>
<li><code class="html">mrk</code>: The producer wrote the HTML markup for the ebook.</li>
<li><code class="html">pfr</code>: The producer proofread the ebook.</li>
<li><code class="html">tyg</code>: The producer reviewed the typography of the ebook.</li>
</ul>
</li>
</ol>
</section>
<section id="the-ebook-manifest">
<h2>The ebook manifest</h2>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">manifest</span><span class="p">&gt;</span></code> element is a required part of the epub spec that defines a list of files within the ebook.</p>
<aside class="tip">The <code class="bash">se print-manifest-and-spine</code> tool generates a complete manifest that can be copied-and-pasted into the ebooks metadata file.</aside>
<ol type="1">
<li>The manifest is in alphabetical order.</li>
<li>The <code class="html">id</code> attribute is the basename of the <code class="html">href</code> attribute.</li>
<li>Files which contain SVG images have the additional <code class="html">properties="svg"</code> property in their manifest item.</li>
<li>The manifest item for the table of contents file has the additional <code class="html">properties="nav"</code> property.</li>
<li>The manifest item for the cover image has the additional <code class="html">properties="cover-image"</code> property.</li>
</ol>
</section>
<section id="the-ebook-spine">
<h2>The ebook spine</h2>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">spine</span><span class="p">&gt;</span></code> element is a required part of the epub spec that defines the reading order of the files in the ebook.</p>
<aside class="tip">The <code class="bash">se print-manifest-and-spine</code> tool generates a draft of the spine by making some educated guesses as to the reading order. The tools output is never 100% correct; manual review of the output is required, and adjustments will be necessary to correct the reading order.</aside>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,116 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '4. Semantics - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="4" id="semantics">
<h1>Semantics</h1>
<p>Semantics convey what an element or section <em>mean</em> or <em>are</em>, instead of merely conveying <em>how they are visually presented</em>.</p>
<p>For example, the following snippet visually presents a paragraph, followed by a quotation from a poem:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>“All done in the tying of a cravat, Sir Percy had declared to his clique of admirers.<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;margin: 1em;&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>“We seek him here, we seek him there,<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Those Frenchies seek him everywhere.<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
Is he in heaven?—Is he in hell,<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
That demmed, elusive Pimpernel?<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></figure>
<p>While that snipped might <em>visually</em> present the text as a paragraph followed by a quotation of verse, the actual HTML tells us nothing about <em>what these lines of text actually are</em>.</p>
<p>Compare the above snippet to this next snippet, which renders almost identically but uses semantically-correct tags and epub's semantic inflection to tell us <em>what the text is</em>:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“All done in the tying of a cravat, Sir Percy had declared to his clique of admirers.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:poem&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>“We seek him here, we seek him there,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Those Frenchies seek him everywhere.<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Is he in heaven?—Is he in hell,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>That demmed, elusive Pimpernel?<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
<p>By inspecting the tags above, we can see that the first line is a semantic paragraph (<code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> stands for <strong>p</strong>aragraph, of course); the paragraph is followed by a semantic block quotation, which browsers automatically render with a margin; the quotation is a poem; the poem has one stanza; and there are four lines in the poem. (By SE convention, <code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code> elements in verse are stanzas and <code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code> elements are lines.)</p>
<section id="semantic-tags">
<h2>Semantic Tags</h2>
<p>Epub allows for the use of the full range of tags in the HTML5 spec. Each tag has a semantic meaning, and each tag in an SE ebook is carefully considered before use.</p>
<p>Below is an incomplete list of HTML5 elements and their semantic meanings. These are some of the most common elements encountered in an ebook.</p>
<section id="block-level-tags">
<h3>Block-level tags</h3>
<p>Block-level tags are by default rendered with <code class="css"><span class="p">{</span> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> <span class="p">}</span></code>. See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">complete list of block-level tags</a>.</p>
<ol type="1">
<li>Sectioning block-level tags denote major structural divisions in a work.
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code>: The top-level tag in any XHTML file. Must contain a direct child that is either a <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span></code>.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code>: A major structural division in a work. Typically a part, volume, chapter, or subchapter. Semantically a <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> cannot stand alone, but is part of a larger work.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span></code>: An item in a larger work that could be pulled out of the work and serialized or syndicated separately. For example, a single poem in a poetry collection, or a single short story in a short story collection; but <em>not</em> a single poem in a larger novel.</li>
</ol>
</li>
<li>Other block-level tags have well-defined semantic meanings.
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span></code>: A paragraph of text.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code>: A quotation displayed on the block level. This may include non-speech “quotations” like business cards, headstones, telegrams, letters, and so on.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code>: Encloses a photograph, chart, or illustration, represented with an <cite>&lt;img&gt;</cite> element. Optionally includes a <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> element for a context-appropriate caption.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code>: Only appears as a child of <code class="html"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span></code>. Represents a context-appropriate caption for the sibling <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code>. A caption <em>is not the same</em> as an <code class="html"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span></code> elements <code class="html">alt</code> text. <code class="html">alt</code> text is strictly a textual description of the image used for screen readers, whereas <code class="html"><span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span></code> has more freedom in its contents, depending on its context.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span></code>: Denotes a header section applying to its direct parent. <code class="html"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span></code> is typically used for chapter headers, but can also be used in <code class="html"><span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span></code>s or other block-level tags that require header styling.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span></code>: Denotes a footer section applying to its direct parent. Typically used to denote signatures in sections like prefaces, forewords, letters, telegrams, and so on.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span></code>: Denotes a thematic break. <code class="html"><span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span></code> <em>is not used</em> any place a black border is desired; it <em>strictly denotes</em> a thematic break.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code>: Denotes an ordered list. Ordered lists are automatically numbered by the renderer.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span></code>: Denotes an unordered list. Ordered lists are bulleted by the renderer.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code>: Denotes an list item in a parent <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> or <code class="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span></code>.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span></code>: Denotes a tabular section, for example when displaying tabular data, or reports or charts where a tabular appearance is desired.</li>
</ol>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span></code> elements are almost never appropriate, as they have no semantic meaning. However, they may in rare occasions be used to group related elements in a situation where no other semantic tag is appropriate.</li>
</ol>
</section>
<section id="inline-tags">
<h3>Inline tags</h3>
<p>Inline tags are by default rendered with <code class="css"><span class="p">{</span> <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="p">;</span> <span class="p">}</span></code>. See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">complete list of inline tags</a>.</p>
<ol type="1">
<li><code class="html"><span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span></code>: Text rendered in italics, with the semantic meaning of emphasize speech, or speech spoken in a different tone of voice; for example, a person shouting, or putting stress on a particular word.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code>: Text rendered in italics, without any explicit semantic meaning. Because <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> lacks semantic meaning, the <code class="html">epub:type</code> attribute is added with appropriate semantic inflection to describe the contents of the tag.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;initialism&quot;</span><span class="p">&gt;</span>HMS<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:name.vessel.ship&quot;</span><span class="p">&gt;</span>Bounty<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span></code>: Text rendered in small caps, without any explicit semantic meaning. Because <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> lacks semantic meaning, the <code class="html">epub:type</code> attribute is added with appropriate semantic inflection to describe the contents of the tag.</li>
<li><code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code>: Plain inline text that requires specific styling or semantic meaning that cannot be achieved with any other semantically meaningful inline tag. Typically used in conjunction with a <code class="html">class</code> or <code class="html">epub:type</code> attribute.</li>
</ol>
</section>
</section>
<section id="semantic-inflection">
<h2>Semantic Inflection</h2>
<p>The epub spec allows for <a href="https://idpf.github.io/epub-vocabs/structure/">semantic inflection</a>, which is a way of adding semantic metadata to elements in the ebook document.</p>
<p>For example, an ebook producer may want to convey that the contents of a certain <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> are part of a chapter. They would do that by using the <code class="html">epub:type</code> attribute:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
<ol type="1">
<li>The epub spec includes a <a href="https://idpf.github.io/epub-vocabs/structure/">vocabulary</a> that can be used in the <code class="html">epub:type</code> attribute. This vocabulary has priority when selecting a semantic keyword, even if other vocabularies contain the same one.</li>
<li>The epub spec might not contain a keyword necessary to describe the semantics of a particular element. In that case, the <a href="http://www.daisy.org/z3998/2012/vocab/structure/">z3998 vocabulary</a> is consulted next.
<p>Keywords using this vocabulary are preceded by the <code class="html">z3998</code> namespace.</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:letter&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
<li>If the z3998 vocabulary doesnt have an appropriate keyword, the <a href="/vocab/1.0">Standard Ebooks vocabulary</a> is consulted next.
<p>Keywords using this vocabulary are preceded by the <code class="html">se</code> namespace.</p>
<p>Unlike other vocabularies, the Standard Ebooks vocabulary is organized hierarchically. A complete vocabulary entry begins with the root vocabulary entry, with subsequent children separated by <code class="html">.</code>.</p>
<figure><code class="html full">The <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:name.vessel.ship&quot;</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;initialism&quot;</span><span class="p">&gt;</span>HMS<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> Bounty<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.</code></figure>
</li>
<li>The <code class="html">epub:type</code> attribute can have multiple keywords separated by spaces, even if the vocabularies are different.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter z3998:letter&quot;</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span></code></figure>
</li>
<li>Child elements inherit the semantics of their parent element.
<p>In this example, both chapters are considered to be “non-fiction, because they inherit it from the <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code> element:</p>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:non-fiction&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-1&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;chapter-2&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;chapter&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,158 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '7. Table of Contents Patterns - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="7" id="table-of-contents-patterns">
<h1>Table of Contents Patterns</h1>
<p>The table of contents (the ToC) is not viewable as a page in the ebook's reading order. Instead, the reader's ereading system displays the ToC as part of its reading interface.</p>
<p>These rules outline how to structure the ToC. Typically, the output of <code class="bash">se print-toc</code> constructs ToCs according to these rules, without further changes being necessary.</p>
<section id="the-toc-nav-element">
<h2>The ToC <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element</h2>
<ol type="1">
<li>The first child of the Toc's <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code> tag is a <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element with the semantic inflection <cite>toc</cite>.</li>
<li>The first child of the <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element is a <code class="html"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">&gt;</span>Table of Contents<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code> element.</li>
<li>The second child of the <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element is an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element representing the items in the Table of Contents.</li>
</ol>
<section id="the-top-level-ol-element">
<h3>The top-level <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element</h3>
<p>The <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element's top-level <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element contains a list of items in the Table of Contents.</p>
<ol type="1">
<li>The first child is a link to the titlepage.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/titlepage.xhtml&quot;</span><span class="p">&gt;</span>Titlepage<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>The second child is a link to the imprint.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/imprint.xhtml&quot;</span><span class="p">&gt;</span>Imprint<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>The second-to-last child is a link to the colophon.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/colophon.xhtml&quot;</span><span class="p">&gt;</span>Colophon<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>The second-to-last child is a link to the Uncopyright.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/uncopyright.xhtml&quot;</span><span class="p">&gt;</span>Uncopyright<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>In books with half title pages, the half title page is listed in the ToC and the next sibling is an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element containing the book's contents.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/halftitle.xhtml&quot;</span><span class="p">&gt;</span>The Moon Pool<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: The Thing on the Moon Path<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-2.xhtml&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: “Dead! All Dead!<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="li-descendents">
<h3><code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> descendents</h3>
<ol type="1">
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> contains an <code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> tag pointing to a file or hash, and optionally also contains an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element representing a nested series of ToC items.</li>
<li>If an <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> element contains a nested <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element, that <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code>'s first child is an <code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> element that points to the beginning of that section.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/halftitle.xhtml&quot;</span><span class="p">&gt;</span>Sybil<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-1.xhtml&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1-1.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>Roman numerals in the ToC have the semantic inflection of <code class="html">z3998:roman</code>. A <code class="html"><span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span></code> element is included if the entire contents of the <code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> element are not a Roman numeral.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-1.xhtml&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="a-descendents">
<h3><code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> descendents</h3>
<ol type="1">
<li>Chapters without titles are represented by their Roman ordinal, without the word <code class="html">Chapter</code>:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>XI<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>Chapters with titles are represented by their Roman ordinal, followed by a colon and a space, followed by the chapter title:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-3.xhtml&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>III<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: The Moon Rock<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>Chapters with unique identifiers (i.e. not <code class="html">Chapter</code>, but something unique to the style of the book, like <code class="html">Book</code> or <code class="html">Stave</code>), include that unique identifier in the <code class="html"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span></code> element:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span><span class="p">&gt;</span>Stave <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: Marleys Ghost<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>High-level sections (like parts or divisions) without titles are represented by their identifier (like <code class="html">Book</code> or <code class="html">Part</code>), followed by their Roman ordinal:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-1.xhtml&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>I<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>High-level sections (like parts or divisions) with titles include the title:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-10.xhtml&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>X<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: The Boys<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>Sections that are not chapters do not include their subtitles in the ToC:
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/epilogue.xhtml&quot;</span><span class="p">&gt;</span>Epilogue: A Morning Call<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/epilogue.xhtml&quot;</span><span class="p">&gt;</span>Epilogue<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>High-level sections (like parts or divisions) with titles include the title:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-10.xhtml&quot;</span><span class="p">&gt;</span>Book <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>X<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>: The Boys<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span></code></figure>
</li>
<li>Entries for half title pages do not include the subtitle:
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/halftitle.xhtml&quot;</span><span class="p">&gt;</span>His Last Bow<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
...
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="the-landmarks-nav-element">
<h2>The landmarks <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element</h2>
<p>After the first <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element, there is a second <code class="html"><span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span></code> element with the semantic inflection of <code class="html">landmarks</code>.</p>
<ol type="1">
<li>The first child is an <code class="html"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">&gt;</span>Landmarks<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code> element.</li>
<li>The second child is an <code class="html"><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span></code> element listing the major structural divisions of the book.</li>
</ol>
<section id="id1">
<h3><code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> descendents</h3>
<p>Each <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> element contains a link to one of the major structural divisions of the book. In general, a structural division is any section of the book that is not part of the body text.</p>
<ol type="1">
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span></code> element has the computed semantic inflection of top-level <code class="html"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span></code> element in the file. The computed semantic inflection includes inherited semantic inflection from the <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code> tag.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/preface.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;frontmatter preface&quot;</span><span class="p">&gt;</span>Preface<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
<li>The body text is represented by a link to the first file of the body text. In a prose novel, this is usually Chapter 1 or Part 1. In a collection this is usually the first item, like the first short story in a short story collection. The text is the title of the work as represented in the metadata <code class="html"><span class="p">&lt;</span><span class="nt">dc:title</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/book-1.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>Sybil<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/chapter-1.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>The Moon Pool<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;text/the-adventure-of-wisteria-lodge.xhtml&quot;</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;bodymatter z3998:fiction&quot;</span><span class="p">&gt;</span>His Last Bow<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,109 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '3. The Structure of an Ebook - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="3" id="the-structure-of-an-ebook">
<h1>The Structure of an Ebook</h1>
<!-- An introduction is required for the data-start-at class to take effect. -->
<p>Books consist of three major partitions: Front Matter, Body Matter, and Back Matter.</p>
<p>These terms become important when building the Table of Contents (ToC). The Landmarks section of the ToC requires items to be labeled with the appropriate partition identifier. See <a href="/manual/1.0/table-of-contents-patterns.html">ToC Patterns</a> for more information about the ToC.</p>
<section id="front-matter">
<h2>Front matter</h2>
<p>Front matter is material that appears before to the main content of the work. It includes such items as a dedication, an epigraph, an introduction, and so on.</p>
<section id="cover">
<h3>Cover</h3>
<p>The cover presents the outer appearance of the book, usually consisting of an image, the title of the book and the authors name. For Standard Ebooks productions, the cover is an SVG image generated from template that combines the book title and author, and a background image. The <code class="path">se build-images</code> tool generates the cover image used for distribution.</p>
</section>
<section id="title-page">
<h3>Title page</h3>
<p>The title page lists the title of the book and the authors name. For Standard Ebooks productions, the title page contains an SVG image generated by the <code class="path">se create-draft</code> tool, which is then compiled for distribution using the <code class="path">se build-images</code> tool.</p>
</section>
<section id="imprint">
<h3>Imprint</h3>
<p>The imprint contains information about the publisher of the book. For Standard Ebooks productions, a template file is provided and the producer modifies it to suit the particular ebook.</p>
</section>
<section id="dedication">
<h3>Dedication</h3>
<p>An inscription at the start of a work and is usually a tribute to some person or persons whom the author wishes to honor.</p>
</section>
<section id="epigraph">
<h3>Epigraph</h3>
<p>A quotation or poem at the start of a book which may set the mood or inspire thoughts about the work to come.</p>
<p>If the epigraph is a poem or quotation from poetry, it must follow the standards for verse described in <a href="/manual/1.0/high-level-structural-patterns.html">High-Level Structural Patterns</a></p>
</section>
<section id="acknowledgements">
<h3>Acknowledgements</h3>
<p>A list of persons or organizations whom the author wishes to thank, generally for helping with the creation of the book. The acknowledgements can also be part of the back matter of the book, depending on where the author placed them.</p>
</section>
<section id="foreword">
<h3>Foreword</h3>
<p>A preliminary section containing information about the book, generally written by someone other than the author.</p>
</section>
<section id="preface">
<h3>Preface</h3>
<p>A preliminary section which states the subject of the book and its aims, generally written by the author of the work.</p>
</section>
<section id="introduction">
<h3>Introduction</h3>
<p>An introduction is typically found in non-fiction works. It is written by the books author and sets out the books main argument.</p>
</section>
<section id="half-title">
<h3>Half title</h3>
<p>In books which include front matter, the half title page marks the start of the body matter.</p>
<ol type="1">
<li>The half title lists the title of the book, but not the author.</li>
<li>A half title is required if there is any front matter in the book.</li>
</ol>
</section>
<section id="table-of-contents">
<h3>Table of Contents</h3>
<p>Also known as the ”ToC. The Table of Contents lists the main headings in the book. In traditionally printed books, the table of contents is part of the front matter of the book.</p>
<ol type="1">
<li>In Standard Ebooks productions, the table of contents is ommitted from the ebook's spine and is instead presented to the reader via their ereaders ToC feature.</li>
</ol>
</section>
</section>
<section id="body-matter">
<h2>Body matter</h2>
<p>The body matter is the main content of the book. It is typically divided into chapters, or in the case of a collection, individual stories, poems, or articles. It may be structured at the highest level into larger divisions such as volumes or parts. Besides the contents of the book itself, it may also include:</p>
<section id="prologue">
<h3>Prologue</h3>
<p>A prologue is generally found only in works of fiction. It may introduce characters, set up background information, or bring forward a critical part of the action to which the story leads.</p>
<p>A prologue is generally part of the body matter, unless the prologue is a fictional element of a frame narrative. In that case, it may be appropriate to place it in front of the half title and give it a different title, while keeping the <code class="html">prologue</code> semantic inflection.</p>
</section>
<section id="epilogue">
<h3>Epilogue</h3>
<p>An epilogue is generally found only in works of fiction. It typically winds up the action or briefly tells the subsequent history of major characters. An epilogue should therefore have similar structure to the chapters of a book.</p>
</section>
</section>
<section id="back-matter">
<h2>Back matter</h2>
<p>Back matter is material which follows the main content, but could be separated from the main content. It might include endnotes, an appendix, an afterword, a colophon, and so on.</p>
<section id="afterword">
<h3>Afterword</h3>
<p>A concluding section of a book, typically but not necessarily written by the author, which stands outside the main story of a work of fiction, or the main argument of a work of non-fiction. It may add additional information or comment on the book and its production.</p>
</section>
<section id="list-of-illustrations">
<h3>List of Illustrations</h3>
<p>Also known as the “LoI, the list of illustrations is an index to the illustrations in a book. The items are included as part of a list and linked to the points in the text where the illustration appears.</p>
</section>
<section id="endnotes">
<h3>Endnotes</h3>
<p>A list of notes to the text. Each item is given a unique sequential number and linked to the point in the text to which the note refers. If the text originally has footnotes, they are converted to endntoes.</p>
</section>
<section id="colophon">
<h3>Colophon</h3>
<p>The colophon contains information about the publisher of the book, the author, the original publication date, the edition, its publication date, the cover artist and other information relevant to the particular release of a book. A Standard Ebooks colophon is standardized and follows a common pattern.</p>
</section>
<section id="copyright-page">
<h3>Copyright Page</h3>
<p>The copyright page includes information about the copyright status of the work. All Standard Ebooks are in the US Public domain, and use a standardized “copyright” page to explain this.</p>
<p>Copyright pages are usually part of the front matter of a book, but in the case of Standard Ebooks productions they are back matter, and the last item in the book.</p>
</section>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,697 @@
<?
require_once('Core.php');
?><?= Template::Header(['title' => '8. Typography - The Standard Ebooks Manual', 'highlight' => 'contribute', 'manual' => true]) ?>
<main>
<article class="manual">
<section data-start-at="8" id="typography">
<h1>Typography</h1>
<section id="section-titles-and-ordinals">
<h2>Section titles and ordinals</h2>
<ol type="1">
<li>Section ordinals in the body text are set in Roman numerals.</li>
<li>Section ordinals in a file's <code class="html"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span></code> element are set in Arabic numerals.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Chapter VII<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Chapter 7<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span></code></figure>
</li>
<li>Section titles are titlecased according to the output of <code class="bash">se titlecase</code>. Section titles are <em>not</em> all-caps or small-caps.</li>
<li>Section titles do not have trailing periods.</li>
<li>Chapter titles omit the word <code class="html">Chapter</code>, unless the word used is a stylistic choice for prose style purposes. Chapters with unique identifiers (i.e. not <code class="html">Chapter</code>, but something unique to the style of the book, like <code class="html">Book</code> or <code class="html">Stave</code>) <em>do</em> include that unique identifier in the title.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Chapter <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title&quot;</span><span class="p">&gt;</span>Stave <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>III<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span></code></figure>
<p>In special cases it may be desirable to retain <code class="html">Chapter</code> for clarity. For example, <a href="/ebooks/mary-shelley/frankenstein/">Frankenstein</a> has “Chapter” in titles to differentiate between the “Letter” sections.</p>
</li>
</ol>
</section>
<section id="italics">
<h2>Italics</h2>
<ol type="1">
<li>Using both italics <em>and</em> quotes (outside of the context of quoted dialog) is usually not necessary. Either one or the other is used based on the rules above.</li>
<li>Words and phrases that require emphasis are italicized with the <code class="html"><span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Perhaps <span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span>he<span class="p">&lt;/</span><span class="nt">em</span><span class="p">&gt;</span> was there, Raoul said, at last.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Strong emphasis, like shouting, may be set in small caps with the <code class="html"><span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>Cant<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span> I? screamed the unhappy creature to himself.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>When a short phrase within a longer clause is italicized, trailing punctuation that may belong to the containing clause is not italicized.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Look at <span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span>that!<span class="p">&lt;/</span><span class="nt">em</span><span class="p">&gt;</span> she shouted.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Look at <span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span>that<span class="p">&lt;/</span><span class="nt">em</span><span class="p">&gt;</span>! she shouted.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>When an entire clause is italicized, trailing punctuation <em>is</em> italicized, <em>unless</em> that trailing punctuation is a comma at the end of dialog.
<p class="html">&lt;p&gt;&lt;em&gt;Charge!&lt;/em&gt; she shouted.&lt;/p&gt;</p>
<p class="html">&lt;p&gt;&lt;em&gt;But I want to&lt;/em&gt;, she said.&lt;/p&gt;</p>
</li>
<li>Words written to be read as sounds are italicized with <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code>.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He could hear the dog barking: <span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span>Ruff, ruff, ruff!<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="italicizing-individual-letters">
<h3>Italicizing individual letters</h3>
<ol type="1">
<li>Individual letters that are read as referring to letters in the alphabet are italicized with the <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> element.</li>
</ol>
<blockquote>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He often rolled his <span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span>r<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>s.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</blockquote>
<ol type="1">
<li>Individual letters that are read as referring names or the shape of the letterform are <em>not</em> italicized.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>...due to the loss of what is known in New England as the “L”: that long deep roofed adjunct usually built at right angles to the main house...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>She was learning her A B Cs.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>His trident had the shape of an E.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>The ordinal <code class="html">nth</code> is set with an italicized <code class="html">n</code>, and without a hyphen.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The <span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span>n<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>th degree.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="italicizing-non-english-words-and-phrases">
<h3>Italicizing non-English words and phrases</h3>
<ol type="1">
<li>Non-English words and phrases that are not in <a href="https://www.merriam-webster.com">Merriam-Webster</a> are italicized.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The <span class="p">&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>corps de ballet<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> was flung into consternation.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Foreign words that are proper names, or are in proper names, are not italicized, unless the name itself would be italicized according to the rules for italicizing or quoting names and titles. Such words are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"LANGUAGE"</span><span class="p">&gt;</span></code> element, to assist screen readers with pronunciation.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>She got off the metro at the <span class="p">&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>Place de Clichy<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> stop, next to the <span class="p">&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>PLe Bon Petit Déjeuner restaurant<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span> est le métro?<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> he asked, and she pointed to <span class="p">&lt;</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>Place de Clichy<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>, next to the <span class="p">&lt;</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>Le Bon Petit Déjeuner<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> restaurant.</code></figure>
</li>
<li>If certain foreign words are used so frequently in the text that italicizing them at each instance would be distracting to the reader, then only the first instance is italicized. Subsequent instances are wrapped in a <code class="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"LANGUAGE"</span><span class="p">&gt;</span></code> element.</li>
<li>Words and phrases that are originally non-English in origin, but that can now be found in <a href="https://www.merriam-webster.com">Merriam-Webster</a>, are not italicized.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Sir Percys bon mot had gone the round of the brilliant reception-rooms.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Inline-level italics are set using the <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> element with an <code class="html">xml:lang</code> attribute corresponding to the correct <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a>.</li>
<li>Block-level italics are set using an <code class="html">xml:lang</code> attribute on the top-level block element, with the style of <code class="css"><span class="nt">font-style</span><span class="o">:</span> <span class="nt">italic</span></code>.
<p>In this example, note the additional namespace declaration, and that we target <em>descendants</em> of the <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code> element; otherwise, the entire <code class="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span></code> element would receive italics!</p>
<figure><code class="css full"><span class="p">@</span><span class="k">namespace</span> <span class="nt">xml</span> <span class="s2">&quot;http://www.w3.org/XML/1998/namespace&quot;</span><span class="p">;</span>
<span class="nt">body</span> <span class="o">[</span><span class="nt">xml</span><span class="o">|</span><span class="nt">lang</span><span class="o">]</span><span class="p">{</span>
<span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:verse&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;la&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>—gelidas leto scrutata medullas,<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Pulmonis rigidi stantes sine vulnere fibras<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Invenit, et vocem defuncto in corpore quaerit.<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="italicizing-or-quoting-newly-used-english-words">
<h3>Italicizing or quoting newly-used English words</h3>
<ol type="1">
<li>When introducing new terms, foreign or technical terms are italicized, but terms composed of common English are set in quotation marks.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>English whalers have given this the name “ice blink.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The soil consisted of that igneous gravel called <span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span>tuff<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>English neologisms in works where a special vocabulary is a regular part of the narrative are not italicized. For example science fiction works may necessarily contain made-up English technology words, and those are not italicized. However, “alien” language in such works <em>is</em> italicized.</li>
</ol>
</section>
<section id="italics-in-names-and-titles">
<h3>Italics in names and titles</h3>
<ol type="1">
<li>Place names, like pubs, bars, or buildings, are not quoted.</li>
<li>The names of publications, music, and art that can stand alone are italicized; additionally, the names of transport vessels are italicized. These include, but are not limited to:
<ul>
<li>Periodicals like magazines, newspapers, and journals.</li>
<li>Publications like books, novels, plays, and pamphlets, <em>except</em> “holy texts, like the Bible or books within the Bible.</li>
<li>Long poems and ballads, like the Iliad, that are book-length.</li>
<li>Long musical compositions or audio, like operas, music albums, or radio shows.</li>
<li>Long visual art, like films or a TV show series.</li>
<li>Visual art, like paintings or sculptures.</li>
<li>Transport vessels, like ships.</li>
</ul>
</li>
<li>The names of short publications, music, or art, that cannot stand alone and are typically part of a larger collection or work, are quoted. These include, but are not limited to:
<ul>
<li>Short musical compositions or audio, like pop songs, arias, or an episode in a radio series.</li>
<li>Short prose like novellas, shot stories, or short (i.e. not epic) poems.</li>
<li>Chapter titles in a prose work.</li>
<li>Essays or individual articles in a newspaper or journal.</li>
<li>Short visual art, like short films or episodes in a TV series.</li>
</ul>
</li>
</ol>
<section id="examples" class="no-numbering">
<h4>Examples</h4>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He read “Candide” while having a pint at the “Kings Head.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He read <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:name.publication.book&quot;</span><span class="p">&gt;</span>Candide<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> while having a pint at the Kings Head.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</section>
</section>
<section id="taxonomy">
<h3>Taxonomy</h3>
<ol type="1">
<li>Binomial names (generic, specific, and subspecific) are italicized with a <code class="html"><span class="p">&lt;</span><span class="nt">i</span><span class="p">&gt;</span></code> element having the <code class="html">z3998:taxonomy</code> semantic inflection.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A bonobo monkey is <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:taxonomy&quot;</span><span class="p">&gt;</span>Pan paniscus<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Family, order, class, phylum or division, and kingdom names are capitalized but not italicized.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A bonobo monkey is in the phylum Chordata, class Mammalia, order Primates.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a taxonomic name is the same as the common name, it is not italicized.</li>
<li>The second part of the binomial name follows the capitalization style of the source text. Modern usage requires lowercase, but older texts may set it in uppercase.</li>
</ol>
</section>
</section>
<section id="capitalization">
<h2>Capitalization</h2>
<ol type="1">
<li>In general, capitalization follows modern English style. Some very old works frequently capitalize nouns that today are no longer capitalized. These archaic capitalizations are removed, unless doing so would change the meaning of the work.</li>
<li>Text in all caps is almost never correct typography. Instead, such text is changed to the correct case and surround with a semantically-meaningful element like <code class="html"><span class="p">&lt;</span><span class="nt">em</span><span class="p">&gt;</span></code> (for emphasis), <code class="html"><span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span></code> (for strong emphasis, like shouting) or <code class="html"><span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span></code> (for unsemantic formatting required by the text). <code class="html"><span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span></code> and <code class="html"><span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span></code> are styled in small-caps by default in SE ebooks.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The sign read BOBS RESTAURANT.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“CHARGE! he cried.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The sign read <span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>Bobs Restaurant<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>Charge!<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span> he cried.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>When something is addressed as an <cite>apostrophe &lt;https://www.merriam-webster.com/dictionary/apostrophe#dictionary-entry-2&gt;</cite>.., <code class="html">O</code> is capitalized.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I carried the bodies into the sea, O walker in the sea!<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Titlecasing follows the formula used in the <code class="bash">se build-images</code> tool.</li>
</ol>
</section>
<section id="indentation">
<h2>Indentation</h2>
<ol type="1">
<li>Body text in a new paragraph that directly follows earlier body text is indented by 1em.</li>
<li>The initial line of body text in a section, or any text following a visible break in text flow, like a header, a scene break, a figure, a block quotation, etc., is not indented.
<p>For example: in a block quotation, there is a margin before the quotation and after the quotation. Thus, the first line of the quotation is not indented, and the first line of body text after the block quotation is also not indented.</p>
</li>
</ol>
</section>
<section id="chapter-headers">
<h2>Chapter headers</h2>
<ol type="1">
<li>Epigraphs in chapter have the quote source set in small caps, without a leading em-dash and without a trailing period.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Desire no more than to thy lot may fall.…”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span>—Chaucer.<span class="p">&lt;/</span><span class="nt">cite</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="css full"><span class="nt">header</span> <span class="o">[</span><span class="nt">epub</span><span class="o">|</span><span class="nt">type</span><span class="o">~=</span><span class="s2">&quot;epigraph&quot;</span><span class="o">]</span> <span class="nt">cite</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;title z3998:roman&quot;</span><span class="p">&gt;</span>II<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">blockquote</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;epigraph&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Desire no more than to thy lot may fall.…”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">cite</span><span class="p">&gt;</span>Chaucer<span class="p">&lt;/</span><span class="nt">cite</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="ligatures">
<h2>Ligatures</h2>
<p>Ligatures are two or more letters that are combined into a single letter, usually for stylistic purposes. In general they are not used, and are replaced with their respective characters.</p>
<blockquote>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Œdipus Rex<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Archæology<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Oedipus Rex<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Archaeology<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</blockquote>
</section>
<section id="punctuation-and-spacing">
<h2>Punctuation and spacing</h2>
<ol type="1">
<li>Sentences are single-spaced.</li>
<li>Ampersands in names of things, like firms, are surrounded by no-break spaces.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The firm of Hawkins<span class="ws">nbsp</span><span class="ni">&amp;amp;</span><span class="ws">nbsp</span>Harker.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Some older works include spaces in common contrations; these spaces are removed.
<!-- See https://english.stackexchange.com/questions/217821/space-before-apostrophe -->
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Would nt it be nice to go out? It s such a nice day.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Wouldnt it be nice to go out? Its such a nice day.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="quotation-marks">
<h3>Quotation marks</h3>
<ol type="1">
<li>“Curly” or typographers quotes, both single and double, are always be used instead of straight quotes.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Dont do it! she shouted.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Quotation marks that are directly side-by-side are separated by a hair space (u+200A) character.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="ws">hairsp</span>Green? Is that what you said? asked Dave.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Words with missing letters represent the missing letters with a right single quotation mark (<code class="utf"></code> or u+2019) character to indicate elision.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He had pork n beans for dinner<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="ellipses">
<h3>Ellipses</h3>
<ol type="1">
<li>The ellipses glyph (<code class="utf"></code> or u+2026) is used for ellipses, instead of consecutive or spaced periods.</li>
<li>When ellipses are used as suspension points (for example, to indicate dialog that pauses or trails off), the ellipses is not preceded by a comma.
<p>Ellipses used to indicate missing words in a quotation require keeping surrounding punctuation, including commas, as that punctuation is in the original quotation.</p>
</li>
<li>A hair space (u+200A) glyph is located <em>before</em> all ellipses that are not directly preceded by punctuation, or that are directly preceded by an em-dash or a two- or three-em-dash.</li>
<li>A regular space is located <em>after</em> all ellipses that are not followed by punctuation.</li>
<li>A hair space (u+200A) glyph is located between an ellipses and any punctuation that follows directly after the ellipses, <em>unless</em> that punctuation is a quotation mark, in which case there space at all between the ellipses and the quotation mark.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“Im so hungry<span class="ws">hairsp</span> What were you saying about eating<span class="ws">hairsp</span>?</code></figure>
</li>
</ol>
</section>
<section id="dashes">
<h3>Dashes</h3>
<p>There are many kinds of dashes, and the run-of-the-mill hyphen is often not the correct dash to use. In particular, hyphens are not used for things like date ranges, phone numbers, or negative numbers.</p>
<ol type="1">
<li>Dashes of all types do not have white space around them.</li>
<li>Figure dashes (<code class="utf"></code> or u+2012) are used to indicate a dash in numbers that arent a range, like phone numbers.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>His number is 5551234.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Hyphens (<code class="utf">-</code> or u+002D) are used to join words, including double-barrel names, or to separate syllables in a word.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Pre- and post-natal.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The Smoot-Hawley act.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Minus sign glyphs (<code class="utf"></code> or u+2212) are used to indicate negative numbers, and are used in mathematical equations instead of hyphens to represent the “subtraction” operator.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was out yesterday!<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>5 2 = 3<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>En-dashes (<code class="utf"></code> or u+2013) are used to indicate a numerical or date range; to indicate a relationships where two concepts are connected by the word “to, for example a distance between locations or a range between numbers; or to indicate a connection in location between two places.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>We talked 23 days ago.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>We took the BerlinMunich train yesterday.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I saw the torpedo-boat in the EmsJade Canal.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="em-dashes">
<h4>Em-dashes</h4>
<p>Em-dashes (<code class="utf"></code> or u+2014) are typically used to offset parenthetical phrases.</p>
<p># Em-dashes are preceded by the invisible word joiner glyph (u+2060).</p>
<ol type="1">
<li>Interruption in dialog is set by a single em-dash, not two em-dashes or a two-em-dash.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“I wouldnt go as far as that, not myself, but<span class="ws">wj</span>——”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>“I wouldnt go as far as that, not myself, but<span class="ws">wj</span>—”<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="partially-obscured-words">
<h4>Partially-obscured words</h4>
<ol type="1">
<li>Em-dashes are used for partially-obscured years.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was the year 19<span class="ws">wj</span> in the town of Metropolis.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>A regular hyphen is used in partially obscured years where only the last number is obscured.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was the year 192- in the town of Metropolis.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>A two-em-dash (<code class="utf"></code> or u+2E3A) preceded by a word joiner (u+2060) is used in <em>partially</em> obscured word.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Sally J<span class="ws">wj</span> walked through town.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>A three-em-dash (<code class="utf"></code> or u+2E3B) is used for <em>completely</em> obscured words.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was night in the town of .<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</section>
<section id="numbers-measurements-and-math">
<h2>Numbers, measurements, and math</h2>
<ol type="1">
<li>Coordinates are set with the prime (<code class="utf"></code> or u+2032) or double prime (<code class="utf"></code> or u+2033) glyphs, <em>not</em> single or double quotes.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>Lat.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 27° 0&#39; <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass&quot;</span><span class="p">&gt;</span>N.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>, <span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>long.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 20° 1&#39; <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass eoc&quot;</span><span class="p">&gt;</span>W.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>Lat.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 27° 0 <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass&quot;</span><span class="p">&gt;</span>N.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>, <span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>long.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 20° 1 <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass eoc&quot;</span><span class="p">&gt;</span>W.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>Lat.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 27° 0 <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass&quot;</span><span class="p">&gt;</span>N.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>, <span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>long.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> 20° 1 <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass eoc&quot;</span><span class="p">&gt;</span>W.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Ordinals for Arabic numbers are as follows: st, nd, rd, th.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The 1st, 2d, 3d, 4th.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The 1st, 2nd, 3rd, 4th.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
<section id="roman-numerals">
<h3>Roman numerals</h3>
<ol type="1">
<li>Roman numerals are not followed by trailing periods, unless for grammatical reasons.</li>
<li>Roman numerals are set using ASCII, not the Unicode Roman numeral glyphs.</li>
<li>Roman numerals are not followed by ordinal indicators.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Henry the <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>VIII<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>th had six wives.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Henry the <span class="p">&lt;</span><span class="nt">span</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;z3998:roman&quot;</span><span class="p">&gt;</span>VIII<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> had six wives.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="fractions">
<h3>Fractions</h3>
<ol type="1">
<li>Fractions are set in their appropriate Unicode glyph, if a glyph available; for example, <code class="utf">½</code>, <code class="utf">¼</code>, <code class="utf">¾</code> and u+00BCu+00BE and u+2150u+2189.&lt;/p&gt;
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I need 1/4 cup of sugar.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I need ¼ cup of sugar.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a fraction doesn't have a corresponding Unicode glyph, it is composed using the fraction slash Unicode glyph (<code class="utf"></code> or u+2044) and superscript/subscript Unicode numbers. See <a href="https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts">this Wikipedia entry for more details</a>.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Roughly 6/10 of a mile.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Roughly ⁶⁄₁₀ of a mile.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="measurements">
<h3>Measurements</h3>
<ol type="1">
<li>Dimension measurements are set using the Unicode multiplication glyph (<code class="utf">×</code> or u+00D7), <em>not</em> the ASCII letter <code class="utf">x</code> or <code class="utf">X</code>.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The board was 4 x 3 x 7 feet.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>The board was 4 × 3 × 7 feet.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Feet and inches in shorthand are set using the prime (<code class="utf"></code> or u+2032) or double prime (<code class="utf"></code> or u+2033) glyphs (<em>not</em> single or double quotes), with a no-break space (u+00A0) separating consecutive feet and inch measurements.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He was 6&#39;<span class="ws">nbsp</span>1&quot; in height.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He was 6<span class="ws">nbsp</span>1 in height.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He was 6<span class="ws">nbsp</span>1 in height.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>When forming a compound of a number and unit of measurement in which the measurement is abbreviated, the number and unit of measurement are separated with a no-break space (u+0A00), <em>not</em> a dash.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A 12-mm pistol.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A 12<span class="ws">nbsp</span>mm pistol.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="math">
<h3>Math</h3>
<ol type="1">
<li>In works that are not math-oriented or that dont't have a significant amount of mathematical equations, equations are set using regular HTML and Unicode.
<ol type="1">
<li>Operators and operands in mathematical equations are separated by a space.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>62+2=6<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>6 2 + 2 = 6<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Operators like subtraction (<code class="utf"></code> or u+2212), multiplication (<code class="utf">×</code> or u+00D7), and equivalence (<code class="utf"></code> or u+2261) are set using their corresponding Unicode glyphs, <em>not</em> a hyphen or <code class="utf">x</code>. Almost all mathematical operators have a corresponding special Unicode glyph.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>6 - 2 x 2 == 2<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>6 2 × 2 2<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</li>
<li>In works that are math-oriented or that have a significant amount of math, <em>all</em> variables, equations, and other mathematical objects are set using MathML.
<ol type="1">
<li>When MathML is used in a file, the <code class="html">m</code> namespace is declared at the top of the file and used for all subsequent MathML code, as follows:
<figure><code class="html full">xmlns:m=&quot;http://www.w3.org/1998/Math/MathML&quot;</code></figure>
<p>This namespace is declared and used even if there is just a single MathML equation in a file.</p>
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xmlns:epub</span><span class="o">=</span><span class="s">&quot;http://www.idpf.org/2007/ops&quot;</span> <span class="na">ub:prefix</span><span class="o">=</span><span class="s">&quot;z3998: http://www.daisy.org/z3998/2012/vocab/structure/, se: https://standardebooks.org/vocab/1.0&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-GB&quot;</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">math</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1998/Math/MathML&quot;</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ci</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">ci</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xmlns:epub</span><span class="o">=</span><span class="s">&quot;http://www.idpf.org/2007/ops&quot;</span> <span class="na">xmlns:m</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1998/Math/MathML&quot;</span> <span class="na">epub:prefix</span><span class="o">=</span><span class="s">&quot;z3998: http://www.daisy.org/z3998/2012/vocab/structure/, se: https://standardebooks.org/vocab/1.0&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en-GB&quot;</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>When possible, Content MathML is used over Presentational MathML. (This may not always be possible depending on the complexity of the work.)
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x + 1 = y&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:equals</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:plus</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:cn</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">m:cn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>y<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Each <code class="html"><span class="p">&lt;</span><span class="nt">m:math</span><span class="p">&gt;</span></code> element has an <code class="html">alttext</code> attribute.
<ol type="1">
<li>The <code class="html">alttext</code> attribute describes the contents in the element in plain-text Unicode according to the rules in <a href="https://www.unicode.org/notes/tn28/UTN28-PlainTextMath.pdf">this specification</a>.</li>
<li>Operators in the <code class="html">alttext</code> attribute are surrounded by a single space.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x+1=y&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:equals</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:plus</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:cn</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">m:cn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>y<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x + 1 = y&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:equals</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:plus</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:cn</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">m:cn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:ci</span><span class="p">&gt;</span>y<span class="p">&lt;/</span><span class="nt">m:ci</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:apply</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</li>
<li>When using Presentational MathML, <code class="html"><span class="p">&lt;</span><span class="nt">m:mrow</span><span class="p">&gt;</span></code> is used to group subexpressions, but only when necessary. Many elements in MathML, like <code class="html"><span class="p">&lt;</span><span class="nt">m:math</span><span class="p">&gt;</span></code> and <code class="html"><span class="p">&lt;</span><span class="nt">m:mtd</span><span class="p">&gt;</span></code>, <em>imply</em> <code class="html"><span class="p">&lt;</span><span class="nt">m:mrow</span><span class="p">&gt;</span></code> and redundant elements are not desirable. See <a href="https://www.w3.org/Math/draft-spec/mathml.html#chapter3_presm.reqarg">this section of the MathML spec</a> for more details.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mrow</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:mrow</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;x&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a Presentational MathML expression contains a function, the invisible Unicode function application glyph (u+2061) is used as an operator between the function name and its operand. This element looks exactly like the following, including the comment for readability: <code class="html"><span class="p">&lt;</span><span class="nt">m:mo</span><span class="p">&gt;</span><span class="c">&lt;!--hidden u+2061 function application--&gt;</span><span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span></code>. (Note that the preceding element contains an <em>invisible</em> Unicode character! It can be revealed with the <code class="bash">se unicode-names</code> tool.)
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;f(x)&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>f<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;f(x)&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>f<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span><span class="p">&gt;</span><span class="utf">u+2061</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><span class="c">&lt;!--hidden u+2061 function application--&gt;</span><span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Expressions grouped by parenthesis or brackets are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">m:row</span><span class="p">&gt;</span></code> element, and fence characters are set using the <code class="html"><span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">"true"</span><span class="p">&gt;</span></code> element. Separators are set using the <code class="html"><span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">separator</span><span class="o">=</span><span class="s">"true"</span><span class="p">&gt;</span></code> element. <code class="html"><span class="p">&lt;</span><span class="nt">m:mfenced</span><span class="p">&gt;</span></code>, which used to imply both fences and separators, is deprecated and thus is not used.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;f(x,y)&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>f<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span><span class="p">&gt;</span><span class="utf">u+2061</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><span class="c">&lt;!--hidden u+2061 function application--&gt;</span><span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:fenced</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>y<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:fenced</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;f(x,y)&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>f<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span><span class="p">&gt;</span><span class="utf">u+2061</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span><span class="c">&lt;!--hidden u+2061 function application--&gt;</span><span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">separator</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>,<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span> <span class="na">fence</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:row</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>If a MathML variable includes an overline, it is set by combining the variable's normal Unicode glyph and the Unicode overline glyph (<code class="utf"></code> or u+203E) in a <code class="html"><span class="p">&lt;</span><span class="nt">m:mover</span><span class="p">&gt;</span></code> element. However in the <code class="html">alttext</code> attribute, the Unicode overline combining mark (u+0305) is used to represent the overline in Unicode.
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:math</span> <span class="na">alttext</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mover</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mi</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span class="nt">m:mi</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">m:mo</span><span class="p">&gt;</span><span class="p">&lt;/</span><span class="nt">m:mo</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:mover</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">m:math</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</li>
</ol>
</section>
</section>
<section id="latinisms">
<h2>Latinisms</h2>
<ul>
<li><a href="/manual/1.0/typography#8.11">See here for times</a>.</li>
</ul>
<ol type="1">
<li>Latinisms (except sic) that can be found in a modern dictionary are not italicized. Examples include e.g., i.e., ad hoc, viz., ibid., etc.. The exception is sic, which is always italicized.</li>
<li>Whole passages of Latin language and Latinisms that arent found in a modern dictionary are italicized.</li>
<li>&amp;c; is not used, and is replaced with “etc.</li>
<li>For “Ibid., <a href="/manual/1.0/high-level-structural-patterns#6.9">see Endnotes</a>.</li>
<li>Latinisms that are abbreviations are set in lowercase with periods between words and no spaces between them, except BC, AD, BCE, and CE, which are set without periods, in small caps, and wrapped with <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"era"</span><span class="p">&gt;</span></code>:
<figure><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">era</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Julius Caesar was born around 100 <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;era&quot;</span><span class="p">&gt;</span>BC<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="initials-and-abbreviations">
<h2>Initials and abbreviations</h2>
<ul>
<li><a href="/manual/1.0/typography#8.13">See here for temperatures</a>.</li>
<li><a href="/manual/1.0/typography#8.11">See here for times</a>.</li>
<li><a href="/manual/1.0/typography#8.9">See here for Latinisms including BC and AD</a>.</li>
</ul>
<ol type="1">
<li>“OK” is set without periods or spaces. It is not an abbreviation.</li>
<li>When an abbreviation contains a terminal period, its <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span></code> tag has the additional <code class="html">eoc</code> class (End of Clause) if the terminal period is also the last period in clause. Such sentences do not have two consecutive periods.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>She loved Italian food like pizza, pasta, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;eoc&quot;</span><span class="p">&gt;</span>etc.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He lists his name alphabetically as Johnson, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;name eoc&quot;</span><span class="p">&gt;</span>R. A.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>His favorite hobby was <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;acronym&quot;</span><span class="p">&gt;</span>SCUBA<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Initialisms, postal codes, and abbreviated US states are set in all caps, without periods or spaces.</li>
<li>Acronyms (terms made up of initials and pronounced as one word, like NASA, SCUBA, or NATO) are set in small caps, without periods, and are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"acronym"</span><span class="p">&gt;</span></code> element.
<figure><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">acronym</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He was hired by <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;acronym&quot;</span><span class="p">&gt;</span>NASA<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> last week.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Initialisms (terms made up of initials in which each initial is pronounced separately, like ABC, HTML, or CSS) are set with without periods and are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"initialism"</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He was hired by the <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;initialism&quot;</span><span class="p">&gt;</span>FBI<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> last week.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Initials of peoples names are each separated by periods and spaces. The group of initials is wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;name&quot;</span><span class="p">&gt;</span>H. P.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> Lovecraft described himself as an aged antiquarian.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Academic degrees, except ones that include a lowercase letter (like PhD) are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"degree"</span><span class="p">&gt;</span></code> element. For example: BA, BD, BFA, BM, BS, DB, DD, DDS, DO, DVM, JD, LHD, LLB, LLD, LLM, MA, MBA, MD, MFA, MS, MSN.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Judith Douglas, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;degree&quot;</span><span class="p">&gt;</span>DDS<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>State names and postal codes are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"postal"</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Washington <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;postal&quot;</span><span class="p">&gt;</span>DC<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Abbreviations that are abbreviations of a single word, and that are not acronyms or initialisms (like Mr., Mrs., or lbs.) are set with <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span></code>.
<ol type="1">
<li>Abbreviations ending in a lowercase letter are set without spaces and followed by a period.</li>
<li>Abbreviations without lowercase letters are set without spaces and without a trailing period.</li>
<li>Abbreviations that describes the next word, like Mr., Mrs., Mt., and St., are set with a no-break space between the abbreviation and its target.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He called on <span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>Mrs.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span><span class="ws">nbsp</span>Jones yesterday.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</li>
<li>Compass points are separated by periods and spaces. The group of points are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"compass"</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He traveled <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass&quot;</span><span class="p">&gt;</span>S.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>, <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass&quot;</span><span class="p">&gt;</span>N. W.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>, then <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compass eoc&quot;</span><span class="p">&gt;</span>E. S. E.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="times">
<h2>Times</h2>
<ol type="1">
<li>Times in a.m. and p.m. format are set in lowercase, with periods, and without spaces.</li>
<li>“a.m. and “p.m. are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"time"</span><span class="p">&gt;</span></code> element.</li>
</ol>
<section id="times-as-digits">
<h3>Times as digits</h3>
<ol type="1">
<li>Digits in times are separated by a colon, not a period or comma.</li>
<li>Times written in digits followed by “a.m. or “p.m. are set with a no-break space between the digit and “a.m. or “p.m..
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He called at 6:40<span class="ws">nbsp</span><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;time eoc&quot;</span><span class="p">&gt;</span>a.m.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="times-as-words">
<h3>Times as words</h3>
<ol type="1">
<li>Words in a spelled-out time are separated by spaces, unless they appear before a noun, where they are separated by a hyphen.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He arrived at five thirty.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>They took the twelve-thirty train.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Times written in words followed by “a.m. or “p.m. are set with a regular space between the time and “a.m. or “p.m..
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>She wasnt up till seven <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;time eoc&quot;</span><span class="p">&gt;</span>a.m.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Military times that are spelled out (for example, in dialog) are set with dashes. Leading zeros are spelled out as “oh”.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He arrived at oh-nine-hundred.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="chemicals-and-compounds">
<h2>Chemicals and compounds</h2>
<ol type="1">
<li>Molecular compounds are set in Roman, without spaces, and wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"compound"</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He put extra <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compound&quot;</span><span class="p">&gt;</span>NaCl<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> on his dinner.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
<li>Elements in a molecular compound are capitalized according to their listing in the periodic table.</li>
<li>Amounts of an element in a molecular compound are set in subscript with a <code class="html"><span class="p">&lt;</span><span class="nt">sub</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>She drank eight glasses of <span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;compound&quot;</span><span class="p">&gt;</span>H<span class="p">&lt;</span><span class="nt">sub</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>O<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> a day.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="temperatures">
<h2>Temperatures</h2>
<ol type="1">
<li>The minus sign glyph (<code class="utf"></code> or u+2212), not the hyphen glyph, is used to indicate negative numbers.</li>
<li>Either the degree glyph (<code class="utf">°</code> or u+00B0) or the word “degrees” is acceptable. Works that use both are normalize to use the dominant method.</li>
</ol>
<section id="abbreviated-units-of-temperature">
<h3>Abbreviated units of temperature</h3>
<p>Units of temperature measurement, like Farenheit or Celcius, may be abbreviated to “F” or “C”.</p>
<ol type="1">
<li>Units of temperature measurement do not have trailing periods.</li>
<li>If an <em>abbreviate</em> unit of temperature measurement is preceded by a number, the unit of measurement is first preceded by a hair space (u+200A).</li>
<li>Abbreviated units of measurement are set in small caps.</li>
<li>Abbreviated units of measurement are wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">"temperature"</span><span class="p">&gt;</span></code> element.
<figure><code class="css full"><span class="nt">abbr</span><span class="p">.</span><span class="nc">temperature</span><span class="p">{</span>
<span class="k">font-variant</span><span class="p">:</span> <span class="kc">all-small-caps</span><span class="p">;</span>
<span class="p">}</span></code></figure>
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It was 23.33° Celsius (or 10°<span class="ws">hairsp</span><span class="p">&lt;</span><span class="nt">abbr</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;temperature&quot;</span><span class="p">&gt;</span>F<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span>) last night.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
<section id="scansion">
<h2>Scansion</h2>
<p>Scansion is the representation of the metrical stresses in lines of verse.</p>
<ol type="1">
<li><code class="utf">×</code> (u+00d7) indicates an unstressed sylllable and <code class="utf">/</code> (u+002f) indicates a stressed syllable. They are separated from each other with no-break spaces.</li>
</ol>
</section>
<section id="legal-cases-and-terms">
<h2>Legal cases and terms</h2>
<ol type="1">
<li>Legal cases are set in italics.</li>
<li>Either “versus” or “v. are acceptable in the name of a legal case; if using “v., a period follows the “v., and it is wrapped in an <code class="html"><span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span></code> element.
<figure><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>He prosecuted <span class="p">&lt;</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">&quot;se:name.legal-case&quot;</span><span class="p">&gt;</span>Johnson <span class="p">&lt;</span><span class="nt">abbr</span><span class="p">&gt;</span>v.<span class="p">&lt;/</span><span class="nt">abbr</span><span class="p">&gt;</span> Smith<span class="p">&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
<section id="morse-code">
<h2>Morse Code</h2>
<p>Any Morse code that appears in a book will have to be changed to fit SE's format.</p>
<section id="american-morse-code">
<h3>American Morse Code</h3>
<ol type="1">
<li>The middle dot glyph (U+00B7) is used for the short mark or dot.</li>
<li>The en dash (U+2013) is used for the longer mark or short dash.</li>
<li>The em dash (U+2014) is used for the long dash (the letter L).</li>
<li>If two en dashes are placed next to each other, a hair space (U+200A) must be placed in between them to keep the glyphs from merging into a longer dash.</li>
<li>Only in American Morse Code, there are internal gaps used between glyphs in the letters C,O,R, or Z. Use a no-break space (U+00A0) for this gap.</li>
<li>Use en spaces (U+2002) between letters.</li>
<li>Use em spaces (U+2003) between words.
<figure class="wrong"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>-- .. .. __ .. - - __ . . .. __ -.. .. . .- -<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>My little old cat.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
<figure class="corrected"><code class="html full"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>– – ·· ·· — ·· – – — · · · — –·· ·· · ·– –<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>My little old cat.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></code></figure>
</li>
</ol>
</section>
</section>
</section>
</article>
</main>
<?= Template::Footer() ?>

View file

@ -0,0 +1,121 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Style Manual | Standard Ebooks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/core.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/manual.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/monokai.css" type="text/css" media="screen">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#394451">
<meta name="theme-color" content="#394451">
<meta property="og:title" content="The Standard Ebooks Structure and Semantics Manual" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://standardebooks.org" />
<meta property="og:image" content="https://standardebooks.org/images/logo.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@standardebooks">
<meta name="twitter:creator" content="@standardebooks">
</head>
<body>
<header>
<a href="/">Standard Ebooks</a>
<nav>
<ul>
<li><a href="/ebooks/">Ebooks</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contribute/" class="highlighted">Get Involved</a></li>
</ul>
</nav>
</header>
<main>
<article class="manual">
<section id="uncategorized-art-books">
<h1>Uncategorized art books</h1>
<p>You may find these 1922-and-earlier art books useful as you conduct cover art research.</p>
<ul>
<li><a href="https://books.google.com/books?id=Q3YoAAAAYAAJ">Art Studies for Schools: Or, Hints on the Use of Reproductions of High Art</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=gri.ark:/13960/t7xm3q676;view=thumb;seq=13">Catalogue of the annual exhibition / The Pennsylvania 1912</a></li>
<li><a href="https://catalog.hathitrust.org/Record/009438195">Catalog Record: Art at the Royal Academy, London, 1897</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100913061">Catalog Record: The work of John S. Sargent, R.A.</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100344701">Catalog Record: Cubists and post-impressionism</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=uc2.ark:/13960/t8cf9x30t;view=thumb;seq=229">The Luxembourg museum; its paintings. Three hundred and eighty-nine</a></li>
<li><a href="https://catalog.hathitrust.org/Record/009438136">Catalog Record: Illustrated catalogue : paintings in the...</a></li>
<li><a href="https://books.google.com/books?id=Qn1FAQAAMAAJ">A.L.A. Portrait Index: Index to Portraits Contained in Printed Books and</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=njp.32101066379189;view=thumb;seq=5">The Nicolas Roerich exhibition, with introduction and catalogue</a></li>
<li><a href="https://books.google.com/books?id=NBgtAAAAYAAJ">Art of the British Empire Overseas - Charles Holme</a></li>
<li><a href="https://books.google.com/books?id=i6hEAQAAMAAJ">The International Studio</a></li>
<li><a href="https://catalog.hathitrust.org/Record/008018731">Catalog Record: Royal Academy pictures and sculpture</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100237187">Catalog Record: Paris-Salon, 1883</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000352339">Catalog Record: Farbige Tierbilder</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000287970">Catalog Record: Catalogue of the Berlin Photographic Company...</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=uc1.b3068561;view=thumb;seq=165">Katalog der Grossen Berliner Kunstausstellung, 1912.</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=umn.31951p00149881h;view=thumb;seq=161">Grosse Berliner Kunst-Ausstellung, 1900 : Katalog.</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=wu.89056204787;view=thumb;seq=161">Illustrirter Katalog / Grosse Berliner Kunst-Ausstellung. 1903.</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=umn.31951000746060s;view=thumb;seq=1">La Ilustración ibérica. t.14 (1896).</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=gri.ark:/13960/t08w61g82;view=thumb;seq=349">Entwickelungsgeschichte der modernen Kunst : 3.</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=nnc1.ar62882988;view=thumb;seq=1">Illustrated catalogue of highly important old and modern paintings</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=mdp.39015015820817;view=thumb;seq=541">Pittura, scultura futuriste (dinamismo plastico) Con 51 riproduzioni</a></li>
<li><a href="http://www.twainquotes.com/UniformEds/UniformEdsCh33.html">Harper and Brothers Pictorial Hardcover and Gift Editions</a></li>
<li><a href="http://brandywine.doetech.net/Detlobjps.cfm?ParentListID=126891&amp;amp;ObjectID=1531590&amp;amp;rec_num=175">Object Detail</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=yale.39002088545273;view=thumb;seq=57">(this is a whole series) Royal Academy pictures and sculpture. 1900</a></li>
<li><a href="https://catalog.hathitrust.org/Record/011254573">Catalog Record: The art of the Hon. John Collier</a></li>
<li><a href="https://books.google.com/books?id=_0w4AAAAMAAJ">The Story of American Painting: The Evolution of Painting in America from - Charles Henry Caffin</a></li>
<li><a href="https://archive.org/details/diekunstmonatshe21mnuoft">Die Kunst : Monatsheft für freie und angewandte Kunst</a></li>
<li><a href="https://archive.org/stream/cubistesfuturist00coquuoft#page/267/mode/thumb">Cubistes, futuristes, passéistes; essai sur la</a></li>
<li><a href="https://archive.org/stream/einblickin00wald#page/23/mode/thumb">Einblick in Kunst: Expressionismus, Futurismus,...</a></li>
<li><a href="https://archive.org/stream/studiointernatio54lond#page/8/mode/thumb">Studio international</a></li>
<li><a href="https://books.google.com/books?id=q7GUsAXiiA4C">The Magazine of Art</a></li>
<li><a href="https://books.google.com/books?id=sdJAAAAAYAAJ">Cubists and Post-impressionism - Arthur Jerome Eddy</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100344340">Catalog Record: L&amp;#39;art flamand</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100445834">Catalog Record: L&amp;#39;école belge de peinture, 1830-1905</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100578657">Catalog Record: Fernand Khnopff</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000640739">Catalog Record: Gazette des beaux-arts (FULL SERIES)</a></li>
<li><a href="https://archive.org/stream/catalogueofficiel00expo#page/40/mode/thumb">Catalogue officiel illustré de l&amp;#39;Exposition cen...</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=njp.32101067654994;view=1up;seq=6">Offizieller Katalog der Internationalen Kunst-Ausstellung (1899).</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=wu.89057259921;view=1up;seq=23">British painting, by Irene Maguinness.</a></li>
<li><a href="https://books.google.com/books?id=Jl9OAQAAMAAJ">Illustrated Catalogue: Paintings in the Metropolitan Museum of Art, New York - George Henry Story</a></li>
<li><a href="https://archive.org/stream/bub_gb_yxRaAAAAYAAJ#page/n54/mode/thumb">Impressionisten Guys, Manet, Van Gogh, Pissarro...</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000636935">Catalog Record: The Royal Academy illustrated</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000071454">Catalog Record: The Art journal</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100585480">Catalog Record: Handbuch der Kunstgeschichte</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=nyp.33433082172564;view=thumb;seq=9">Catalogue of the annual exhibition. v. 70-71 (1901-1902).</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000521207">Catalog Record: Catalogue of the annual exhibition of...</a></li>
<li><a href="https://books.google.com/books?id=mEpGAQAAIAAJ">Meissonier, his life and his art - Jean Louis Ernest Meissonier, Octave Gréard</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=gri.ark:/13960/t4fn6k42j;view=thumb;seq=41">Catalogue of the annual exhibition / The Pennsylvania 1905.</a></li>
<li><a href="https://books.google.com/books?id=xCtAAAAAYAAJ">Zur Geschichte der Düsseldorfer Kunst insbesondere im xix. Jahrhundert - Friedrich Schaarschmidt</a></li>
<li><a href="https://books.google.com/books?id=v7hHAQAAIAAJ">Bryan&amp;#39;s dictionary of painters and engravers - Michael Bryan, George Charles Williamson</a></li>
<li><a href="https://archive.org/details/memorialexhibiti00eaki">Memorial exhibition of the works of the late Thomas Eakins, beginning December 23, 1917 and continuing through January 13, 1918 : Eakins, Thomas, 1844-1916</a></li>
<li><a href="https://books.google.com/books?id=CSFbAAAAYAAJ">Kunst und Künstler: Illustrierte Monatsschrift für bildende Kunst und - Karl Scheffler</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000415396">Catalog Record: Gauguin et le groupe de Pont-Aven. Documents...</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000062223">Catalog Record: Salon of the &amp;amp;quot;Nationale</a></li>
<li><a href="https://books.google.com/books?id=JAcrAAAAYAAJ">Academy Notes</a></li>
<li><a href="https://books.google.com/books?id=etcwAQAAMAAJ">Great Painters of the XLX Century and Their Paintings - Léonce Bénédite</a></li>
<li><a href="https://catalog.hathitrust.org/Record/005722615">Catalog Record: Catalogue of paintings and drawings</a></li>
<li><a href="https://books.google.com/books?id=nH9HAQAAMAAJ">The International Studio</a></li>
<li><a href="https://books.google.com/books?id=B6saAAAAYAAJ&amp;">Exhibition: Oil Paintings by Contemporary American Artists</a></li>
<li><a href="https://books.google.com/books?id=oYdLAQAAMAAJ">Catalogue of the Annual Exhibition of the Pennsylvania Academy of the</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000523379">Catalog Record: Studio international</a></li>
<li><a href="https://books.google.com/books?id=xCtAAAAAYAAJ">Zur Geschichte der Düsseldorfer Kunst insbesondere im xix. Jahrhundert</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=njp.32101079835656;view=thumb;seq=1">Catalogue of the paintings and sketches of the late Thomas Hill</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=iau.31858028830473;view=thumb;seq=1">Picturesque California</a></li>
<li><a href="https://catalog.hathitrust.org/Record/000417706">Hubert Robert</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100439727">The Copley prints; reproductions of notable paintings</a></li>
<li><a href="https://archive.org/details/cu31924014892024">Scottish painting past and present, 1620-1908</a></li>
<li><a href="https://archive.org/stream/cyclopediaofpain03chamuoft">Cyclopedia of Painters and Paintings</a></li>
<li><a href="https://catalog.hathitrust.org/Record/009437624">Art in Australia (series)</a></li>
<li><a href="https://archive.org/stream/julianashtonbook00asht#page/14/mode/thumb">The Julian Ashton Book</a></li>
<li><a href="https://catalog.hathitrust.org/Record/100951925">Das Museum (11 volume series, see Hathi catalog listing for other volumes</a></li>
<li><a href="https://babel.hathitrust.org/cgi/pt?id=umn.31951001591477w;view=thumb">Belgian Art in Exile</a></li>
<li><a href="https://archive.org/stream/expositiongn1907expo">Exposition Generale des Beaux-Arts Bruxelles 1907</a></li>
<li><a href="https://books.google.com/books?id=91FJAQAAMAAJ">Grützner</a></li>
</ul>
</section>
</article>
</main>
<?= Template::Footer() ?>