Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre

Notices

Reply
 
Thread Tools Search this Thread
Old 03-30-2020, 11:29 AM   #1
nindotza
Member
nindotza began at the beginning.
 
Posts: 11
Karma: 10
Join Date: Mar 2020
Device: Moon+ Reader
ebook creation and center element

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)
nindotza is offline   Reply With Quote
Old 03-30-2020, 03:02 PM   #2
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 8,832
Karma: 40802167
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Forma, Clara HD, Nexus 7 HD, iPad Pro, Tolino epos
Quote:
Originally Posted by nindotza View Post
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:
Code:
<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.
DNSB is offline   Reply With Quote
Advert
Old 03-30-2020, 03:18 PM   #3
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 908
Karma: 5300000
Join Date: Nov 2019
Device: none
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.

Code:
img {
    max-width: 100%;
    object-fit: contain;
    width: auto;
}
hobnail is offline   Reply With Quote
Old 03-30-2020, 11:21 PM   #4
nindotza
Member
nindotza began at the beginning.
 
Posts: 11
Karma: 10
Join Date: Mar 2020
Device: Moon+ Reader
Quote:
Originally Posted by hobnail View Post
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.
nindotza is offline   Reply With Quote
Old 03-31-2020, 02:42 AM   #5
stumped
Wizard
stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.
 
Posts: 3,057
Karma: 5604042
Join Date: May 2016
Device: kobo forma, Kobo Libra, Huawei media Tab, fire HD10, PW3 HDX8.9,
Quote:
Originally Posted by nindotza View Post
..

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
stumped is offline   Reply With Quote
Advert
Old 03-31-2020, 04:23 AM   #6
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 65,367
Karma: 272335601
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
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)
pdurrant is offline   Reply With Quote
Old 03-31-2020, 05:29 AM   #7
stumped
Wizard
stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.
 
Posts: 3,057
Karma: 5604042
Join Date: May 2016
Device: kobo forma, Kobo Libra, Huawei media Tab, fire HD10, PW3 HDX8.9,
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..
stumped is offline   Reply With Quote
Old 03-31-2020, 11:36 PM   #8
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 908
Karma: 5300000
Join Date: Nov 2019
Device: none
Quote:
Originally Posted by nindotza View Post
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.
hobnail is offline   Reply With Quote
Old 04-02-2020, 05:00 AM   #9
galaxyhub
Member
galaxyhub began at the beginning.
 
Posts: 15
Karma: 10
Join Date: Jul 2019
Device: Kindle Paperwhite, Galaxy Tab S2 8.0
<img alt="image" class="imagecenter" src="image.jpg"/>


.imagecenter {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
galaxyhub is offline   Reply With Quote
Old 04-02-2020, 06:53 AM   #10
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 2,411
Karma: 11341332
Join Date: Jun 2017
Location: Ireland
Device: Both Kinds: epub based makes and Kindle
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:
Code:
<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:

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

In the CSS
Code:
.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.
Quoth is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Koreader 2019.08 doesn't center image due to text-align: center Norbi24 KOReader 7 08-29-2019 06:07 PM
New EBOOK Creation Process VydorScope Writers' Corner 10 05-16-2013 11:13 AM
Ebook Creation: Table of Contents maurices5000 Kindle Formats 15 02-18-2011 02:58 AM
Help with first MobiPocket ebook creation YugiDad Kindle Formats 1 05-21-2010 12:32 PM
PRC eBook Creation Nathan Campos Workshop 2 02-02-2010 01:54 PM


All times are GMT -4. The time now is 08:19 AM.


MobileRead.com is a privately owned, operated and funded community.