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

Go Back   MobileRead Forums > E-Book Readers > Kobo Reader

Notices

Reply
 
Thread Tools Search this Thread
Old 05-26-2020, 10:16 AM   #1
Stevex
Addict
Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.
 
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
Stevex is offline   Reply With Quote
Old 05-26-2020, 11:01 AM   #2
davidfor
Grand Sorcerer
davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.davidfor ought to be getting tired of karma fortunes by now.
 
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.
davidfor is offline   Reply With Quote
Advert
Old 05-26-2020, 11:10 AM   #3
Stevex
Addict
Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.
 
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.
Stevex is offline   Reply With Quote
Old 05-26-2020, 11:24 AM   #4
jackie_w
Grand Sorcerer
jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.
 
Posts: 6,167
Karma: 16228536
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
Quote:
Originally Posted by Stevex View Post
Hi can anyone quickly help me with the below?

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!!!
I found a book in my library with headings + 2 surrounding images. It seems to work fine as a kepub (ETA: and also as a standard epub).

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>
CSS:
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;
}
I can post a screenshot if you need it.

Last edited by jackie_w; 05-26-2020 at 11:35 AM. Reason: Changed img CSS
jackie_w is offline   Reply With Quote
Old 05-26-2020, 11:41 AM   #5
Stevex
Addict
Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.
 
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.
Stevex is offline   Reply With Quote
Advert
Old 05-26-2020, 07:55 PM   #6
Stevex
Addict
Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.Stevex is as sexy as a twisted cruller doughtnut.
 
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.
Stevex is offline   Reply With Quote
Old 05-28-2020, 11:51 AM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf 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
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


All times are GMT -4. The time now is 10:19 PM.


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