Custom Chapter Glyphs (png image) help!

Ecredes · 02-03-2022, 12:08 PM

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!

RbnJrg · 02-03-2022, 06:43 PM

Could you post an image of the desired output? I'm not sure if the image must be on top or on the left side of the text.

Foozle · 02-03-2022, 08:23 PM

Your best bet is to just use a normal image or SVG image tag. There is no reason to embed a background image if it's just a section separator.

Hitch · 02-07-2022, 10:13 AM

Unless you know, without a doubt, what device(s) this will be read on, generally, avoid "background-image" like the plague. Doesn't work on any number of devices.

Just place it, as Foozle says, as a regular old image.

Hitch

Quoth · 02-07-2022, 03:19 PM

I just bought a book with images for the chapter numbers and obviously for a 800 x 600 screen. Published by Pan.
The images were absolute pixels so on the 300 dpi 7" ereader it looked like 6 pt!
I deleted height and put width at 10%.

Background image doesn't work with most eink. No need for it. Seems silly to have other than a small decorative spacer that's the same in every chapter. Even then the best you can do is make it a percent of screen width. It will look too big or too small if someone likes tiny body font or needs a big one to read it.

So we only put things that MUST be images, and at % width and on their own paragraph, because that works best.

ebooks are primarily about reading the content, not simulating paper publications, PDFs do that and they are not real ebooks. An ebook needs to work from 3" to 14" screens and 120 dpi to 300 dpi and monochrome, at most 14 shades grey, black and white. Though really old eink have only black, two greys and greyish white.

JSWolf · 02-07-2022, 05:40 PM

Quote:

Originally Posted by Hitch

Unless you know, without a doubt, what device(s) this will be read on, generally, avoid "background-image" like the plague. Doesn't work on any number of devices.

Just place it, as Foozle says, as a regular old image.

Hitch

And avoid images in the CSS.

02-03-2022, 12:08 PM	#1
Ecredes Junior Member Posts: 1 Karma: 10 Join Date: Feb 2022 Device: none	Custom Chapter Glyphs (png image) help! 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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
glib.GError: Image tpye 'png' is not supported	maggch	Kindle Developer's Corner	1	01-03-2017 09:53 AM
svg image on top of a background png image	roger64	ePub	25	04-24-2015 12:00 PM
Display of a png image linked to a svg image	roger64	Editor	6	03-13-2015 07:21 AM
Custom Font -- Where to Map Glyphs, How to Display Characters?	GrannyGrump	ePub	3	03-03-2014 07:17 AM
hotlinking png image	bobcdy	Sigil	21	09-21-2010 05:56 AM

02-03-2022, 06:43 PM	#2
RbnJrg Wizard Posts: 1,610 Karma: 8399999 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Could you post an image of the desired output? I'm not sure if the image must be on top or on the left side of the text.

02-03-2022, 08:23 PM	#3
Foozle Connoisseur Posts: 61 Karma: 221034 Join Date: May 2021 Device: None	Your best bet is to just use a normal image or SVG image tag. There is no reason to embed a background image if it's just a section separator.

02-07-2022, 10:13 AM	#4
Hitch Bookmaker & Cat Slave Posts: 11,495 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	Unless you know, without a doubt, what device(s) this will be read on, generally, avoid "background-image" like the plague. Doesn't work on any number of devices. Just place it, as Foozle says, as a regular old image. Hitch

02-07-2022, 03:19 PM	#5
Quoth the rook, bossing Never. Posts: 12,356 Karma: 92073397 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	I just bought a book with images for the chapter numbers and obviously for a 800 x 600 screen. Published by Pan. The images were absolute pixels so on the 300 dpi 7" ereader it looked like 6 pt! I deleted height and put width at 10%. Background image doesn't work with most eink. No need for it. Seems silly to have other than a small decorative spacer that's the same in every chapter. Even then the best you can do is make it a percent of screen width. It will look too big or too small if someone likes tiny body font or needs a big one to read it. So we only put things that MUST be images, and at % width and on their own paragraph, because that works best. ebooks are primarily about reading the content, not simulating paper publications, PDFs do that and they are not real ebooks. An ebook needs to work from 3" to 14" screens and 120 dpi to 300 dpi and monochrome, at most 14 shades grey, black and white. Though really old eink have only black, two greys and greyish white.