Hey all, I'm working on an epub design project with some custom chapter heading and chapter break glyphs, just a small png image.
I'm having an issue where these glyphs appear in
some e-readers but not others, I suspect it has to do with embedding background images withing certain html5 tags. I've tried reading the book on 4 different reading apps on windows/android and the glyphs show up 50% of the time.
This issue also affects a custom image for a contextual chapter break 'dingbat' style image. In this case I'm embedding a background image within a <hr class="ding"> tag with very similar css code as below.
Included is my html code, and the related css tag code for review.
What's the most compatible way to code these types of chapter glyphs? Should i just break these out as <img> tags instead of embedding an image into a <span> or <hr> tag?
Code:
<body>
<h1 class="chapter"><span class="chapter_ding"></span>Chapter 1</h1>
<p>This is a story.</p>
<hr class="break_ding"/>
<p>More story.</p>
Code:
.chapter_ding {
background-image: url(../images/lrw_symbol.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 2em;
margin: 1em;
border: currentColor none medium;
}
Thanks for the help!