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

Go Back   MobileRead Forums > E-Book Software > Calibre > Recipes

Notices

Reply
 
Thread Tools Search this Thread
Old 10-23-2019, 02:44 AM   #1
Enterio
Junior Member
Enterio began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Oct 2019
Device: Kindle Paperwhite 7th gen
Smile CSS Style Question

I'm using the scrolling view mode of the Calibre viewer, with

Code:
body.calibre-viewer-scrolling { margin-left: 300px !important; margin-right: 300px !important; }
for right and left indents.

However, the images included in the epub appear very small with an ident of their own—even though through the View Image function they are of very large size. I tried using the code:

Code:
body.calibre-viewer-scrolling.img { width: 100%; !important; height:100% margin-left: 0px !important; margin-right: 0px !important; }
to try and make the images as big as possible, without any solution, as the images are unchanged and still small. Is there an easier way / option of keeping the native size of included images, to ignore the margins for the text in the case of images, in CSS code?

Thank you!
Enterio is offline   Reply With Quote
Old 10-23-2019, 04:02 AM   #2
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 43,779
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Use the inspector tool to check what CSS is applied to the image to figure out why it is displayed small.
kovidgoyal is offline   Reply With Quote
Advert
Old 10-23-2019, 09:42 AM   #3
Enterio
Junior Member
Enterio began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Oct 2019
Device: Kindle Paperwhite 7th gen
While using the inspector, i found out that the epub had fixed image resolutions assigned to each image.

Code:
<img height="337" width="480" src="../Images/image03297.jpeg" alt="" data-calibre-src="OEBPS/Images/image03297.jpeg">
And the images are contained in a paragraph with margins assigned.
Code:
 <p class="image">
How can I override both the fixed image sizes and my 300px left and right indent, to ignore them both, and make the picture as big as possible (only in flow mode). If not, at least, how can I make calibre ignore all the height and width dimensions assigned to each image? Does the (!important) CSS mark help in any way? I'd like this override be applied to every epub.

Last edited by Enterio; 10-23-2019 at 09:47 AM.
Enterio is offline   Reply With Quote
Old 10-23-2019, 12:12 PM   #4
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 43,779
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Add !important like this

img { width: 100vw !important; }


note the semi-colon comes after important not before it
kovidgoyal is offline   Reply With Quote
Old 10-24-2019, 03:16 AM   #5
Enterio
Junior Member
Enterio began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Oct 2019
Device: Kindle Paperwhite 7th gen
This stretches the images to the full screen, which is not what I wanted.

I'd need the images to ignore all the inheritance rules before them, and set them to:
Code:
width:auto !important; height:auto !important;
since I can't determine in CSS and HTML the normal height and width of the embedded images?

Also, could there be an option to save the assigned style modifications as a part of each book? (i.e., when I open Book (1) I'll have style (1) and when I open Book (2) I'll have Style (2)), or is that too hard to implement?

Thank you for your support!
Enterio is offline   Reply With Quote
Advert
Old 10-24-2019, 04:29 AM   #6
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 43,779
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
So do that. You can put whatever styles you want. And if you want to modify styles per book then do an EPUB to EPUB conversion and use the extra css setting in the conversion dialog to do that.
kovidgoyal 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
Get same style of css for all books in one series 3n4n Editor 5 10-06-2019 04:21 PM
Custom style names in CSS flipsake Conversion 0 11-30-2013 09:09 AM
CSS style, TOC and other stuff sebdea Sigil 8 04-19-2011 03:40 AM
list-style in CSS? frabjous ePub 2 08-13-2009 06:28 PM


All times are GMT -4. The time now is 11:48 AM.


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