Background color in a epub list

RSoldin · 10-27-2020, 12:14 PM

I am trying to set the background color to bullet and number lists. I am not sure what to actually search for, try many different strings with no success, so I thought maybe someone here can give me a jolt.

When setting the background color for normal text in an epub it's easy to control with padding and margin settings. When setting the background for an 'ol' or 'ul' list they have this boxed area. you can set the list inside or outside but either way still leaves an indent on the left. When you add a background color to the css it begins the color on the edge of that list box.

Is there some way to allow the background to be flush left to the page, not the edge of the list area? Does the whole list need to be in a div?

Thanks

phillipgessert · 10-27-2020, 01:49 PM

You are saying that you can't achieve that via padding/margin? I would have thought setting l/r margins to 0 and adding some padding value would do what you're shooting for. If not (maybe lists have some quirks I'm forgetting), then maybe you could fake it with a thick border. That said I personally wouldn't do this as I'd worry about night modes and e-ink.

JSWolf · 10-27-2020, 05:22 PM

@RSoldin, If you are doing this for an eBook to be sold, don't do it. It will not look good on eInk. Plus, readers may find it annoying even on LCD (such as a phone or tablet). a Background color can decrease the contrast. Sure you can increase the contrast on an LCD screen, but then go to eInk and you then have spoiled the contrast.

Turtle91 · 10-27-2020, 07:45 PM

I would mostly agree with Jon here...background colors are hard to make look good on all devices...especially grey scaled eink devices.

If you MUST use color, because it helps to tell the story, or somesuch, then I would limit it to the font-color...that's a little easier to deal with across devices.

Quoth · 10-28-2020, 07:56 AM

Quote:

Originally Posted by JSWolf

@RSoldin, If you are doing this …. don't do it. It will not look good on eInk. Plus, readers may find it annoying even on LCD (such as a phone or tablet). a Background color can decrease the contrast.

Indeed it looks like garbage on everything.
See also https://www.mobileread.com/forums/sh...5&postcount=27

DiapDealer · 10-28-2020, 02:24 PM

It's quite fine to offer explanations on why doing what a poster asked for help doing is probably not a good idea. But it's also quite fine (and some might even say it would be "polite") to actually answer the questions asked. And to provide concrete examples of how to accomplish what they asked for help with (or to indicate whether or not it's even possible).

DiapDealer · 10-28-2020, 02:58 PM

Quote:

Originally Posted by RSoldin

Is there some way to allow the background to be flush left to the page, not the edge of the list area? Does the whole list need to be in a div?

Assigning the background color (via css) to the ol/ul element and not the li elements makes the background color start flush left for me. Of course that probably won't help if you want individual li elements to be different colors.

hobnail · 10-28-2020, 03:37 PM

As others have pointed out, setting a background color has drawbacks. Maybe just a 1 pixel border around the element might be sufficient, although I think it would look overly busy.

JSWolf · 10-28-2020, 05:01 PM

Quote:

Originally Posted by hobnail

As others have pointed out, setting a background color has drawbacks. Maybe just a 1 pixel border around the element might be sufficient, although I think it would look overly busy.

I've used a 1px line for a section break and on a hi-res eInk screen, it's too thin. Try a 3px line and see how that goes. The problem could be that the3px line could be too thick in some cases, but it will work on a hi-res eInk screen. There's going to have to be some trade offs due to LCD and eInk being so different.

Quoth · 10-29-2020, 09:13 AM

The box style can be added to a paragraph style in LO Writer and works even without Aa Publisher mode on a Kindle Keyboard, PW3, Kobo, Sony etc. But not on a Kindle DXG.
The margins to box are whatever the paragraph margins are, and then the internal padding works. 1 pixel seems OK at 300 dpi.

I agree that maybe more than 1 px might be better for a single horizontal line at 300 dpi, but 2 pixels might be OK.

I test on a wide variety of eink readers as well as LCD stuff with a variety of Apps. Also preview in Calibre Viewer.

JSWolf · 10-29-2020, 09:16 AM

Quote:

Originally Posted by Quoth

The box style can be added to a paragraph style in LO Writer and works even without Aa Publisher mode on a Kindle Keyboard, PW3, Kobo, Sony etc. But not on a Kindle DXG.
The margins to box are whatever the paragraph margins are, and then the internal padding works. 1 pixel seems OK at 300 dpi.

I agree that maybe more than 1 px might be better for a single horizontal line at 300 dpi, but 2 pixels might be OK.

I test on a wide variety of eink readers as well as LCD stuff with a variety of Apps. Also preview in Calibre Viewer.

1px is not OK at300DPI on eInk. 1px is too thin. 2px may work. But if not, 3px will work.

Jellby · 10-29-2020, 01:52 PM

Quote:

Originally Posted by JSWolf

1px is not OK at300DPI on eInk. 1px is too thin. 2px may work. But if not, 3px will work.

It is OK or not regardless of the resolution, because px is an absolute unit that's not resolution dependent. If it changes with resolution, the device is broken.

But if you want a line that's say, 0.5mm thick, why not specify 0.5mm and forget about px and resolution?

JSWolf · 10-29-2020, 05:23 PM

Quote:

Originally Posted by Jellby

It is OK or not regardless of the resolution, because px is an absolute unit that's not resolution dependent. If it changes with resolution, the device is broken.

But if you want a line that's say, 0.5mm thick, why not specify 0.5mm and forget about px and resolution?

Sorry, but there you are wrong about px. I've done the 1px and it's no good on a 00DPI eInk screen. A 1px line will be much thinner on the 300DPI screen then the same line on an 800x600 screen.

However, the 0.5mm idea is a good idea.

Jellby · 10-30-2020, 04:05 AM

Quote:

Originally Posted by JSWolf

I've done the 1px and it's no good on a 00DPI eInk screen. A 1px line will be much thinner on the 300DPI screen then the same line on an 800x600 screen.

Then it's the device that's not following the specs (or you're not using it at its intended viewing distance, whatever that is).

According to the CSS specs (https://www.w3.org/TR/css-values-3/#absolute-lengths):

Code:

px 	pixels 	1px = 1/96th of 1in

RSoldin · 10-30-2020, 07:16 AM

Sorry for the late feedback on my issue. I am taking everyone's advice on not adding a background. There are too many devices out there to be sure something like this will view properly. I will go with adding a horizontal line break between the significant areas of the text.

I appreciate all the feedback and I see as always a question can start a discussion about another area of the aspect. Very interesting.

Thank you

10-27-2020, 12:14 PM	#1
RSoldin Junior Member Posts: 7 Karma: 10 Join Date: Oct 2011 Device: none	Background color in a epub list I am trying to set the background color to bullet and number lists. I am not sure what to actually search for, try many different strings with no success, so I thought maybe someone here can give me a jolt. When setting the background color for normal text in an epub it's easy to control with padding and margin settings. When setting the background for an 'ol' or 'ul' list they have this boxed area. you can set the list inside or outside but either way still leaves an indent on the left. When you add a background color to the css it begins the color on the edge of that list box. Is there some way to allow the background to be flush left to the page, not the edge of the list area? Does the whole list need to be in a div? Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
epub popup footnote background color	increase	ePub	11	02-16-2020 06:31 PM
EPUB->PDF: background-color	mmat1	Conversion	5	02-06-2019 09:19 PM
How to css change background color of an epub?	alegriadelarte	Editor	1	05-15-2018 03:37 PM
Book list background color	emfril	Calibre	7	07-24-2016 07:44 PM
Sidebar background color in ePub	AshleyLynn	ePub	7	05-02-2013 08:57 AM

10-27-2020, 01:49 PM	#2
phillipgessert Addict Posts: 311 Karma: 3196258 Join Date: Oct 2015 Location: Madison, WI Device: Kindle 5th Gen	You are saying that you can't achieve that via padding/margin? I would have thought setting l/r margins to 0 and adding some padding value would do what you're shooting for. If not (maybe lists have some quirks I'm forgetting), then maybe you could fake it with a thick border. That said I personally wouldn't do this as I'd worry about night modes and e-ink.

10-27-2020, 05:22 PM	#3
JSWolf Resident Curmudgeon Posts: 73,987 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	@RSoldin, If you are doing this for an eBook to be sold, don't do it. It will not look good on eInk. Plus, readers may find it annoying even on LCD (such as a phone or tablet). a Background color can decrease the contrast. Sure you can increase the contrast on an LCD screen, but then go to eInk and you then have spoiled the contrast.

10-27-2020, 07:45 PM	#4
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I would mostly agree with Jon here...background colors are hard to make look good on all devices...especially grey scaled eink devices. If you MUST use color, because it helps to tell the story, or somesuch, then I would limit it to the font-color...that's a little easier to deal with across devices.

10-28-2020, 02:24 PM	#6
DiapDealer Grand Sorcerer Posts: 27,551 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	It's quite fine to offer explanations on why doing what a poster asked for help doing is probably not a good idea. But it's also quite fine (and some might even say it would be "polite") to actually answer the questions asked. And to provide concrete examples of how to accomplish what they asked for help with (or to indicate whether or not it's even possible).

10-28-2020, 03:37 PM	#8
hobnail Running with scissors Posts: 1,552 Karma: 14325282 Join Date: Nov 2019 Device: none	As others have pointed out, setting a background color has drawbacks. Maybe just a 1 pixel border around the element might be sufficient, although I think it would look overly busy.

10-29-2020, 09:13 AM	#10
Quoth the rook, bossing Never. Posts: 11,161 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	The box style can be added to a paragraph style in LO Writer and works even without Aa Publisher mode on a Kindle Keyboard, PW3, Kobo, Sony etc. But not on a Kindle DXG. The margins to box are whatever the paragraph margins are, and then the internal padding works. 1 pixel seems OK at 300 dpi. I agree that maybe more than 1 px might be better for a single horizontal line at 300 dpi, but 2 pixels might be OK. I test on a wide variety of eink readers as well as LCD stuff with a variety of Apps. Also preview in Calibre Viewer.

10-30-2020, 07:16 AM	#15
RSoldin Junior Member Posts: 7 Karma: 10 Join Date: Oct 2011 Device: none	Sorry for the late feedback on my issue. I am taking everyone's advice on not adding a background. There are too many devices out there to be sure something like this will view properly. I will go with adding a horizontal line break between the significant areas of the text. I appreciate all the feedback and I see as always a question can start a discussion about another area of the aspect. Very interesting. Thank you

Advert

Advert