ebook creation and center element

[nindotza]

I am creating an ebook using calibre edit book. I want to center a small image or a title on a page. I am using CSS to do so, and it looks just as I want it in the e-book edit app. However, once I migrate it to the reader those elements are not centering. What is the reliable way to set elements to center horizontally.

This is what I am doing using basic CSS

<div class="outerBox">
<div class="innerBox">
<h2>The One Kingdom</h2>
<img src="flow_2.jpg" alt="leaflet"/>
</div>
</div>

CSS (in the stylesheet.css) is:

.outerBox{
text-align:center;
}
.innerBox{
display:inline-block;
}

(NOTE the CSS file is correctly specified as changes are reflected in the editor)

[DNSB]

Originally Posted by nindotza

I am creating an ebook using calibre edit book. I want to center a small image or a title on a page. I am using CSS to do so, and it looks just as I want it in the e-book edit app. However, once I migrate it to the reader those elements are not centering. What is the reliable way to set elements to center horizontally.

This is what I am doing using basic CSS

Spoiler:

<div class="outerBox">
<div class="innerBox">
  <h2>The One Kingdom</h2>
  <img src="flow_2.jpg" alt="leaflet"/>
</div>
</div>

CSS (in the stylesheet.css) is:

.outerBox{
   text-align:center;
}
.innerBox{
   display:inline-block;
}

(NOTE the CSS file is correctly specified as changes are reflected in the editor)

Which reader? Amazon, Kobo, Pocketbook, calibre's ebook viewer, ereader app on an iOS or Android device or ???

Quite a few ereader apps have to told to use the ebook's CSS and even there many lack support for quite a few CSS tags.

[hobnail]

I've heard this css works well, although I rarely retain the figures in the public domain books I've cleaned up so I don't have much, if any, experience with it.

img {
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

[nindotza]

Originally Posted by hobnail

I've heard this css works well...

I tried this but it does not help.

I see the effect of the styles in the calibre interface but those styles seem to be ignored in the reader.

Moon+ Reader on a Android phone.

Sadly the author of that reader does not respond any longer to requests, though he used to be quite attentive. I guess it is difficult to get excited maintaining an app that no one wants to pay for.

So, in short, many CSS attributes get ignored, not just center but padding and margins. I have not enumerated a list but they are some very basic style elements. And again, they show just fine in Calibre.

[stumped]

Originally Posted by nindotza

..

Moon+ Reader on a Android phone.

Sadly the author of that reader does not respond any longer to requests, though he used to be quite attentive. I guess it is difficult to get excited maintaining an app that no one wants to pay for.

So, in short, many CSS attributes get ignored, not just center but padding and margins. I have not enumerated a list but they are some very basic style elements. And again, they show just fine in Calibre.

most of that list can be addresses via tweaking the detailed preferences options in moon.
its a fair assumption ( by the author) that most android phone users will prefer to see a full screen image, rather than a smaller one pushed to the center of their ~5 inch screens
as for " maintaining an app that no one want to pay for"
1) sales look healthy
2) he still releases several updates per year to all customers. I think that's pretty good service, even if he has not ( yet) personally replied to your request

[pdurrant]

Try this.

<div class="centered_image">
<img src="flow_2.jpg" alt="leaflet"/>
</div>

With css like this:

div.centered_image {
width: 60%;
margin: 1em 19%;
}
div.centered_image img {
width: 100%;
}

(19% to avoid any rounding errors causing problems)

(From stack exchange)

[stumped]

In moon, with the book open..
Go to misc options, find disable css, tap the gear symbol to expand that option then you have a list of specific toggles to work with..

[hobnail]

Originally Posted by nindotza

Moon+ Reader on a Android phone.

Ereaders for tablets/phones are well known for not doing a good job with the formatting. From what I gather their goal is allowing the user to tweak anything and everything, and it sounds like proper/decent formatting got lost in the shuffle.

[galaxyhub]

<img alt="image" class="imagecenter" src="image.jpg"/>


.imagecenter {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}

[Quoth]

Or maybe the below from an epub2
Also works converted to AZW/KF8 and old Mobi. Tested on DXG, Keyboard and PW3 as well as 3 makes of ePub reader and several apps, but not moonreader.

On the page:

<div class="center"><img src="../images/00009.gif" alt="" title=""/></div>

Or if the image is too small in some eReaders / app& Device and too big in others:

<div class="center"><img class="figscale" src="../images/00013.gif" alt="" title=""/></div>

and

In the CSS

.center {
  display: block;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  text-align: center
}
.figscale {
  width: 1920 px;
  max-width: 67%
}
.figcenter {
  width: auto;
  height: auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  text-align: center
}

There seems to be no way to make images used as drop caps work in old mobi. I don't use them myself as I think they reduce readability and merely an egotistical simulation of manuscript illluminatation. However they are in some PD ebooks.

I've never had to edit HTML & CSS of our own docx to epub2 since figuring out what styles and page stuff works on Calibre imports. I have though edited a lot of PD ebooks. In extreme cases they are so bad that even clever regex couldn't fix them, so I did convert to RTF, saved that and imported it to MS Word or LO Writer. Now abandoned Word 2+ years ago.