View Full Version : 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
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
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
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 &nbsp;&nbsp; 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
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!