Mobileread
Background color in a epub list
#1  RSoldin 10-27-2020, 01: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
Reply 

#2  phillipgessert 10-27-2020, 02: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.
Reply 

#3  JSWolf 10-27-2020, 06: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.
Reply 

#4  Turtle91 10-27-2020, 08: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.
Reply 

#5  Quoth 10-28-2020, 08:56 AM
Quote 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
Reply 

#6  DiapDealer 10-28-2020, 03: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).
Reply 

#7  DiapDealer 10-28-2020, 03:58 PM
Quote 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.
Reply 

#8  hobnail 10-28-2020, 04: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.
Reply 

#9  JSWolf 10-28-2020, 06:01 PM
Quote 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.
Reply 

#10  Quoth 10-29-2020, 10: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.
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register