capytal/comicverse
1
0
Fork 0
Code Issues Pull Requests Activity

feat(ipub): change all section images to ipub-images

Browse Source
This commit is contained in:
Guz
2025-10-22 16:18:18 -03:00
parent d775301567
commit b52e7f165f
2 changed files with 20 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
.epub/example/OEBPS/sections/section0001.xhtml
View File

@@ -25,59 +25,34 @@
rel="external nofollow noopener noreferrer" target="_blank" />
</ipub-interaction>
</ipub-image>
<section data-ipub-element="page" id="page02">
<span data-ipub-element="image">
<img src="../images/image0002.png" />
</span>
<!--
This in the UI would be an "Area Interaction". The editor would first place
the first top-left point, and then the bottom-right one, to select an area/size
of the interaction.
The element wound not have a "action" per say, but would have a "on screen" trigger,
which in itself would have the action "play sound".
-->
<audio data-ipub-element="interaction" data-ipub-trigger="on-screen" controls="true"
volume="0" style="--ipub-x: 20%; --ipub-y: 25%; --ipub-width: 50%; --ipub-height: 50%;"
id="int-audio0001">
<source src="../audios/audio0001.wav.disable" />
</audio>
</section>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<ipub-background id="background0002">
<picture>
<img src="../images/background0002.jpg" />
</picture>
</ipub-background>
<section data-ipub-element="page" id="page03">
<span data-ipub-element="image">
<img src="../images/image0003.png" />
</span>
</section>
<section data-ipub-element="page" id="page04">
<span data-ipub-element="image">
<img src="../images/image0004.png" />
</span>
</section>
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image>
<ipub-background id="background0003">
<picture>
<img src="../images/background0003.jpg" />
</picture>
</ipub-background>
<section data-ipub-element="page" id="page02">
<span data-ipub-element="image">
<img src="../images/image0002.png" />
</span>
</section>
<section data-ipub-element="page" id="page04">
<span data-ipub-element="image">
<img src="../images/image0003.png" />
</span>
</section>
<section data-ipub-element="page" id="page04">
<span data-ipub-element="image">
<img src="../images/image0004.png" />
</span>
</section>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image>
</main>
</ipub-content>
</body>

44
.epub/example/OEBPS/styles/stylesheet.css
View File

@@ -98,13 +98,14 @@ ipub-background {
ipub-image {
position: relative;
display: block;
display: inline-block;
flex-direction: column;
width: var(--ipub-width, unset);
height: var(--ipub-height, unset);
img {
display: block;
max-width: 100%;
max-height: 100%;
}
@@ -146,44 +147,3 @@ ipub-interaction {
--ipub-radius: 100%;
}
}
[data-ipub-element="image"] {
width: var(--ipub-width, unset);
height: var(--ipub-height, unset);
background-image: var(--ipub-image, unset);
background-repeat: no-repeat;
background-size: cover;
display: block;
img {
max-width: 100%;
max-height: 100%;
}
}
[data-ipub-element="interaction"] {
position: absolute;
left: var(--ipub-x, 0%);
top: var(--ipub-y, 0%);
border-radius: var(--ipub-radius, unset);
width: var(--ipub-width, unset);
height: var(--ipub-height, unset);
transform: translate(
var(--ipub-origin-offset-x, 0%),
var(--ipub-origin-offset-y, 0%)
);
aspect-ratio: var(--ipub-ratio, unset);
/*
* The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
* showing of the example ebook
*/
background-color: red;
opacity: 0.3;
}
a[data-ipub-element="interaction"] {
/* The text inside the interaction anchor are for accessibility purposes */
font-size: 0px;
}
}