Skip to content

Support for <img> in SMIL #2919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
HadrienGardeur wants to merge 2 commits into
base: main
Choose a base branch
from
+113 −2
Draft

Support for <img> in SMIL #2919

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c6b6a9
First draft for <img> in SMIL
HadrienGardeur Feb 5, 2026
0cc7491
Added img to the par content model
HadrienGardeur Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions epub34/authoring/biblio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ var biblio = {
"href": "http://standards.iso.org/ittf/PubliclyAvailableStandards/c040833_ISO_IEC_19757-3_2006(E).zip",
"date": "2006-06-01"
},
"media-frags": {
"title": "Media Fragments URI 1.0 (basic)",
"href": "https://www.w3.org/TR/media-frags/",
"date": "2012-09-25"
},
"nvdl": {
"title": "ISO/IEC 19757-4: NVDL (Namespace-based Validation Dispatching Language)",
"href": "http://standards.iso.org/ittf/PubliclyAvailableStandards/c038615_ISO_IEC_19757-4_2006(E).zip",
Expand Down
106 changes: 104 additions & 2 deletions epub34/authoring/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8481,6 +8481,58 @@ <h6>The <code>audio</code> element</h6>
</dd>
</dl>
</section>

<section id="sec-smil-img-elem">
<h6>The <code>img</code> element</h6>

<p>The <code>image</code> element references an image listed as a [=core media type resource=].</p>

<dl class="elemdef" id="elemdef-smil-img">
<dt>Element Name:</dt>
<dd>
<p>
<dfn class="export" data-lt-no-plural="" data-dfn-type="element">
<code>img</code>
</dfn>
</p>
</dd>

<dt>Usage:</dt>
<dd>
<p>An OPTIONAL child of the [^par^] element.</p>
</dd>

<dt>Attributes:</dt>
<dd>
<dl>
<dt>
<code>src</code>
<code>[required]</code>
</dt>
<dd>
<p>Refers to the associated [=core media type resource=] and, optionally,
identifies a specific part of it.</p>
<p>The value MUST be a [=path-relative-scheme-less-URL string=], optionally
followed by <code>U+0023&#160;(#)</code> and a spatial dimension fragment from [[media-frags]].</p>
</dd>

<dt>
<code>id</code>
<code>[optional]</code>
</dt>
<dd>
<p>The <a data-cite="xml#id">ID</a> [[xml]] of the element, which MUST be
unique within the document scope.</p>
</dd>
</dl>
</dd>

<dt>Content Model:</dt>
<dd>
<p>Empty</p>
</dd>
</dl>
</section>
</section>
</section>

Expand Down Expand Up @@ -8600,8 +8652,8 @@ <h6>Overlay structure</h6>

<p>The <code>par</code> element represents a segment of content, such as a word, phrase,
sentence, table cell, list item, image, or other identifiable piece of content in the
markup. Each element identifies both the content to display (in the [^text^] element)
and audio to synchronize (in the [^audio^] element) during playback.</p>
markup. Each element identifies both the content to display (in the [^text^] element or
[^img^] element) and audio to synchronize (in the [^audio^] element) during playback.</p>

<p>The <code>seq</code> element represents sequences — sets of <code>seq</code> and/or
<code>par</code> elements that together represent a logical component of the
Expand Down Expand Up @@ -8780,6 +8832,10 @@ <h6>Referencing document fragments</h6>
href="https://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers">SVG Fragment
Identifier</a> [[svg]], respectively.</p>

<p>In addition the [^img^] element's <code>src</code> attribute can contain a spatial dimension
fragment from [[media-frags]] that references a specific part of the associated
[=core media type resource=].</p>

<p>Other fragment identifier schemes MAY be used but [=reading systems=] might not support
such identifiers.</p>
</section>
Expand Down Expand Up @@ -8873,6 +8929,50 @@ <h5>Structural semantics in overlays</h5>
&lt;/par&gt;
&lt;/seq&gt;
&lt;/body&gt;
&lt;/smil&gt;</pre>
</aside>

<aside class="example" title="Semantic markup for comics with panels and balloons">
<pre>&lt;smil
xmlns="http://www.w3.org/ns/SMIL"
xmlns:epub="http://www.idpf.org/2007/ops"
version="3.0"&gt;
&lt;body&gt;
&lt;seq id="id1" epub:textref="page1.xhtml#image" epub:type="page"&gt;
&lt;par id="id2" epub:type="panel"&gt;
&lt;img
src="page1.jpg#xywh=76,19,814,635"/&gt;
&lt;text
src="script.html#page1-panel1-description"/&gt;
&lt;audio
src="page1_audio.mp3"
clipBegin="0:00:00.000"
clipEnd="0:00:10.123"/&gt;
&lt;/par&gt;
&lt;seq id="id3" epub:type="panel"&gt;&gt;
&lt;par id="id4"&gt;
&lt;img
src="page1.jpg#xywh=356,695,584,296"/&gt;
&lt;text
src="script.html#page1-panel2-description"/&gt;
&lt;audio
src="page1_audio.mp3"
clipBegin="0:00:10.123"
clipEnd="0:00:28.530"/&gt;
&lt;/par&gt;
&lt;par id="id5" epub:type="balloon"&gt;
&lt;img
src="page1.jpg#xywh=406,695,200,50"/&gt;
&lt;text
src="script.html#page1-panel2-balloon"/&gt;
&lt;audio
src="page1_audio.mp3"
clipBegin="0:00:28.530"
clipEnd="0:00:37.920"/&gt;
&lt;/par&gt;
&lt;/seq&gt;
&lt;/seq&gt;
&lt;/body&gt;
&lt;/smil&gt;</pre>
</aside>
</section>
Expand Down Expand Up @@ -11251,6 +11351,8 @@ <h2>Change log</h2>
<details id="changes-epub-33" open="open">
<summary>Substantive changes since <a href="https://www.w3.org/TR/epub-33/">EPUB 3.3</a></summary>
<ul>
<li>05-February-2026: Added support for <code>&lt;img&gt;</code> in Media Overlays. See <a
href="https://github.com/w3c/epub-specs/issues/2883">issue 2883</a>.</li>
<li>23-January-2026: Added JPEG XL as a core media type for images. See <a
href="https://github.com/w3c/epub-specs/issues/2896">issue 2896</a>.</li>
<li>18-Dec-2025: Renamed "obsolete but conforming features" to "outdated features". As discussed in
Expand Down