Styling lists

democrite · 01-15-2013, 05:36 PM

Hey guys,

Anyone know if there's a way to change lists to remove the period or change it to something else? So instead of A., B., C., I'd like it to be A), B), C) or 1), 2) 3). I found some css examples but couldn't get any of them to work.

DiapDealer · 01-15-2013, 06:11 PM

Don't try to do anything other than a simple bulleted list or a simple numbered list in an ebook. And even then ... consider not using a list element at all. It doesn't require ol or ul to display numbers/bullets/letters/etc next to text indented to various levels. Even if you get the complex list/outline looking the way you like it, it will likely only display properly on the one device/app you tested it on. It will make you cry when you see it on another device.

Jellby · 01-16-2013, 06:20 AM

Lists are the way to disaster. I agree with DiapDealer, avoid them while you can.

DSpider · 01-16-2013, 09:40 AM

Bull. Anything can be done with CSS, even if they end up as paragraphs that start with 1), 2), 3), etc. Of course, you would have to actually type the numbers/letters yourself... But if it looks like a list, nobody will care if it has or doesn't have <ol> or <ul> tags - except maybe the extremely geeky people, people that study the ePub or try to convert it. But that's not your target audience. Don't worry about them. As long as it looks fine in ADE and iBooks, everything should be all right.

theducks · 01-16-2013, 10:02 AM

Quote:

Originally Posted by DSpider

Bull. Anything can be done with CSS, even if they end up as paragraphs that start with 1), 2), 3), etc. Of course, you would have to actually type the numbers/letters yourself... But if it looks like a list, nobody will care if it has or doesn't have <ol> or <ul> tags - except maybe the extremely geeky people, people that study the ePub or try to convert it. But that's not your target audience. Don't worry about them. As long as it looks fine in ADE and iBooks, everything should be all right.

The problem IS NOT the CSS,

It is the implementation in EPUB viewers.
Lists that look great on the desktop, are a disaster on my hand held.

So go ahead and code your Lists using CSS, as long as you only want to view it on a desktop.

DiapDealer · 01-16-2013, 10:18 AM

Quote:

Originally Posted by DSpider

Bull. Anything can be done with CSS, even if they end up as paragraphs that start with 1), 2), 3), etc. Of course, you would have to actually type the numbers/letters yourself... But if it looks like a list, nobody will care if it has or doesn't have or tags - except maybe the extremely geeky people, people that study the ePub or try to convert it. But that's not your target audience. Don't worry about them. As long as it looks fine in ADE and iBooks, everything should be all right.

I think you might be agreeing with me. Lists themselves are not the devil. Trying to create lists using ol and ul that look the same on even the major devices/apps is where the trouble starts.

I fully support your suggestion that paragraphs starting with 1), 2), 3) can be used just as effectively. Did I not say that clearly enough?

Jellby · 01-16-2013, 12:07 PM

Quote:

Originally Posted by theducks

The problem IS NOT the CSS

The problem is partly the CSS. The CSS 2.1 subset included in the ePub spec (even if it were fully supported by readers) does not offer enough tools to completely control the appearance of lists created through <ol>, <ul> and <dl>.

graycyn · 01-16-2013, 02:36 PM

Hi, I'm beginning to believe that lists are not the way to go for my internal TOC pages, because after testing in some apps, I found that while the list items work in an ordered list, the chapter numbers that should be generated don't always! Sometimes just bullets display, even with the <ol> tag being used. Or if they are generated, sometimes the first digit is cut off.

But I need some help figuring out how to do the same thing lists do with paragraphs.

So how do you get decimal numbers to line up neatly? (I'm making up chapter titles below.)

1. She Looked Back
2. She Looked Forward
3. Her Dog Ate Her Homework
.
.
9. Beowulf Comes Alive
10. This Is Where I Need Help?

What I want to happen, is for the decimals to line up.

I can make it do it with an    before the single digit numerals, but is that the best way? And what about when you get into old style Roman numerals, like IX. X. XII. and the like, where you may be dealing with more than just two digits? More non-breaking spaces? Looks hideous in the code!

Further, with an ordered list, when the font size gets large, the title breaks up in a way that it lines up neatly under the TEXT and not under the chapter numbers. How do I make that happen with paragraphs?

And lastly, I've noticed that various Android reader apps don't necessarily render paragraphs as styled EITHER, so doesn't a list made with paragraphs also have a chance of not displaying as styled as well?

Trying to learn, because I want what epubs I make to look nice on as many reading systems as possible.

mrmikel · 01-16-2013, 02:48 PM

You can assign a margin to your index paragraph styling and in that styling, say no indent.

If you must line them up, you can use a table and right align them in a cell. But tables are not always handled well either.

democrite · 01-16-2013, 03:59 PM

Thanks everyone for the ideas. Seems yes lists are not the way to go. Do you guys think a table is likely the best or only alternative (to get decimals or another separator to align as graycyn would like?) The only other thing I can think of is a definition list though that also has issues with ADE.

graycyn · 01-16-2013, 09:49 PM

Quote:

Originally Posted by mrmikel

You can assign a margin to your index paragraph styling and in that styling, say no indent.

If you must line them up, you can use a table and right align them in a cell. But tables are not always handled well either.

I'm thinking just using a simple list is a better idea than using a table. Lists, while even the simple basic <ol> or <ul> may not look ideal in some reader apps, they do at least work for the most part. In an app that won't show the numbers and makes an <ol> look like a <ul>, the list items do appear in order and work fine. Tables seem iffier, especially with a long table of contents, or one where the chapter titles are on the long side. That could get really ugly at larger font sizes.

I wouldn't bother with an internal TOC list at all, except it seems to be needful for the Kindle conversion navigation.

I guess I'll do some testing, see which looks the least worst to me.

Jellby · 01-17-2013, 04:06 AM

I wouldn't use a list. Not only for the already known styling problems, but because the chapter numbering is probably fixed: If chapter 2 is " She Looked Forward", you wouldn't want it to appear as chapter 3 in the TOC because you accidentally changed, or because the renderer fails in generating the correct numbers. Bottom line: do not rely on generated content.

You can use table styling without table coding. Use your normal provision of <p>, <div>, <span> with classes, and give them "display: table-row", "display: table-cell", etc. in CSS. It might work...

graycyn · 01-17-2013, 02:03 PM

Thanks, I may try that. This learning to make epubs is sure an adventure! I'm not much for computer or video game puzzles, but this sort of thing I like. I may still be doing stuff wrong, I'm sure my CSS isn't the most elegant or efficient, but with the exception of the lists thing, stuff appears to be working well.

I learn a lot from folks here, so thanks!

01-15-2013, 05:36 PM	#1
democrite Evangelist Posts: 425 Karma: 77256 Join Date: Sep 2011 Device: none	Styling lists Hey guys, Anyone know if there's a way to change lists to remove the period or change it to something else? So instead of A., B., C., I'd like it to be A), B), C) or 1), 2) 3). I found some css examples but couldn't get any of them to work.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Consistent styling of LI tags in ePubs	Agama	Conversion	7	10-01-2011 11:45 AM
CSS Styling not showing up in digital editions	sjkramer	Sigil	9	01-30-2010 10:46 AM
Font weight and other styling with RTF for BeBook	spaze	Other formats	1	09-05-2009 03:25 PM
Accessories Kindle Cover - Styling & Functional	FrankN	Amazon Kindle	2	04-30-2008 12:36 PM

01-15-2013, 06:11 PM	#2
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Don't try to do anything other than a simple bulleted list or a simple numbered list in an ebook. And even then ... consider not using a list element at all. It doesn't require ol or ul to display numbers/bullets/letters/etc next to text indented to various levels. Even if you get the complex list/outline looking the way you like it, it will likely only display properly on the one device/app you tested it on. It will make you cry when you see it on another device.

01-16-2013, 06:20 AM	#3
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Lists are the way to disaster. I agree with DiapDealer, avoid them while you can.

01-16-2013, 09:40 AM	#4
DSpider Evangelist Posts: 450 Karma: 343115 Join Date: Nov 2009 Location: Romania Device: PW2 2014	Bull. Anything can be done with CSS, even if they end up as paragraphs that start with 1), 2), 3), etc. Of course, you would have to actually type the numbers/letters yourself... But if it looks like a list, nobody will care if it has or doesn't have <ol> or <ul> tags - except maybe the extremely geeky people, people that study the ePub or try to convert it. But that's not your target audience. Don't worry about them. As long as it looks fine in ADE and iBooks, everything should be all right.

01-16-2013, 02:36 PM	#8
graycyn Wizard Posts: 1,496 Karma: 11250344 Join Date: Aug 2010 Location: NE Oregon Device: Kobo Sage, Forma, Kindle Oasis 2, Sony PRS-T2	Hi, I'm beginning to believe that lists are not the way to go for my internal TOC pages, because after testing in some apps, I found that while the list items work in an ordered list, the chapter numbers that should be generated don't always! Sometimes just bullets display, even with the <ol> tag being used. Or if they are generated, sometimes the first digit is cut off. But I need some help figuring out how to do the same thing lists do with paragraphs. So how do you get decimal numbers to line up neatly? (I'm making up chapter titles below.) 1. She Looked Back 2. She Looked Forward 3. Her Dog Ate Her Homework . . 9. Beowulf Comes Alive 10. This Is Where I Need Help? What I want to happen, is for the decimals to line up. I can make it do it with an    before the single digit numerals, but is that the best way? And what about when you get into old style Roman numerals, like IX. X. XII. and the like, where you may be dealing with more than just two digits? More non-breaking spaces? Looks hideous in the code! Further, with an ordered list, when the font size gets large, the title breaks up in a way that it lines up neatly under the TEXT and not under the chapter numbers. How do I make that happen with paragraphs? And lastly, I've noticed that various Android reader apps don't necessarily render paragraphs as styled EITHER, so doesn't a list made with paragraphs also have a chance of not displaying as styled as well? Trying to learn, because I want what epubs I make to look nice on as many reading systems as possible.

01-16-2013, 02:48 PM	#9
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	You can assign a margin to your index paragraph styling and in that styling, say no indent. If you must line them up, you can use a table and right align them in a cell. But tables are not always handled well either.

01-16-2013, 03:59 PM	#10
democrite Evangelist Posts: 425 Karma: 77256 Join Date: Sep 2011 Device: none	Thanks everyone for the ideas. Seems yes lists are not the way to go. Do you guys think a table is likely the best or only alternative (to get decimals or another separator to align as graycyn would like?) The only other thing I can think of is a definition list though that also has issues with ADE.

01-17-2013, 04:06 AM	#12
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I wouldn't use a list. Not only for the already known styling problems, but because the chapter numbering is probably fixed: If chapter 2 is " She Looked Forward", you wouldn't want it to appear as chapter 3 in the TOC because you accidentally changed, or because the renderer fails in generating the correct numbers. Bottom line: do not rely on generated content. You can use table styling without table coding. Use your normal provision of <p>, <div>, <span> with classes, and give them "display: table-row", "display: table-cell", etc. in CSS. It might work...

01-17-2013, 02:03 PM	#13
graycyn Wizard Posts: 1,496 Karma: 11250344 Join Date: Aug 2010 Location: NE Oregon Device: Kobo Sage, Forma, Kindle Oasis 2, Sony PRS-T2	Thanks, I may try that. This learning to make epubs is sure an adventure! I'm not much for computer or video game puzzles, but this sort of thing I like. I may still be doing stuff wrong, I'm sure my CSS isn't the most elegant or efficient, but with the exception of the lists thing, stuff appears to be working well. I learn a lot from folks here, so thanks!