Ordered List Numbers being cut off

[SantafA]

Hi everyone,

I have an ordered list I need to keep as close to the left side of the screen as possible. When I enlarge the font in a reader app the list numbers soon start to get cut off at the left edge of the page though.

This happens in Nook and Calibre. It actually doesn't happen in ADE. ADE somehow keeps everything on screen when the other apps don't.

The only way I've found to rectify it is to place a div around the list and give it a pretty large left margin. It's squishing my list though - the list item text is kind of long. Also, different readers need a differently sized margin, and I don't know what the universal minimum sized margin should be - don't know when to stop. Nook for PC only needs a .3em left margin to not cut off list numbers at its largest font size setting. Calibre requires a much larger margin.

Is there a simpler method to preserve your list numbers? A way for every reader (or at least the most popular readers) to automatically keep list numbers from being cut off?

margin-left:auto; doesn't help.

Giving the div a width and floating it right just messes everything up real bad. Making an empty div before it and making both divs display:inline-block; and giving them widths just seems to create chaos too. 2/3 of my list vanishes and I get some page-break problems. Some problem with the vertical alignment maybe, I don't know.

Making the list-style-position: inside; causes uneven alignment problems which I have to then fix with text-indent and that just leads to other alignment problems across multiple reader apps/devices.

I may very well be doing something wrong with my code. Any advice you guys have I will much appreciate. Thank you everyone.

[eschwartz]

lists in ereaders are a big hassle, since many ereaders do not seem to support it very well. e.g. my Kindle randomly restarts from item one every once in a page turn or three.

I ended up using paragraphs with the list number inserted, and used the following CSS:

.listindent_1 {
  text-align: left;
  text-indent: -1.1em;
  margin-left: 1.8em;
}
.listindent_2 {
  text-align: left;
  text-indent: -1.6em;
  margin-left: 1.8em;
}
.listindent_3 {
  text-align: left;
  text-indent: -2.1em;
  margin-left: 1.8em;
}

Granted, that is awkward and requires manually setting each paragraph -- but calibre's new Functions Replace mode can do the work for you. Too bad it didn't exist yet when I started out instead I used bash, readline, a for loop, and echo, then pasted into the editor.

[dgatwood]

Originally Posted by eschwartz

lists in ereaders are a big hassle, since many ereaders do not seem to support it very well. e.g. my Kindle randomly restarts from item one every once in a page turn or three.

If you're okay with attributes that were deprecated in HTML 4 and then un-deprecated again in HTML 5, you can specify the value attribute on your li tag. That has the advantage of giving you a proper list style where the number is above whitespace if it spans multiple lines (without having to trust readers to properly handle negative distances in CSS), but should guarantee that no conforming renderer can screw up the numbering even if it loses track of the preceding elements. (Then again, Kindle always finds a way, so.... )

[Hitch]

Originally Posted by SantafA

Hi everyone,

I have an ordered list I need to keep as close to the left side of the screen as possible. When I enlarge the font in a reader app the list numbers soon start to get cut off at the left edge of the page though.

This happens in Nook and Calibre. It actually doesn't happen in ADE. ADE somehow keeps everything on screen when the other apps don't.

The only way I've found to rectify it is to place a div around the list and give it a pretty large left margin. It's squishing my list though - the list item text is kind of long. Also, different readers need a differently sized margin, and I don't know what the universal minimum sized margin should be - don't know when to stop. Nook for PC only needs a .3em left margin to not cut off list numbers at its largest font size setting. Calibre requires a much larger margin.

Is there a simpler method to preserve your list numbers? A way for every reader (or at least the most popular readers) to automatically keep list numbers from being cut off?

margin-left:auto; doesn't help.

Giving the div a width and floating it right just messes everything up real bad. Making an empty div before it and making both divs display:inline-block; and giving them widths just seems to create chaos too. 2/3 of my list vanishes and I get some page-break problems. Some problem with the vertical alignment maybe, I don't know.

Making the list-style-position: inside; causes uneven alignment problems which I have to then fix with text-indent and that just leads to other alignment problems across multiple reader apps/devices.

I may very well be doing something wrong with my code. Any advice you guys have I will much appreciate. Thank you everyone.

This occurs with no margin set for the book itself?

Hitch

[SantafA]

Hi Hitch,

"html" has no margins applied at all.

"body" has margin:0em 0em 0em .01em;

And I'm not sure if this matters for this problem but "@page" has margin : .8in .5in;

If you're talking about the reader's margin setting, I notice it with Nook for PC's margins at kind of a low setting (not sure how to quantify it since no numbers are displayed, just a slider) - it's what I believe is the default setting.

And it happens in Calibre with a side margin of 36px - I also believe this is Calibre's default margin setting.

[Hitch]

Originally Posted by SantafA

Hi Hitch,

"html" has no margins applied at all.

"body" has margin:0em 0em 0em .01em;

And I'm not sure if this matters for this problem but "@page" has margin : .8in .5in;

If you're talking about the reader's margin setting, I notice it with Nook for PC's margins at kind of a low setting (not sure how to quantify it since no numbers are displayed, just a slider) - it's what I believe is the default setting.

And it happens in Calibre with a side margin of 36px - I also believe this is Calibre's default margin setting.

Remove the @page margins--which are set in INCHES, which they oughtn't be--and see if that helps. Were I a betting man...

Hitch

[SantafA]

Nah, exact same thing. I don't notice any difference getting rid of it.

I put it in inches because I thought @page just had to do with printing an ebook out. Am I wrong?

[Hitch]

Originally Posted by SantafA

Nah, exact same thing. I don't notice any difference getting rid of it.

I put it in inches because I thought @page just had to do with printing an ebook out. Am I wrong?

Something very weird is going on, because I've just not seen this behavior, not in an HTML list. I've seen it when we've tried to manually create a list (a client used something that isn't part of the character set, like an arrow, or what-have-you), but I don't recall having this issue with a regular HTML list.

Question: Given that your users can change the font size, willy-nilly--which is the topic here, really, WHY does the list need to be so close to the left margin? It's not like you're preventing wrapping behavior, etc., so...??? I'm not following the reasoning?

Vis-a-vis the printing question: I wouldn't know. I haven't ever tried "printing out" an ebook, to be honest.

Hitch

[SantafA]

It's the table of contents. It's really not even that close to the left anymore.

And I can't just type numbers instead of using a real list because the chapter titles are long and they wrap, leading to alignment problems if it's not a list.