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

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 11-15-2017, 08:54 PM   #1
AlanHK
Fanatic
AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40
 
AlanHK's Avatar
 
Posts: 530
Karma: 73392
Join Date: Apr 2014
Device: PW-3, Android phone
Centred and scaled image not centred or scaled

I'm placing an image on a promo page like this:

Code:
<div class="center">
    <img alt="ad-subs" src="../Images/ad-subs.jpg" class="img60"/>
</div>
the CSS:
Code:
.center {
    text-align: center;
    text-indent: 0;
}

.img60 {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}
The intention is to have the image-- 800 wide x 438 high -- in the middle, scaled to 60% of page width.
And that's what I see in Sigil, and Calibre in the ePub.
When I export to AZW3 and load on a PW3, what I see is an image that is about 8 cm wide on the 9cm wide screen, with a left margin of 2cm, cut off on the right side -- i.e. image is 90% of page width, off-centre.

It seems that the left margin is about 20% of the page width, but the image is not being scaled to 60%.

How can I fix this?

Last edited by AlanHK; 11-15-2017 at 08:59 PM.
AlanHK is offline   Reply With Quote
Old 11-15-2017, 09:40 PM   #2
AlanHK
Fanatic
AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40
 
AlanHK's Avatar
 
Posts: 530
Karma: 73392
Join Date: Apr 2014
Device: PW-3, Android phone
Well, found a solution, if not an explanation:

scaling in the outer div instead of the image tag made it work.

Code:
<div class="img60">
     <img alt="ad-subs" src="../Images/ad-subs.jpg" class="img100"/>
</div>

.img100 {width: 100%;}
.img60 {width: 60%;
    margin-left: 20%;
    margin-right: 20%;}
Both are identical in epub, but only this is as intended in AZW3.
AlanHK is offline   Reply With Quote
Old 11-20-2017, 06:52 AM   #3
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,402
Karma: 987654
Join Date: Dec 2012
Device: Kindle
But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?
Notjohn is offline   Reply With Quote
Old 11-20-2017, 08:54 AM   #4
AlanHK
Fanatic
AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40AlanHK is slicker than a case of WD-40
 
AlanHK's Avatar
 
Posts: 530
Karma: 73392
Join Date: Apr 2014
Device: PW-3, Android phone
Quote:
Originally Posted by Notjohn View Post
But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?
Not even looking at mobi7, I just make AZW.

This book requires KF8 for fonts and other features, how KF7 looks I don't really care.
AlanHK is offline   Reply With Quote
Old 11-23-2017, 01:01 PM   #5
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,605
Karma: 92369247
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Notjohn View Post
But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?
To answer your question, NJ: yes. It will be 100%. You can't work around KF7's issues with images with a media query alone. To do it correctly, you put the image in twice (call it twice, I mean); once in a KF8 div, once in a KF7. In the KF7, you assign the fixed-size of the image, so that it's not overdriven; in the KF8, you call it with a %.

You hide each from the other--which is where the MQ's do come in to play. William's plugin does that work for you, if you use it.

Hitch
Hitch is offline   Reply With Quote
Old 11-24-2017, 06:10 AM   #6
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,402
Karma: 987654
Join Date: Dec 2012
Device: Kindle
Quote:
Originally Posted by AlanHK View Post
how KF7 looks I don't really care.
That's my feeling as well. While I'm not a fan of Apple's obsolescence-by-design, there is a point where we should stop using shields and bucklers (whatever a buckler may be) and adopt Kevlar body armor.
Notjohn is offline   Reply With Quote
Old 11-24-2017, 09:28 AM   #7
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,605
Karma: 92369247
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Notjohn View Post
That's my feeling as well. While I'm not a fan of Apple's obsolescence-by-design, there is a point where we should stop using shields and bucklers (whatever a buckler may be) and adopt Kevlar body armor.
That's a luxury that I don't have.

Hitch
Hitch is offline   Reply With Quote
Old 08-04-2020, 01:42 AM   #8
Bozana
Junior Member
Bozana began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Jan 2013
Device: PC
Thumbs down

I'm sorta having similar problems but I've gone down the rabbit hole with svg image:

In my stylesheet:

.svg {
display: block;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 15%;
}

In my html:

<p class="svg"><img alt="scrolls" src="scrolls.svg"/></p>

and another, I tried using the viewbox method:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots), however, it's fine in Sigil and Calibre. I want to keep the size of scrolls.sgv, as I'm happy with the size, however, I would like scroll.svg to be smaller. I'm editing this in Sigil.

Very bizarre! Any help with this, would be much appreciated.
Bozana is offline   Reply With Quote
Old 08-04-2020, 08:39 AM   #9
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,605
Karma: 92369247
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Bozana View Post
I'm sorta having similar problems but I've gone down the rabbit hole with svg image:

In my stylesheet:

.svg {
display: block;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 15%;
}

In my html:

<p class="svg"><img alt="scrolls" src="scrolls.svg"/></p>

and another, I tried using the viewbox method:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots), however, it's fine in Sigil and Calibre. I want to keep the size of scrolls.sgv, as I'm happy with the size, however, I would like scroll.svg to be smaller. I'm editing this in Sigil.

Very bizarre! Any help with this, would be much appreciated.
The above-mentioned screenshots/pictures would help?

Hitch
Hitch is offline   Reply With Quote
Old 08-05-2020, 08:46 AM   #10
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,165
Karma: 3937951
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots)
Where are the two attached screenshots? By the way, this is bad implemented:

Code:
<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>
You can't define the "viewbox" and "preserveaspectratio" properties inside a <p> tag.
RbnJrg is offline   Reply With Quote
Old 08-05-2020, 09:16 AM   #11
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,605
Karma: 92369247
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by RbnJrg View Post
Where are the two attached screenshots? By the way, this is bad implemented:

Code:
<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>
You can't define the "viewbox" and "preserveaspectratio" properties inside a <p> tag.
Which might go a fur piece in 'splainin' why that code ain't workin'!



Hitch
Hitch is offline   Reply With Quote
Old 08-05-2020, 12:09 PM   #12
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: 719
Karma: 3000010
Join Date: Nov 2019
Device: none
Quote:
Originally Posted by Hitch View Post
Which might go a fur piece in 'splainin' why that code ain't workin'!



Hitch
Someone's been reading Westerns; oh wait, you live there!
hobnail is offline   Reply With Quote
Old 08-05-2020, 12:35 PM   #13
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,605
Karma: 92369247
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by hobnail View Post
Someone's been reading Westerns; oh wait, you live there!
I duz!

Hitch
Hitch 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
kindle bug with scaled images poetrycoder Workshop 7 11-12-2015 06:58 AM
correct interpretation of <br> with centred text cybmole Sigil 23 08-16-2014 10:55 AM
Calibre window displays scaled holiveros Calibre 3 08-01-2013 12:28 PM
Scaled images in iBooks ckirchho Apple Devices 5 06-25-2010 05:21 AM
last line in each paragraph centred scgf Calibre 9 09-10-2008 02:23 PM


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


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