8 Replies Latest reply on Sep 19, 2011 10:26 AM by sgirsberger

    Workaround for nested ordered lists in EPUB?

    sgirsberger Level 1

      I am slowly converting a book I laid out in InDesign into an EPUB that echoes the logic (not rigidly the visual presentation) of the print version.

       

      Most of it has gone smoothly, because I test and fix at different stages, and have tagged the hell out of everything from the beginning. I view the test files on an original iPad, a Nook Color, and an iPhone. I have the Kindle Previewer.app and Kindle.app that I use when converting to .MOBI.

       

      However, there are two problems I’m having when viewing the book on a Nook Color that I do not know how to fix.

       

      The first problem is vertical line spacing when there are character styles (span classes) applied to specific words in a line of text. This book has many book title references and some foreign words that are italicized, for example, and wherever they occur, there is additional line space above and below that line of text. This also occurs where characters have been tagged as bold (either using <strong>, <b>, or <span class=bold>—I have tried all three ways of tagging these instances of text. You can see what a page looks like on the Nook Color at http://www.girsbergerdesign.com/Nooktest/nooktest.html.

       

      The other problem I’m having is with nested ordered lists. There are some outline-style lists, with levels 1. and a. While I can edit these in Sigil to maintain the type=1 and type=a of these lists, on the Nook Color, they are still showing up as 1., with the a. level indented properly but numbered 1. You can see a sample below (top) and a sample of the same page on the iPad in iBooks (bottom):

      nooklists.JPGipadlists.JPG

      Within iBooks on the iPad and the iPhone, the correct outlining system is maintained, after I change the value of the type of the lists to "1" and "a". So I know that works. I just don't see why it wouldn't work on the Nook Color.

       

      In the Kindle previewer.app, the bolds and italics and other span class formatting behaves properly (i.e, does not cause unsightly linespacing), but it too ignores the a level of the outline-style format, although it honors the indent.

       

      Does anyone have any advice about this? I'd like to be able to map the list styles to HTML for structure, but this is driving me crazy!

       

      Thanks in advance.

        • 1. Re: Workaround for nested ordered lists in EPUB?
          seddybell

          I've been having similar headaches with the Nook Color recently as well, which is really disappointing because I thought the Nook was the only ereader that was truly code friendly (no necessary hacks like you need with iBooks).

           

          Are you embedding fonts? That can often be the culprit, I've found. You can't embed fonts the way you used to, you now need to actually declare the style/version of that font. If you put:

           

          @font-face {

              font-family: Crimson;

              font-weight: normal;

              font-style: italic;

              src: url("Fonts/Crimson-Italic.otf");

          }

           

          You now need to type:

           

          @font-face {

              font-family: CrimsonItalic;

              font-weight: normal;

              font-style: normal;

              src: url("Fonts/Crimson-Italic.otf");

          }

          And I now need to write my styles out like this:
          p.txt {font-family: "CrimsonRoman", serif; font-size: 26px; line-height: 1.35; font-weight:normal; font-style: normal; text-indent: 0;}
               p.txt a {font-family: "CrimsonRoman", serif; font-size: 26px; line-height: 1.35; font-weight:normal;}
               p.txt em {font-family: "CrimsonRoman", serif; font-size: 26px; line-height: 1.35; font-style: italic; font-weight:normal;}
               etc., etc., etc.
          What a pain. The only quick work around I've found to alleviate all that styling is creating a single-attribute style and adding that to the class name in the html. If I want a top margin of 1em for a paragraph but don't want heavily repetitive styles, I do this:
          p.space-above {margin-top: 1em;}
          ...and in the HTML it will look like this:
          <p class="txt space-above">blah blah blah</p>
          This is a big problem with the Nook for me, because it means all of the books I created over the last two years will now look like poo on the Nook Color.

          1 person found this helpful
          • 2. Re: Workaround for nested ordered lists in EPUB?
            sgirsberger Level 1

            Thanks for your response, seddybell. This got me thinking, and I believe I have found a solution to the linespacing situation (still working on the outline situation).

             

            I think the line-height attribute is the issue. Because so many textbooks in print start out with something like 10/12 spacing (the book I’m converting is 11/14 Kepler Std), the line-height in the CSS file (or the leading of the paragraph style in InDesign, before exporting) has to be increased to roughly 164% of the font-size (in this case, from 1.27 to 2 em in the CSS file) to ensure that the <em> and <strong> characters don't throw off the linespacing for viewing on the Nook. This way, whether the user has “Publisher Defaults” turned on or off, the linespacing won’t be affected.

             

            I noticed that when I turned on “Publisher Defaults”, my text looked fine, but when I turned it off, THAT was when the spacing problems slapped me in the face!

             

            Here was what I did with my basic p.TX tag, and then made proportional adjustments to other tags:

             

             

            Original CSS style exported from InDesign:

             

            }

            p.TX {

            font-family : "Georgia", serif;

            font-weight : normal;

            font-style : normal;

            font-size : 0.92em;

            text-decoration : none;

            font-variant : normal;

            line-height : 1.27;

            text-align : justify;

            color : #000000;

            text-indent : 18px;

            margin : 0px;

             

             

            Line-height value increased:

             

            }

            p.TX {

            font-family : "Georgia", serif;

            font-weight : normal;

            font-style : normal;

            font-size : 0.92em;

            text-decoration : none;

            font-variant : normal;

            line-height : 2;

            text-align : justify;

            color : #000000;

            text-indent : 18px;

            margin : 0px;

             

            I do something similar to your p.space-above on the InDesign side. I always add styles with a space above or below attribute that ports over as a margin quite nicely, so I'm glad I've already developed this good habit! But I'll definitely be adding more space between lines now to accommodate this oddity on the Nook (assuming that's what it is).

            • 3. Re: Workaround for nested ordered lists in EPUB?
              BobLevine MVP & Adobe Community Professional

              My $0.02 says you should upgrade to CS5.5.

               

              The code out of that is so much cleaner that it's a much easier process.

               

              You can simply map all bulleted styles to the li tag and then create appropriate css rules after you create the epub.

               

              Bob

              • 4. Re: Workaround for nested ordered lists in EPUB?
                sgirsberger Level 1

                Thanks for the suggestion, Bob. I’ve been using CS5.5 for a while now, and I agree that the code from CS5.5 is much cleaner.

                 

                I have mapped the styles to ordered lists, and also tried static ordered lists, which seems to be more helpful, but not all readers (Kindle and Nook, specifically) respect the ordering right out of the box. So I have been working on creating the appropriate CSS rules after I create the EPUB, and the iPad respects what I’ve done, but not these other readers. On the Nook Color and in the Kindle Previewer.app I get a 1  2  3 . . . list, followed by a 1  2  3 . . . list that’s indented as if it were a second-level list, but without the a  b  c . . . ordering I require. So close. They’re ignoring the type=a value of the second-level list.

                 

                I know there must be a solution, and my skills with CSS are improving as I do more work with EPUB, but considering that this is the single thing now that is preventing me from handing this over to the publisher, I hoped someone might have a simple answer.

                 

                Shawn

                • 5. Re: Workaround for nested ordered lists in EPUB?
                  BobLevine MVP & Adobe Community Professional

                  Where are you setting the type=a? It should be in the OL tag, not the li tag.

                   

                  Bob

                  • 6. Re: Workaround for nested ordered lists in EPUB?
                    sgirsberger Level 1

                    Yeah, I did put it in the OL tag. Works fine on the iPad, not on the Nook Color or Kindle Preview.app. Tried turning the Publisher Defaults option on and off on the NC, but it didn’t make it a difference, and besides, I don’t want the people reading the book to have to do that anyway!

                     

                    I’m working on another project now that is a workbook with lists, and I’m going to see if naming the list level and giving it a new number within InDesign, before exporting, helps.

                     

                    Thanks,

                    Shawn

                    • 7. Re: Workaround for nested ordered lists in EPUB?
                      BobLevine MVP & Adobe Community Professional

                      Could simply be a bug.

                       

                      Bob

                      • 8. Re: Workaround for nested ordered lists in EPUB?
                        sgirsberger Level 1

                        Actually, it’s more a matter of what the reader software doesn’t support . . . yet. I did get this to work on the NOOK Color, thanks to advice from Toxaris in the Mobileread EPUB forum:

                         

                        I included the code for ol.loweralpha in my stylesheet as directed, and when I replaced <ol type="a"> with <ol class="loweralpha">, the lettered lists displayed perfectly on the NOOK Color and on the iPad -- a great solution.

                         

                        but the Kindle supports the most rudimentary of tags, and that’s the one for which I would need to hardcode the alphas. Sigh. See discussion at http://www.mobileread.com/forums/showthread.php?t=149536&highlight=sgirsberger