03-30-2020, 10:29 AM | #1 |
Member
Posts: 20
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) |
03-30-2020, 02:02 PM | #2 | |
Bibliophagist
Posts: 35,393
Karma: 145435140
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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. |
|
03-30-2020, 02:18 PM | #3 |
Running with scissors
Posts: 1,552
Karma: 14325282
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; } |
03-30-2020, 10:21 PM | #4 |
Member
Posts: 20
Karma: 10
Join Date: Mar 2020
Device: Moon+ Reader
|
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. |
03-31-2020, 01:42 AM | #5 | |
Wizard
Posts: 3,305
Karma: 10259306
Join Date: May 2016
Device: kobo forma, Kobo Libra, Huawei media Tab, fire HD10, PW3 HDX8.9,
|
Quote:
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 |
|
03-31-2020, 03:23 AM | #6 |
The Grand Mouse 高貴的老鼠
Posts: 71,506
Karma: 306214458
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) |
03-31-2020, 04:29 AM | #7 |
Wizard
Posts: 3,305
Karma: 10259306
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.. |
03-31-2020, 10:36 PM | #8 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
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.
|
04-02-2020, 04:00 AM | #9 |
Member
Posts: 22
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; } |
04-02-2020, 05:53 AM | #10 |
the rook, bossing Never.
Posts: 11,156
Karma: 85874891
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
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> Code:
<div class="center"><img class="figscale" src="../images/00013.gif" alt="" title=""/></div> 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 } 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. |
|
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 05:07 PM |
New EBOOK Creation Process | VydorScope | Writers' Corner | 10 | 05-16-2013 10:13 AM |
Ebook Creation: Table of Contents | maurices5000 | Kindle Formats | 15 | 02-18-2011 01:58 AM |
Help with first MobiPocket ebook creation | YugiDad | Kindle Formats | 1 | 05-21-2010 11:32 AM |
PRC eBook Creation | Nathan Campos | Workshop | 2 | 02-02-2010 12:54 PM |