Chapters Not Right in TOC

[Karellen]

@JSWolf,

He is wanting vertical centering on the page. See post#12

[DNSB]

Not sure if this is exactly what was wanted but it seems to work for me. Not quite sure from my notes but think I lifted this from a post on MobileRead a few years back (2010???).

  <div class="vcenter1"></div>
  <div class="vcenter2">
    <table>
      <tbody>
        <tr>
          <td>
            <p>Happy birthday to you,</p>

            <p>Peace and happiness to you,</p>

            <p>May your life be filled with gladness,</p>

            <p>Happy birthday to you!</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.vcenter1 {
  float: left;
  height: 45%;
  margin-bottom: -2em;
}

.vcenter2 {
  clear: both;
  height: 0em;
  position: relative;
}

table,tr,th {
  height: 100%;
  width: 100%;
  text-align: center;
}

You need both the body and html settings. The vertical centering depends on having the right starting point so I tweak the height in vcenter1 to keep the text close to vertically centered. (the 4 lines used 45%, the 8 lines used 40% in vcenter1).

[JSWolf]

Originally Posted by DNSB

Not sure if this is exactly what was wanted but it seems to work for me. Not quite sure from my notes but think I lifted this from a post on MobileRead a few years back (2010???).

  <div class="vcenter1"></div>
  <div class="vcenter2">
    <table>
      <tbody>
        <tr>
          <td>
            <p>Happy birthday to you,</p>

            <p>Peace and happiness to you,</p>

            <p>May your life be filled with gladness,</p>

            <p>Happy birthday to you!</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.vcenter1 {
  float: left;
  height: 45%;
  margin-bottom: -2em;
}

.vcenter2 {
  clear: both;
  height: 0em;
  position: relative;
}

table,tr,th {
  height: 100%;
  width: 100%;
  text-align: center;
}

You need both the body and html settings. The vertical centering depends on having the right starting point so I tweak the height in vcenter1 to keep the text close to vertically centered. (the 4 lines used 45%, the 8 lines used 40% in vcenter1).

I would change <p> to <p class="noindent"> and use a class of...

/noindent {
  text-indent: 0;
}

Otherwise, good job. Without the noindent class, the centered lines are off center because of the text-indent for <p>.

[Turtle91]

I use a technique very similar. It uses table display properties without actually having to put any table tags. It automatically adjusts the top and bottom spacing so it’s consistent across devices and display sizes. It just uses two <div>s like this:

<div class="v-ctr">
  <div>
      <p>Happy birthday to you,</p>
      <p>Peace and happiness to you,</p>
      <p>May your life be filled with gladness,</p>
      <p>Happy birthday to you!</p>
  </div>
</div>

As soon as I get home from the airport I’ll post the CSS - I don’t have it on my phone.

You can include any styling, like the no-indent, italics, text-alignment, etc. in that CSS, so there is no need for additional class= declarations.

I have saved this as a clip in Sigil, so all I need to do is highlight the lines I want vertically centered and click on the clip. It works great for things like the title page, Dedication, Acknowledgment, etc.

===<>===

Edit: Here is the CSS I use for the vertical center:

div.v-ctr {
    height: 100%;
    width: 100%;
    display: table;
    position: fixed;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

div.v-ctr div {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    text-align: center;
    font-style: italic;
    color: purple;
}

As I said above, this uses a similar idea of using a table without having to use all the table tags by simply setting the display property of the outer <div> as table and the display property of the inner <div> as table-cell ... then it's just a matter of setting the vertical-align: to middle on the inner <div>. This will vertically center anything that is within the inner <div>.

The red color is any additional styling you wish to add like horizontal alignment, color, italics, etc.

I've attached an example image.

Also, here is the clip I've set if anyone is interested:

<div class="v-ctr">\n<div>\n\1\n</div>\n</div>

Cheers!

[RatherBWriting]

A big "thank you" to everyone who has responded! I tried Jon's suggested fix first, and it works, so I am very relieved. I like the way the text is centered on the page; it looks very nice on my ipad.

RatherBWriting

[RatherBWriting]

Where can I find the download for the Sigil epubcheck? When I click on my Plugins folder, it is not there. I do have Java on my laptop.

Thanks so much for your help - it is very much appreciated!
RatherBWriting

[DNSB]

Originally Posted by RatherBWriting

Where can I find the download for the Sigil epubcheck? When I click on my Plugins folder, it is not there. I do have Java on my laptop.

Thanks so much for your help - it is very much appreciated!
RatherBWriting

Check the first message in the epubcheck plugin for Sigil thread.

[RatherBWriting]

I've downloaded/installed Java. I have Sigil version 1.4.3.

I've downloaded epubcheck-5.0.0.zip from w3c.github ("latest version of EPUBCheck") to my Downloads folder. I copied/pasted epubcheck to the Plugin-Launchers folder of Sigil, which I found in my Programs folder, and unzipped the files.

Then I opened up Sigil and clicked on Plugins. When I click Manage Plugins, Add Plugin, I see two folders, python and epubcheck-5.0.0-zip, even though I already unzipped the files. If I click on epubcheck-5.0-0-zip, I get a message saying it is not a valid Sigil plugin.

What have I done wrong??

Thanks so much in advance for your help -
RatherBWriting

[Turtle91]

You don’t need to download epubcheck from w3c. Just download the plug-in from the link above and it will do all the work.

[RatherBWriting]

I followed your instructions, Dion, and it worked beautifully! Thank you so much. I greatly appreciate your help, and the help of the many talented and helpful people on this message board.

Thank you!
RatherBWriting

[Turtle91]

No worries - I'm glad you got it working!

I've also added the CSS for the vertical centering with 2 <div>s to my post above.

Cheers!

[jackie_w]

Originally Posted by Turtle91

I use a technique very similar. It uses table display properties without actually having to put any table tags. It automatically adjusts the top and bottom spacing so it’s consistent across devices and display sizes. It just uses two <div>s like this:

<snip>

Very interesting. Thanks for the sample code.

To any Kobo users who are following this, I think this technique will only work in kepubs not standard epubs. I suspect the CSS position: fixed; is a problem for Kobo's Adobe epub reading app.

[Turtle91]

Thanks jackie_w!

Yes, there are very few readers/apps/devices that support the FULL ePub standard, some definitely better than others. Hopefully the developer of the app/device is continually updating and fixing things as bugs/display issues get reported. If you find an area that kepub doesn’t support then I highly recommend reporting it to the developer; the more reports they get the higher priority fixing it becomes. You can make reports to Kobo at the following email: kobo-renderingissues@mail.rakuten.com

On the other hand, Adobe likes to think they do everything perfectly and any problems with their software are because the user isn’t using it properly … Their ePub renderer ADE is no exception… support for older systems/devices is slim… why, when they can just have you buy the newest version!?!

It is very important for the ebook creator to know the capabilities of their target market’s devices. You can provide alternate styling in your CSS via media queries to handle those sub-standard occurrences.

[JSWolf]

Originally Posted by Turtle91

Thanks jackie_w!

Yes, there are very few readers/apps/devices that support the FULL ePub standard, some definitely better than others. Hopefully the developer of the app/device is continually updating and fixing things as bugs/display issues get reported. If you find an area that kepub doesn’t support then I highly recommend reporting it to the developer; the more reports they get the higher priority fixing it becomes. You can make reports to Kobo at the following email: kobo-renderingissues@mail.rakuten.com

On the other hand, Adobe likes to think they do everything perfectly and any problems with their software are because the user isn’t using it properly … Their ePub renderer ADE is no exception… support for older systems/devices is slim… why, when they can just have you buy the newest version!?!

It is very important for the ebook creator to know the capabilities of their target market’s devices. You can provide alternate styling in your CSS via media queries to handle those sub-standard occurrences.

In this case, it's not Adobe's fault but Kobo's fault. Kobo is not using the latest version of RMSDK and so things that do work on the latest ADE 4.x would work on Kobo but were it not for the old version of RMSDK.

[jackie_w]

Originally Posted by JSWolf

In this case, it's not Adobe's fault but Kobo's fault. Kobo is not using the latest version of RMSDK and so things that do work on the latest ADE 4.x would work on Kobo but were it not for the old version of RMSDK.

Possibly true, because since my previous post I tried it on an eink PocketBook Touch HD3 where it works OK.

OTOH, do we know that PocketBook devices actually use an out-of-the-box Adobe reading app? I suppose it's possible that PocketBook have done their own improvements.