1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="generator" content="Docutils 0.20b.dev: https://docutils.sourceforge.io/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Additional tests with HTML 5</title>
<link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
<link rel="stylesheet" href="../input/data/responsive.css" type="text/css" />
<link rel="stylesheet" href="../input/data/math.css" type="text/css" />
</head>
<body class="with-toc">
<main id="additional-tests-with-html-5">
<h1 class="title">Additional tests with HTML 5</h1>
<nav class="contents" id="contents" role="doc-toc">
<p class="topic-title">Contents</p>
<ul class="simple">
<li><p><a class="reference internal" href="#section-heading-levels" id="toc-entry-1">Section heading levels</a></p></li>
<li><p><a class="reference internal" href="#level-1" id="toc-entry-2">Level 1</a></p>
<ul>
<li><p><a class="reference internal" href="#level-2" id="toc-entry-3">Level 2</a></p>
<ul>
<li><p><a class="reference internal" href="#level-3" id="toc-entry-4">Level 3</a></p>
<ul>
<li><p><a class="reference internal" href="#level-4" id="toc-entry-5">level 4</a></p>
<ul>
<li><p><a class="reference internal" href="#level-5" id="toc-entry-6">level 5</a></p>
<ul>
<li><p><a class="reference internal" href="#level-6" id="toc-entry-7">level 6</a></p>
<ul>
<li><p><a class="reference internal" href="#level-7" id="toc-entry-8">level 7</a></p>
<ul>
<li><p><a class="reference internal" href="#level-8" id="toc-entry-9">level 8</a></p></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><a class="reference internal" href="#section-titles-with-inline-markup" id="toc-entry-10">Section titles with inline markup</a></p>
<ul>
<li><p><a class="reference internal" href="#emphasized-h2o-x-2-and-references" id="toc-entry-11"><em>emphasized</em>, H<sub>2</sub>O, <span class="formula"><i>x</i><sup>2</sup></span>, and references</a></p></li>
<li><p><a class="reference internal" href="#substitutions-fail" id="toc-entry-12">Substitutions work</a></p></li>
</ul>
</li>
<li><p><a class="reference internal" href="#embedded-images" id="toc-entry-13">Embedded Images</a></p></li>
<li><p><a class="reference internal" href="#moving-images-video" id="toc-entry-14">Moving images (video)</a></p></li>
</ul>
</nav>
<section id="section-heading-levels">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Section heading levels</a><a class="self-link" title="link to this section" href="#section-heading-levels"></a></h2>
</section>
<section id="level-1">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Level 1</a><a class="self-link" title="link to this section" href="#level-1"></a></h2>
<p>Nested sections</p>
<section id="level-2">
<h3><a class="toc-backref" href="#contents" role="doc-backlink">Level 2</a><a class="self-link" title="link to this section" href="#level-2"></a></h3>
<p>reach at some level</p>
<section id="level-3">
<h4><a class="toc-backref" href="#contents" role="doc-backlink">Level 3</a><a class="self-link" title="link to this section" href="#level-3"></a></h4>
<p>(depending on the document class and output format)</p>
<section id="level-4">
<h5><a class="toc-backref" href="#contents" role="doc-backlink">level 4</a><a class="self-link" title="link to this section" href="#level-4"></a></h5>
<p>a level</p>
<section id="level-5">
<h6><a class="toc-backref" href="#contents" role="doc-backlink">level 5</a><a class="self-link" title="link to this section" href="#level-5"></a></h6>
<p>that is not supported by the output format.</p>
<section id="level-6">
<h6 aria-level="7"><a class="toc-backref" href="#contents" role="doc-backlink">level 6</a><a class="self-link" title="link to this section" href="#level-6"></a></h6>
<p>Unsupported in LaTeX and HTML5
(HTML5 reserves the 1st level for the document title).</p>
<section id="level-7">
<h6 aria-level="8"><a class="toc-backref" href="#contents" role="doc-backlink">level 7</a><a class="self-link" title="link to this section" href="#level-7"></a></h6>
<p>Unsupported in HTML4.</p>
<section id="level-8">
<h6 aria-level="9"><a class="toc-backref" href="#contents" role="doc-backlink">level 8</a><a class="self-link" title="link to this section" href="#level-8"></a></h6>
<p>Unsupported in ODT.</p>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section id="section-titles-with-inline-markup">
<span id="references"></span><h2><a class="toc-backref" href="#contents" role="doc-backlink">Section titles with inline markup</a><a class="self-link" title="link to this section" href="#section-titles-with-inline-markup"></a></h2>
<section id="emphasized-h2o-x-2-and-references">
<h3><em>emphasized</em>, H<sub>2</sub>O, <span class="formula"><i>x</i><sup>2</sup></span>, and <a class="reference internal" href="#references">references</a><a class="self-link" title="link to this section" href="#emphasized-h2o-x-2-and-references"></a></h3>
</section>
<section id="substitutions-fail">
<h3><a class="toc-backref" href="#contents" role="doc-backlink">Substitutions work</a><a class="self-link" title="link to this section" href="#substitutions-fail"></a></h3>
<p>Note, that the “reference name” for this section is derived from the
content <em>before</em> substitution. This may be exploited to get intelligible
IDs after <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/directives.html#identifier-normalization">identifier normalization</a> of the section’s reference name.</p>
</section>
</section>
<section id="embedded-images">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Embedded Images</a><a class="self-link" title="link to this section" href="#embedded-images"></a></h2>
<p>The “embed” flag tells Docutils that it should
try to embed the image in the output document.</p>
<p>If the image can be read from the local file system, it is <a class="reference external" href="https://en.wikipedia.org/wiki/Base64">base64</a>
encoded and included as a <a class="reference external" href="https://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a>.
In future, SVG images may be directly inserted into HTML5.</p>
<figure class="align-center">
<img alt="biohazard" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" />
<figcaption>
<p>Embedded image in a figure.</p>
</figcaption>
</figure>
<p>Embedded inline image <img alt="inline-embedded" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" style="height: 0.8em;" /> scaled to a height of 0.8 em.</p>
</section>
<section id="moving-images-video">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Moving images (video)</a><a class="self-link" title="link to this section" href="#moving-images-video"></a></h2>
<p>If the URL given to <cite>images and figures</cite> hints to a video format
supported by HTML 5 (MIME types ‘video/mp4’, ‘video/webm’, or
‘video/ogg’), the HTML5 writer will place it in a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">video element</a>.</p>
<video class="align-left" src="../../../docs/user/rst/images/pens.mp4" title="left-aligned test video">
<a href="../../../docs/user/rst/images/pens.mp4">left-aligned test video</a>
</video>
<p>A class option value “controls” tells the browser to display controls
for video playback.</p>
<p>It is a good idea to include width and height attributes. If
height and width are not set, the page might flicker while the video
loads. According to the <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">HTML5 spec</a>, hight and width must be
specified as pixel values.</p>
<figure class="align-center">
<video controls="controls" src="../../../docs/user/rst/images/pens.mp4" title="test video in a figure" width="200">
<a href="../../../docs/user/rst/images/pens.mp4">test video in a figure</a>
</video>
<figcaption>
<p>Simple test video in a centered figure</p>
</figcaption>
</figure>
<p>A video like this <video src="../../../docs/user/rst/images/pens.mp4" title="rotating pens video" width="60"><a href="../../../docs/user/rst/images/pens.mp4">rotating pens video</a></video> can be included inline via substitution.</p>
</section>
</main>
</body>
</html>
|
