05-26-2020, 10:16 AM | #1 |
Addict
Posts: 225
Karma: 15318
Join Date: Nov 2015
Device: Kobo Glo HD
|
Quick help for css for Kobo epub
Hi can anyone quickly help me with the below?
Here is the text: <p class="p1"><img src="1.jpg" class="img2"/>*TEXT*<img src="2.jpg" class="img2"/></p> Here are the styles: .p1 { display: block; font-size: 1.5em; line-height: 1.2; page-break-after: avoid; text-align: center; text-indent: 0; margin: 5px 0 0.83em; } .img2 { height: auto; width: auto; max-width: 100%; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; padding: 0; vertical-align: middle; } In calibre in the preview, the thing displays on one line IMG1*TEXT*IMG2 But on the kobo, it puts in line throws IMG1 *TEXT* IMG2 I would like to avoid the line throws and have it display as the Calibre preview - if possible -. I don't want anyone to spend a lot of time on this!!! But any quick help appreciated!!! Cheers, Steve |
05-26-2020, 11:01 AM | #2 |
Grand Sorcerer
Posts: 24,908
Karma: 47303748
Join Date: Jul 2011
Location: Sydney, Australia
Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos
|
How big are the images? Is the screen actually wide enough to display them one one line? Try resizing the calibre view. That will probably duplicate what you see on the device if the window is narrow enough.
|
Advert | |
|
05-26-2020, 11:10 AM | #3 |
Addict
Posts: 225
Karma: 15318
Join Date: Nov 2015
Device: Kobo Glo HD
|
Hi David
Thanks for your answer! The Kobo screen is easily big enough to display them in one line. As for Calibre, even when I squeeze the Calibre viewing window right down, they don't "word wrap" they stay on one line together - just get cut off at the sides. Calibre doesn't duplicate the Kobo "line throw" effect. The images are actually tiny, 66x21 px. 21px should fit in the line height too. But obviously there's something I'm missing! I was just hoping, somebody could save me more hours of experimentation hunched in front of my pc ;-) Last edited by Stevex; 05-26-2020 at 11:14 AM. |
05-26-2020, 11:24 AM | #4 | |
Grand Sorcerer
Posts: 6,167
Karma: 16228536
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
Quote:
HTML: Code:
<h3 class="ct"><img alt="image" class="chorn" src="../images/ornl.png"/> fifteen <img alt="image" class="chorn" src="../images/ornr.png"/></h3> Code:
.ct { display: block; font-size: 1.5em; font-weight: normal; line-height: 1.3; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 2em; text-align: center; text-indent: 0; } img.chorn { height: 1em; vertical-align: middle; width: auto; } Last edited by jackie_w; 05-26-2020 at 11:35 AM. Reason: Changed img CSS |
|
05-26-2020, 11:41 AM | #5 |
Addict
Posts: 225
Karma: 15318
Join Date: Nov 2015
Device: Kobo Glo HD
|
Thanks Jackie! The main difference I see is that for the image I have height: auto; and in your example is height: 1em; so maybe concretely specifying the height to fit in the line is the clue!
Anyway, a working example is a perfect starting point, thanks so much! I'll post again later. |
Advert | |
|
05-26-2020, 07:55 PM | #6 |
Addict
Posts: 225
Karma: 15318
Join Date: Nov 2015
Device: Kobo Glo HD
|
Hey thanks Jackie. Thanks to you I solved it!!! (By the way, I see that your example was for decorative section headings too, exactly the same that I was trying to achieve)
What was causing my CSS to go wrong was margin-left: auto; margin-right: auto; in the style for the images. Taking them out fixed it. I found it by cutting and pasting Jackie's CSS in and then - hooray - it worked - then I added my own stuff back until I found what was blowing things up. Thanks again - I'm so happy!!! (PS I'll think tomorrow about why that margin-left: auto; was a mistake) Last edited by Stevex; 05-26-2020 at 08:00 PM. |
05-28-2020, 11:51 AM | #7 |
Resident Curmudgeon
Posts: 73,510
Karma: 126422064
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Auto is always a mistake. Any CSS line that uses auto should be removed.
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Kobo Epub quick query | bookaho!ic | Kobo Reader | 2 | 11-14-2015 08:01 AM |
android pro quick guide apps: html5, CSS, regex... | cybmole | Sigil | 10 | 05-13-2014 02:11 AM |
Why, During ePub to ePub Conversion does Calibre changes existing CSS classes? | JSWolf | Conversion | 7 | 08-06-2011 07:32 PM |
Override ePub CSS with userStyle.css? | barium | Sony Reader Dev Corner | 11 | 07-16-2011 03:25 PM |
epub CSS versus "Regular" CSS | konrad | ePub | 4 | 02-18-2011 09:29 AM |